Merge pull request #1292 from navikt/fix-sticky-menu

Fix sticky left menu
navikt · Sep 17, 2024 · 71a5bb8 · 71a5bb8
2 parents 962d979 + f1c29a9
commit 71a5bb8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/packages/bygger/src/components/layout/RowLayout.tsx b/packages/bygger/src/components/layout/RowLayout.tsx
@@ -8,22 +8,28 @@ export interface Props {
   right?: React.ReactNode;
   fixedPosition?: boolean;
   fullWidth?: boolean;
+  overflowHidden?: boolean;
   className?: string;
 }
 
 const useStyles = makeStyles({
   sidePadding: {
     padding: '0 var(--a-spacing-4)',
   },
+  overflowHidden: {
+    overflow: 'hidden',
+  },
 });
 
-const RowLayout = ({ children, left, right, fullWidth, className }: Props) => {
+const RowLayout = ({ children, left, right, fullWidth, overflowHidden, className }: Props) => {
   const styles = useStyles();
 
   return (
     <div className={classNames('row-layout', styles.sidePadding, className)}>
       {(left || !fullWidth) && <div className="row-layout__left">{left}</div>}
-      <div className="row-layout__main">{children}</div>
+      <div className={classNames('row-layout__main', { [styles.overflowHidden]: overflowHidden }, className)}>
+        {children}
+      </div>
       {(right || !fullWidth) && <div className="row-layout__right">{right}</div>}
     </div>
   );

diff --git a/packages/bygger/src/components/layout/TitleRowLayout.tsx b/packages/bygger/src/components/layout/TitleRowLayout.tsx
@@ -31,7 +31,7 @@ const TitleRowLayout = ({ children, left, right }: Props) => {
 
   return (
     <div className={styles.fixedPosition}>
-      <RowLayout left={left} right={right}>
+      <RowLayout left={left} right={right} overflowHidden={true}>
         {children}
       </RowLayout>
     </div>

diff --git a/packages/shared-components/src/styles/global/rowLayout.ts b/packages/shared-components/src/styles/global/rowLayout.ts
@@ -5,7 +5,6 @@ const rowLayout = {
     gap: '1.5rem',
     '&__main': {
       flex: '1 1 100%',
-      overflow: 'hidden',
     },
     '&__right, &__left': {
       flex: '0 0 15rem',