refactor(37943): fix layout

Author: vanch3d

hivemq-edge-frontend/src/modules/Workspace/components/filters/DrawerFilterToolbox.tsx

@@ -133,7 +133,7 @@ const DrawerFilterToolbox: FC<DrawerFilterToolboxProps> = ({ onClearFilters, onA
   }
 
   return (
-    <ButtonGroup variant="outline" isAttached size="sm" m={1} data-testid="toolbox-filter">
+    <ButtonGroup variant="outline" isAttached size="sm" data-testid="toolbox-filter">
       <Button
         size="sm"
         leftIcon={<Icon as={GoSidebarExpand} boxSize="24px" />}

hivemq-edge-frontend/src/modules/Workspace/components/layout/ApplyLayoutButton.tsx

@@ -85,6 +85,7 @@ const ApplyLayoutButton: FC = () => {
         onClick={handleApplyLayout}
         isLoading={isApplying}
         loadingText={t('workspace.autoLayout.apply.loading')}
+        minWidth="unset"
       >
         {t('workspace.autoLayout.apply.label')}
       </Button>

hivemq-edge-frontend/src/modules/Workspace/components/layout/LayoutPresetsManager.tsx

@@ -33,6 +33,7 @@ import {
   Text,
   useToast,
   Tooltip,
+  Portal,
 } from '@chakra-ui/react'
 import { LuBookmark, LuSave, LuTrash2 } from 'react-icons/lu'
 import { v4 as uuidv4 } from 'uuid'
@@ -128,53 +129,55 @@ const LayoutPresetsManager: FC = () => {
             aria-label={t('workspace.autoLayout.presets.aria-label')}
           />
         </Tooltip>
-        <MenuList>
-          <MenuItem icon={<Icon as={LuSave} />} onClick={onOpen}>
-            {t('workspace.autoLayout.presets.actions.save')}
-          </MenuItem>
-
-          {layoutConfig.presets.length > 0 && (
-            <>
-              <MenuDivider />
-              <Text fontSize="xs" fontWeight="bold" px={3} py={1} color="gray.500">
-                {t('workspace.autoLayout.presets.list.title')}
-              </Text>
-
-              {layoutConfig.presets.map((preset) => (
-                <HStack key={preset.id} spacing={0} _hover={{ bg: 'gray.50', _dark: { bg: 'gray.700' } }}>
-                  <MenuItem flex={1} onClick={() => handleLoadPreset(preset.id)}>
-                    <VStack align="start" spacing={0}>
-                      <Text fontSize="sm">{preset.name}</Text>
-                      <Text fontSize="xs" color="gray.500">
-                        {new Date(preset.createdAt).toLocaleDateString()}
-                      </Text>
-                    </VStack>
-                  </MenuItem>
-                  <IconButton
-                    icon={<Icon as={LuTrash2} />}
-                    size="xs"
-                    variant="ghost"
-                    colorScheme="red"
-                    aria-label={t('workspace.autoLayout.presets.actions.delete')}
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      handleDeletePreset(preset.id)
-                    }}
-                  />
-                </HStack>
-              ))}
-            </>
-          )}
-
-          {layoutConfig.presets.length === 0 && (
-            <>
-              <MenuDivider />
-              <Text fontSize="xs" px={3} py={2} color="gray.500">
-                {t('workspace.autoLayout.presets.list.empty')}
-              </Text>
-            </>
-          )}
-        </MenuList>
+        <Portal>
+          <MenuList>
+            <MenuItem icon={<Icon as={LuSave} />} onClick={onOpen}>
+              {t('workspace.autoLayout.presets.actions.save')}
+            </MenuItem>
+
+            {layoutConfig.presets.length > 0 && (
+              <>
+                <MenuDivider />
+                <Text fontSize="xs" fontWeight="bold" px={3} py={1} color="gray.500">
+                  {t('workspace.autoLayout.presets.list.title')}
+                </Text>
+
+                {layoutConfig.presets.map((preset) => (
+                  <HStack key={preset.id} spacing={0} _hover={{ bg: 'gray.50', _dark: { bg: 'gray.700' } }}>
+                    <MenuItem flex={1} onClick={() => handleLoadPreset(preset.id)}>
+                      <VStack align="start" spacing={0}>
+                        <Text fontSize="sm">{preset.name}</Text>
+                        <Text fontSize="xs" color="gray.500">
+                          {new Date(preset.createdAt).toLocaleDateString()}
+                        </Text>
+                      </VStack>
+                    </MenuItem>
+                    <IconButton
+                      icon={<Icon as={LuTrash2} />}
+                      size="xs"
+                      variant="ghost"
+                      colorScheme="red"
+                      aria-label={t('workspace.autoLayout.presets.actions.delete')}
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleDeletePreset(preset.id)
+                      }}
+                    />
+                  </HStack>
+                ))}
+              </>
+            )}
+
+            {layoutConfig.presets.length === 0 && (
+              <>
+                <MenuDivider />
+                <Text fontSize="xs" px={3} py={2} color="gray.500">
+                  {t('workspace.autoLayout.presets.list.empty')}
+                </Text>
+              </>
+            )}
+          </MenuList>
+        </Portal>
       </Menu>
 
       <Modal isOpen={isOpen} onClose={onClose}>