From bfdd6b51817f5ff9c6994ac5c7a1f8e6fc65690e Mon Sep 17 00:00:00 2001
From: Manuel Ruwe <manuel.ruwe@bluewin.ch>
Date: Sat, 10 Dec 2022 22:50:34 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Layout=20issues=20with=20toggle?=
 =?UTF-8?q?=20edit=20mode=20button=20and=20popover?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Actions/ToggleEditMode/ToggleEditMode.tsx | 51 +++++++++++++------
 src/components/layout/header/Header.tsx       |  4 +-
 2 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
index 0f52356bf..18c2025e7 100644
--- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
+++ b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
@@ -1,31 +1,50 @@
-import { Button, Popover, Tooltip, Text } from '@mantine/core';
-import { IconEditCircle, IconEditCircleOff } from '@tabler/icons';
+import { ActionIcon, Button, Flex, Popover, Text, Tooltip } from '@mantine/core';
+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>
-          <Button
-            onClick={() => toggleEditMode()}
-            leftIcon={enabled ? <IconEditCircleOff /> : <IconEditCircle />}
-            variant="default"
-            radius="md"
-            color="blue"
-            style={{ height: 'auto', alignSelf: 'stretch' }}
-          >
-            {enabled ? t('button.enabled') : t('button.disabled')}
-          </Button>
+          {smallerThanSm ? (
+            <ActionIcon variant="default" radius="md" size="xl" color="blue">
+              {enabled ? <IconEditCircleOff /> : <IconEditCircle />}
+            </ActionIcon>
+          ) : (
+            <Button
+              onClick={() => {
+                toggleEditMode();
+                setPopoverManuallyHidden(false);
+              }}
+              leftIcon={enabled ? <IconEditCircleOff /> : <IconEditCircle />}
+              variant="default"
+              radius="md"
+              color="blue"
+              style={{ height: 44 }}
+            >
+              <Text>{enabled ? t('button.enabled') : t('button.disabled')}</Text>
+            </Button>
+          )}
         </Popover.Target>
-        <Popover.Dropdown>
-          <Text align="center">
+        <Popover.Dropdown p={4} px={6}>
+          <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>
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
index 68185c409..b235b3295 100644
--- a/src/components/layout/header/Header.tsx
+++ b/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 />