Give negative margin to account for border

Paginate scenarios

src/components/OutputsTable/AddVariantButton.tsx

@@ -1,5 +1,6 @@
 import { Box, Flex, Icon, Spinner } from "@chakra-ui/react";
 import { BsPlus } from "react-icons/bs";
+import { Text } from "@chakra-ui/react";
 import { api } from "~/utils/api";
 import { useExperiment, useExperimentAccess, useHandledAsyncCallback } from "~/utils/hooks";
 import { cellPadding } from "../constants";
@@ -25,9 +26,10 @@ export default function AddVariantButton() {
     <Flex w="100%" justifyContent="flex-end">
       <ActionButton
         onClick={onClick}
+        py={5}
         leftIcon={<Icon as={loading ? Spinner : BsPlus} boxSize={6} mr={loading ? 1 : 0} />}
       >
-        Add Variant
+        <Text display={{ base: "none", md: "flex" }}>Add Variant</Text>
       </ActionButton>
       {/* <Button
         alignItems="center"

src/components/OutputsTable/ScenariosHeader.tsx

@@ -61,8 +61,11 @@ export const ScenariosHeader = () => {
               icon={<Icon as={loading ? Spinner : BsGear} />}
             />
           </MenuButton>
-          <MenuList fontSize="md">
-            <MenuItem icon={<Icon as={BsPlus} boxSize={6} />} onClick={() => onAddScenario(false)}>
+          <MenuList fontSize="md" zIndex="dropdown" mt={-3}>
+            <MenuItem
+              icon={<Icon as={BsPlus} boxSize={6} mx={-1} />}
+              onClick={() => onAddScenario(false)}
+            >
               Add Scenario
             </MenuItem>
             <MenuItem icon={<BsStars />} onClick={() => onAddScenario(true)}>

src/components/OutputsTable/index.tsx

@@ -51,6 +51,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
           ...borders,
           colStart: i + 2,
           borderLeftWidth: i === 0 ? 1 : 0,
+          marginLeft: i === 0 ? "-1px" : 0,
         };
         return (
           <>