fix responsive layout

solaoi · Sep 20, 2021 · aac95db · aac95db
1 parent 4c8c780
commit aac95db
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 59 deletions.
diff --git a/app/pages/projects/[projectId].tsx b/app/pages/projects/[projectId].tsx
@@ -209,38 +209,40 @@ export const Project = () => {
                 </Button>
               </Link>
             </Flex>
-            <Table variant="simple" mb={5}>
-              <Thead>
-                <Tr>
-                  <Th>path</Th>
-                  <Th>method</Th>
-                  <Th>content-type</Th>
-                  <Th>status-code</Th>
-                  <Th>copy-url</Th>
-                </Tr>
-              </Thead>
-              <Tbody>
-                {stubs.map((stub) => (
-                  <Link
-                    href={Routes.ShowStubPage({ stubId: stub.id })}
-                    key={`${stub.projectId}_${stub.id}`}
-                  >
-                    <Tr
-                      style={{ cursor: "pointer" }}
-                      _hover={{ color: "#fff", bg: "teal.400", borderColor: "teal.400" }}
+            <Box overflowX="auto">
+              <Table variant="simple" mb={5}>
+                <Thead>
+                  <Tr>
+                    <Th>path</Th>
+                    <Th>method</Th>
+                    <Th>content-type</Th>
+                    <Th>status-code</Th>
+                    <Th>copy-url</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {stubs.map((stub) => (
+                    <Link
+                      href={Routes.ShowStubPage({ stubId: stub.id })}
+                      key={`${stub.projectId}_${stub.id}`}
                     >
-                      <Td>{stub.path}</Td>
-                      <Td>{stub.method}</Td>
-                      <Td>{stub.contentType}</Td>
-                      <Td>{stub.statusCode}</Td>
-                      <Td>
-                        <CopyUrlButton project={project} stub={stub} />
-                      </Td>
-                    </Tr>
-                  </Link>
-                ))}
-              </Tbody>
-            </Table>
+                      <Tr
+                        style={{ cursor: "pointer" }}
+                        _hover={{ color: "#fff", bg: "teal.400", borderColor: "teal.400" }}
+                      >
+                        <Td>{stub.path}</Td>
+                        <Td>{stub.method}</Td>
+                        <Td>{stub.contentType}</Td>
+                        <Td>{stub.statusCode}</Td>
+                        <Td>
+                          <CopyUrlButton project={project} stub={stub} />
+                        </Td>
+                      </Tr>
+                    </Link>
+                  ))}
+                </Tbody>
+              </Table>
+            </Box>
 
             <Flex justify="space-between">
               <Button

diff --git a/app/pages/projects/index.tsx b/app/pages/projects/index.tsx
@@ -98,7 +98,7 @@ export const ProjectsList = () => {
             </Button>
           </Link>
         </Flex>
-        <InputGroup w="30%">
+        <InputGroup w="30%" minW="6rem">
           <InputLeftElement pointerEvents="none">
             <SearchIcon color="gray.300" />
           </InputLeftElement>
@@ -116,33 +116,35 @@ export const ProjectsList = () => {
             }}
           />
         </InputGroup>
-        <Table variant="simple" mb={5}>
-          <Thead>
-            <Tr>
-              <Th>name</Th>
-              <Th>base-path</Th>
-              <Th>created-by</Th>
-              <Th>updated-by</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {projects.map((project) => (
-              <Link href={Routes.ShowProjectPage({ projectId: project.id })} key={project.id}>
-                <Tr
-                  style={{ cursor: "pointer" }}
-                  _hover={{ color: "#fff", bg: "teal.400", borderColor: "teal.400" }}
-                >
-                  <Td>{project.name}</Td>
-                  <Td>{project.basePath}</Td>
-                  <Td>{project.createdBy}</Td>
-                  <Suspense fallback={<Td></Td>}>
-                    <UpdatedBy project={project} />
-                  </Suspense>
-                </Tr>
-              </Link>
-            ))}
-          </Tbody>
-        </Table>
+        <Box overflowX="auto">
+          <Table variant="simple" mb={5}>
+            <Thead>
+              <Tr>
+                <Th>name</Th>
+                <Th>base-path</Th>
+                <Th>created-by</Th>
+                <Th>updated-by</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {projects.map((project) => (
+                <Link href={Routes.ShowProjectPage({ projectId: project.id })} key={project.id}>
+                  <Tr
+                    style={{ cursor: "pointer" }}
+                    _hover={{ color: "#fff", bg: "teal.400", borderColor: "teal.400" }}
+                  >
+                    <Td>{project.name}</Td>
+                    <Td>{project.basePath}</Td>
+                    <Td>{project.createdBy}</Td>
+                    <Suspense fallback={<Td></Td>}>
+                      <UpdatedBy project={project} />
+                    </Suspense>
+                  </Tr>
+                </Link>
+              ))}
+            </Tbody>
+          </Table>
+        </Box>
 
         <Flex justify="space-between">
           <Button