fix: ensure select level options show and increase mobile hamburger menu

JanStevens · Feb 7, 2024 · 1e216dc · 1e216dc
1 parent 2cae9c1
commit 1e216dc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git a/src/components/@scenario/ChangeLevelDialog.tsx b/src/components/@scenario/ChangeLevelDialog.tsx
@@ -1,4 +1,3 @@
-import { Portal } from '@ark-ui/react';
 import { Stack } from '@style/jsx';
 import { Icon } from 'icons';
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
@@ -56,24 +55,22 @@ const ChangeLevelDialog = ({
                     <ChevronsUpDownIcon />
                   </Select.Trigger>
                 </Select.Control>
-                <Portal>
-                  <Select.Positioner overflow="scroll">
-                    <Select.Content>
-                      <Select.ItemGroup id="framework">
-                        {PARTY_LEVELS.map((item) => (
-                          <Select.Item key={item.value} item={item}>
-                            <Select.ItemText fontFamily="pirataOne">
-                              {item.label}
-                            </Select.ItemText>
-                            <Select.ItemIndicator>
-                              <CheckIcon />
-                            </Select.ItemIndicator>
-                          </Select.Item>
-                        ))}
-                      </Select.ItemGroup>
-                    </Select.Content>
-                  </Select.Positioner>
-                </Portal>
+                <Select.Positioner overflow="scroll">
+                  <Select.Content>
+                    <Select.ItemGroup id="framework">
+                      {PARTY_LEVELS.map((item) => (
+                        <Select.Item key={item.value} item={item}>
+                          <Select.ItemText fontFamily="pirataOne">
+                            {item.label}
+                          </Select.ItemText>
+                          <Select.ItemIndicator>
+                            <CheckIcon />
+                          </Select.ItemIndicator>
+                        </Select.Item>
+                      ))}
+                    </Select.ItemGroup>
+                  </Select.Content>
+                </Select.Positioner>
               </Select.Root>
             </Stack>
             <Stack gap="3" direction="row" width="full">

diff --git a/src/components/@scenario/Navbar.tsx b/src/components/@scenario/Navbar.tsx
@@ -92,7 +92,7 @@ const Navbar = ({ scenarioName }: Props) => {
             )}
           </Button>
         </HStack>
-        <HStack gap={2} display={{ lgTo2xl: 'flex', base: 'none' }}>
+        <HStack gap={2} display={{ lgDown: 'none', base: 'flex' }}>
           <Button
             variant="subtle"
             aria-label="Change Party level"
@@ -113,7 +113,7 @@ const Navbar = ({ scenarioName }: Props) => {
         onValueChange={handleValueChange}
       >
         <Menu.Trigger asChild display={{ smDown: 'flex', base: 'none' }}>
-          <IconButton variant="ghost" size="sm" fontWeight="normal">
+          <IconButton variant="ghost" size="md" fontWeight="normal">
             <MenuIcon />
           </IconButton>
         </Menu.Trigger>