🐛 Layout issues with toggle edit mode button and popover

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -1,31 +1,50 @@
-import { Button, Popover, Tooltip, Text } from '@mantine/core';
+import { ActionIcon, Button, Flex, Popover, Text, Tooltip } from '@mantine/core';
-import { IconEditCircle, IconEditCircleOff } from '@tabler/icons';
+import { IconEditCircle, IconEditCircleOff, IconX } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+import { useScreenSmallerThan } from '../../../../../tools/hooks/useScreenSmallerThan';
 
 import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
 
 export const ToggleEditModeAction = () => {
+  const { enabled, toggleEditMode } = useEditModeStore();
+  const [popoverManuallyHidden, setPopoverManuallyHidden] = useState<boolean>();
+
   const { t } = useTranslation('layout/header/actions/toggle-edit-mode');
 
-  const { enabled, toggleEditMode } = useEditModeStore();
+  const smallerThanSm = useScreenSmallerThan('sm');
 
   return (
     <Tooltip label={t('tooltip')} withinPortal>
-      <Popover opened={enabled} width={250} withArrow>
+      <Popover opened={enabled && !smallerThanSm && !popoverManuallyHidden} width={250} withArrow>
         <Popover.Target>
+          {smallerThanSm ? (
+            <ActionIcon variant="default" radius="md" size="xl" color="blue">
+              {enabled ? <IconEditCircleOff /> : <IconEditCircle />}
+            </ActionIcon>
+          ) : (
             <Button
-            onClick={() => toggleEditMode()}
+              onClick={() => {
+                toggleEditMode();
+                setPopoverManuallyHidden(false);
+              }}
               leftIcon={enabled ? <IconEditCircleOff /> : <IconEditCircle />}
               variant="default"
               radius="md"
               color="blue"
-            style={{ height: 'auto', alignSelf: 'stretch' }}
+              style={{ height: 44 }}
             >
-            {enabled ? t('button.enabled') : t('button.disabled')}
+              <Text>{enabled ? t('button.enabled') : t('button.disabled')}</Text>
             </Button>
+          )}
         </Popover.Target>
-        <Popover.Dropdown>
+        <Popover.Dropdown p={4} px={6}>
-          <Text align="center">
+          <div style={{ position: 'absolute', top: 2, right: 2 }}>
+            <ActionIcon onClick={() => setPopoverManuallyHidden(true)}>
+              <IconX size={18} />
+            </ActionIcon>
+          </div>
+          <Text align="center" size="sm">
             <Text weight="bold">{t('popover.title')}</Text>
             {t('popover.text')}
           </Text>

src/components/layout/header/Header.tsx

@@ -22,7 +22,7 @@ export function Header(props: any) {
         <Box className={classes.hide}>
           <Logo />
         </Box>
-        <Group position="right" noWrap>
+        <Group position="right" style={{ maxWidth: 'none' }} noWrap>
           <Text
             onClick={() => {
               openContextModal({
@@ -35,7 +35,7 @@ export function Header(props: any) {
             }}
             variant="link"
           >
-            Test: Open Change Pos Modal
+            Test
           </Text>
 
           <Search />