fix mobile viewport overflow issue

hyperglass/ui/components/footer/button.tsx

@@ -1,4 +1,4 @@
-import { Button, Menu, MenuButton, MenuList } from '@chakra-ui/react';
+import { Box, Button, Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
 import { Markdown } from '~/components';
 import { useColorValue, useBreakpointValue } from '~/context';
 import { useOpposingColor } from '~/hooks';
@@ -7,12 +7,12 @@ import type { TFooterButton } from './types';
 
 export const FooterButton = (props: TFooterButton) => {
   const { content, title, side, ...rest } = props;
-  const placement = side === 'left' ? 'top' : side === 'right' ? 'top-start' : undefined;
+  const placement = side === 'left' ? 'top' : side === 'right' ? 'top-end' : undefined;
   const bg = useColorValue('white', 'gray.900');
   const color = useOpposingColor(bg);
   const size = useBreakpointValue({ base: 'xs', lg: 'sm' });
   return (
-    <Menu placement={placement}>
+    <Menu placement={placement} preventOverflow isLazy>
       <MenuButton
         as={Button}
         size={size}
@@ -21,14 +21,14 @@ export const FooterButton = (props: TFooterButton) => {
         {title}
       </MenuButton>
       <MenuList
-        bg={bg}
-        boxShadow="2xl"
-        color={color}
         px={6}
         py={4}
+        bg={bg}
+        color={color}
+        boxShadow="2xl"
         textAlign="left"
         mx={{ base: 1, lg: 2 }}
-        maxW={{ base: '100vw', lg: '50vw' }}
+        maxW={{ base: '100%', lg: '50vw' }}
         {...rest}>
         <Markdown content={content} />
       </MenuList>