fixed Settings Menu UI going out of the viewer

cognitedata · Nov 1, 2024 · 757a760 · 757a760
1 parent be8910c
commit 757a760
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx
@@ -89,6 +89,7 @@ export const FilterButton = ({
       label={label}
       selectedLabel={selectedLabel}
       isOpen={isOpen}
+      setOpen={setOpen}
       PanelContent={PanelContent}
     />
   ) : (
@@ -133,8 +134,7 @@ const FilterMenu = ({
     <Menu
       floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}
       onOpenChange={setOpen}
-      appendTo={'parent'}
-      placement={'right-start'}
+      placement={'right-end'}
       disableCloseOnClickInside
       renderTrigger={(props: any) => (
         <CogsTooltip
@@ -168,17 +168,19 @@ const FilterDropdown = ({
   label,
   selectedLabel,
   isOpen,
+  setOpen,
   PanelContent
 }: {
   label: string;
   selectedLabel: string;
   isOpen: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
   PanelContent: ReactElement;
 }): ReactElement => {
   return (
     <StyledDropdownRow>
       <label>{label}</label>
-      <StyledSelectPanel appendTo="parent">
+      <StyledSelectPanel appendTo={'parent'} placement={'right-end'}>
         <SelectPanel.Trigger>
           <Button
             color="#000044"
@@ -188,6 +190,9 @@ const FilterDropdown = ({
               minWidth: OPTION_MIN_WIDTH,
               paddingRight: '8px',
               paddingLeft: '8px'
+            }}
+            onClick={() => {
+              setOpen((prev) => !prev);
             }}>
             <StyledDropdownSelectionLabel>{selectedLabel}</StyledDropdownSelectionLabel>
             {isOpen ? (
@@ -197,9 +202,7 @@ const FilterDropdown = ({
             )}
           </Button>
         </SelectPanel.Trigger>
-        <SelectPanel.Body style={{ overflow: 'hidden', zindex: 2000 }}>
-          {PanelContent}
-        </SelectPanel.Body>
+        <SelectPanel.Body style={{ overflow: 'hidden' }}>{PanelContent}</SelectPanel.Body>
       </StyledSelectPanel>
     </StyledDropdownRow>
   );

diff --git a/react-components/src/components/Architecture/SettingsButton.tsx b/react-components/src/components/Architecture/SettingsButton.tsx
@@ -71,14 +71,15 @@ export const SettingsButton = ({
   const flexDirection = getFlexDirection(placement);
   const children = command.children;
   return (
-    <Menu
+    <StyledMenu
       hideOnSelect={false}
       onOpenChange={(open: boolean) => {
         setOpen(open);
       }}
       floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}
       appendTo={'parent'}
-      placement="right-start"
+      placement="right-end"
+      zindex={998}
       style={{
         flexDirection,
         padding: DEFAULT_PADDING
@@ -104,7 +105,7 @@ export const SettingsButton = ({
         </CogsTooltip>
       )}>
       {children.map((child) => createMenuItem(child, t))}
-    </Menu>
+    </StyledMenu>
   );
 };
 
@@ -346,3 +347,7 @@ const StyledSlider = styled(Slider)`
   display: flex;
   justify-content: space-around;
 `;
+
+const StyledMenu = styled(Menu)`
+  z-index: 998;
+`;
diff --git a/react-components/src/components/constants.ts b/react-components/src/components/constants.ts
@@ -1,4 +1,4 @@
 /*!
  * Copyright 2024 Cognite AS
  */
-export const TOOLBAR_HORIZONTAL_PANEL_OFFSET = 6;
+export const TOOLBAR_HORIZONTAL_PANEL_OFFSET = 12;