Merge pull request #4210 from 8rxn/responsiveTable

Improve Responsiveness for Table at Service Mesh Patterns Page
layer5io · May 15, 2023 · 51bcb61 · 51bcb61
2 parents 0c98a9b + 35a44fb
commit 51bcb61
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/components/service-mesh-patterns-Table/Table.js b/src/components/service-mesh-patterns-Table/Table.js
@@ -48,7 +48,7 @@ const Table = () => {
                       : <>
                       </>}
                     {(column.Header == "Category") ?
-                      <div>{column.canFilter ? column.render("Filter") : null}</div>
+                      <div id={"service-mesh-patterns-table-filter"}>{column.canFilter ? column.render("Filter") : null}</div>
                       : <> </>
                     }
                   </div>

diff --git a/src/sections/Learn/Book-single/BookSingle.style.js b/src/sections/Learn/Book-single/BookSingle.style.js
@@ -27,6 +27,15 @@ const BookSinglePageWrapper = styled.div`
 		}
 		
 	}
+
+	@media only screen and (max-width: 500px) {
+		#service-mesh-patterns-table-filter > select{
+			width: 100%;
+		}
+	}
+	table > tbody> tr > td {
+		text-align:center;
+	}
     .single-post-wrapper{
         margin: 2rem 0;
     }