Make nicer on mobile

loathers · Apr 3, 2024 · ab8d3a2 · ab8d3a2
1 parent 36142b3
commit ab8d3a2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/excavator-web/app/root.tsx b/packages/excavator-web/app/root.tsx
@@ -72,7 +72,7 @@ export default function App() {
   return (
     <Document>
       <ChakraProvider theme={theme}>
-        <Container maxW="container.xl" pt={10}>
+        <Container maxW={["100%", null, "container.xl"]} pt={10}>
           <Stack spacing={10}>
             <Heading alignSelf="center">
               <Link to="/">Excavator ♠️</Link>

diff --git a/packages/excavator-web/app/routes/projects.tsx b/packages/excavator-web/app/routes/projects.tsx
@@ -1,6 +1,7 @@
 import {
   Alert,
   Tab,
+  TabIndicator,
   TabList,
   TabPanel,
   TabPanels,
@@ -51,13 +52,26 @@ export default function Projects() {
   return (
     <Tabs
       defaultIndex={projectIndex}
+      maxWidth="100%"
       onChange={(i) => navigate(`./${slug(projects[i])}`)}
     >
-      <TabList>
+      <TabList
+        overflowX="scroll"
+        sx={{
+          scrollbarWidth: "none",
+          "::-webkit-scrollbar": {
+            display: "none",
+          },
+        }}
+        pb={1}
+      >
         {projects.map((p) => (
-          <Tab key={p}>{p}</Tab>
+          <Tab key={p} sx={{ textWrap: "nowrap" }}>
+            {p}
+          </Tab>
         ))}
       </TabList>
+      <TabIndicator />
       <TabPanels>
         <Outlet />
       </TabPanels>