Make mobile prettier (#19)

* Fix mobile experiment buttons

* Fix mobile NewExperimentButton

* Add base columns for experiments

* Shrink side navbar on mobile

* Compress social links

src/components/experiments/NewExperimentButton.tsx

@@ -1,4 +1,4 @@
-import { Icon, Button, Spinner, type ButtonProps } from "@chakra-ui/react";
+import { Icon, Button, Spinner, Text, type ButtonProps } from "@chakra-ui/react";
 import { api } from "~/utils/api";
 import { useRouter } from "next/router";
 import { BsPlusSquare } from "react-icons/bs";
@@ -19,11 +19,13 @@ export const NewExperimentButton = (props: ButtonProps) => {
       onClick={createExperiment}
       display="flex"
       alignItems="center"
-      variant="ghost"
+      variant={{ base: "solid", md: "ghost" }}
       {...props}
     >
-      <Icon as={isLoading ? Spinner : BsPlusSquare} boxSize={4} mr={2} />
+      <Icon as={isLoading ? Spinner : BsPlusSquare} boxSize={4} />
-      New Experiment
+      <Text display={{ base: "none", md: "block" }} ml={2}>
+        New Experiment
+      </Text>
     </Button>
   );
 };

src/components/nav/AppShell.tsx

@@ -50,16 +50,16 @@ const NavSidebar = () => {
     <VStack align="stretch" bgColor="gray.100" py={2} pb={0} height="100%">
       <HStack spacing={0} pl="4">
         <Image src="/logo.svg" alt="" w={6} h={6} />
-        <Heading size="md" p={2}>
+        <Heading size="md" p={2} pl={{base: 16, md: 2}}>
           OpenPipe
         </Heading>
       </HStack>
       <Divider />
-      <VStack spacing={0} align="flex-start" overflowY="auto" flex={1}>
+      <VStack spacing={0} align="flex-start" overflowY="auto" overflowX="hidden" flex={1}>
         <IconLink icon={RiFlaskLine} label="Experiments" href="/experiments" />
       </VStack>
       <Divider />
-      <VStack align="center" spacing={4} p={2}>
+      <VStack w="full" spacing={0} pb={2}>
         <IconLink
           icon={BsGithub}
           label="GitHub"
@@ -86,7 +86,7 @@ export default function AppShell(props: { children: React.ReactNode; title?: str
     <Grid
       h="100vh"
       w="100vw"
-      templateColumns="220px minmax(0, 1fr)"
+      templateColumns={{ base: "56px minmax(0, 1fr)", md: "200px minmax(0, 1fr)" }}
       templateRows="max-content 1fr"
       templateAreas={'"warning warning"\n"sidebar main"'}
     >
@@ -96,7 +96,7 @@ export default function AppShell(props: { children: React.ReactNode; title?: str
       <GridItem area="warning">
         <PublicPlaygroundWarning />
       </GridItem>
-      <GridItem area="sidebar" overflow="auto">
+      <GridItem area="sidebar" overflow="hidden">
         <NavSidebar />
       </GridItem>
       <GridItem area="main" overflowY="auto">

src/pages/experiments/[id].tsx

@@ -5,7 +5,6 @@ import {
   Button,
   Center,
   Flex,
-  HStack,
   Icon,
   Input,
   AlertDialog,
@@ -16,6 +15,8 @@ import {
   AlertDialogOverlay,
   useDisclosure,
   BreadcrumbLink,
+  Text,
+  HStack,
 } from "@chakra-ui/react";
 
 import { useRouter } from "next/router";
@@ -51,9 +52,17 @@ const DeleteButton = () => {
 
   return (
     <>
-      <Button size="sm" variant="ghost" colorScheme="gray" fontWeight="normal" onClick={onOpen}>
+      <Button
-        <Icon as={BsTrash} boxSize={4} mr={2} />
+        size="sm"
-        Delete Experiment
+        variant={{ base: "outline", lg: "ghost" }}
+        colorScheme="gray"
+        fontWeight="normal"
+        onClick={onOpen}
+      >
+        <Icon as={BsTrash} boxSize={4} color="gray.600" />
+        <Text display={{ base: "none", lg: "block" }} ml={2}>
+          Delete Experiment
+        </Text>
       </Button>
 
       <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
@@ -118,7 +127,12 @@ export default function Experiment() {
   return (
     <AppShell title={experiment.data?.label}>
       <Box minH="100%" pb={50}>
-        <HStack px={4} py={2}>
+        <Flex
+          px={4}
+          py={2}
+          direction={{ base: "column", md: "row" }}
+          alignItems={{ base: "flex-start", md: "center" }}
+        >
           <Breadcrumb flex={1}>
             <BreadcrumbItem>
               <BreadcrumbLink href="/experiments">
@@ -137,25 +151,29 @@ export default function Experiment() {
                 borderColor="transparent"
                 fontSize={16}
                 px={0}
-                minW={300}
+                minW={{ base: 100, lg: 300 }}
                 flex={1}
                 _hover={{ borderColor: "gray.300" }}
                 _focus={{ borderColor: "blue.500", outline: "none" }}
               />
             </BreadcrumbItem>
           </Breadcrumb>
-          <Button
+          <HStack>
-            size="sm"
+            <Button
-            variant="ghost"
+              size="sm"
-            colorScheme="gray"
+              variant={{ base: "outline", lg: "ghost" }}
-            fontWeight="normal"
+              colorScheme="gray"
-            onClick={openDrawer}
+              fontWeight="normal"
-            leftIcon={<Icon as={BsGearFill} boxSize={4} color="gray.600" />}
+              onClick={openDrawer}
-          >
+            >
-            Edit Vars & Evals
+              <Icon as={BsGearFill} boxSize={4} color="gray.600" />
-          </Button>
+              <Text display={{ base: "none", lg: "block" }} ml={2}>
-          <DeleteButton />
+                Edit Vars & Evals
-        </HStack>
+              </Text>
+            </Button>
+            <DeleteButton />
+          </HStack>
+        </Flex>
         <SettingsDrawer />
         <Box w="100%" overflowX="auto">
           <OutputsTable experimentId={router.query.id as string | undefined} />

src/pages/experiments/index.tsx

@@ -29,7 +29,7 @@ export default function ExperimentsPage() {
           </Breadcrumb>
           <NewExperimentButton mr={4} borderRadius={8} />
         </HStack>
-        <SimpleGrid w="full" columns={{ sm: 1, md: 2, lg: 3, xl: 4 }} spacing={8} p="4">
+        <SimpleGrid w="full" columns={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing={8} p="4">
           {experiments?.data?.map((exp) => (
             <ExperimentCard key={exp.id} exp={exp} />
           ))}