🐛 - fix: fix a bug that caused the UI to horizontally overflow in cer…

…tain cases
maykinmedia · Oct 15, 2024 · 12b6c2f · 12b6c2f
1 parent db50cbe
commit 12b6c2f
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 43 deletions.
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
@@ -1,5 +1,6 @@
 import {
   FloatingFocusManager,
+  FloatingPortal,
   Side,
   autoUpdate,
   flip,
@@ -131,25 +132,27 @@ export const Dropdown: React.FC<DropdownProps> = ({
         {label}
       </Button>
       {isOpen && (
-        <FloatingFocusManager context={context} modal={false}>
-          <div
-            className="mykn-dropdown__dropdown"
-            ref={refs.setFloating}
-            style={floatingStyles}
-            {...getFloatingProps()}
-          >
-            {isToolbarModuleLoaded(toolbarModuleState) && (
-              <toolbarModuleState.Toolbar
-                align="start"
-                direction="vertical"
-                items={items}
-                {...toolbarProps}
-              >
-                {children}
-              </toolbarModuleState.Toolbar>
-            )}
-          </div>
-        </FloatingFocusManager>
+        <FloatingPortal>
+          <FloatingFocusManager context={context} modal={false}>
+            <div
+              className="mykn-dropdown__dropdown"
+              ref={refs.setFloating}
+              style={floatingStyles}
+              {...getFloatingProps()}
+            >
+              {isToolbarModuleLoaded(toolbarModuleState) && (
+                <toolbarModuleState.Toolbar
+                  align="start"
+                  direction="vertical"
+                  items={items}
+                  {...toolbarProps}
+                >
+                  {children}
+                </toolbarModuleState.Toolbar>
+              )}
+            </div>
+          </FloatingFocusManager>
+        </FloatingPortal>
       )}
     </div>
   );

diff --git a/src/components/layout/page/page.scss b/src/components/layout/page/page.scss
@@ -1,11 +1,10 @@
 @use "../../../settings/constants";
 
 .mykn-page {
-  align-items: start;
   background-color: var(--page-color-background);
   container-name: page;
   display: flex;
-  flex-direction: column;
+  //flex-direction: column;  // Removed to facilitate NavBar move in BaseTemplate.
   box-sizing: border-box;
   width: 100%;
   min-height: 100%;
@@ -35,6 +34,6 @@
   }
 
   &--valign-middle {
-    justify-content: center;
+    align-items: center;
   }
 }
diff --git a/src/components/navbar/navbar.scss b/src/components/navbar/navbar.scss
@@ -1,5 +0,0 @@
-.mykn-navbar {
-  .mykn-logo {
-    width: 32px;
-  }
-}

diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
@@ -10,19 +10,17 @@ export type NavbarProps = ToolbarProps;
  */
 export const Navbar: React.FC<NavbarProps> = ({ children, ...props }) => {
   return (
-    <div className="mykn-navbar">
-      <Toolbar
-        align="center"
-        direction="vertical"
-        justify="v"
-        pad
-        padSize="xs"
-        variant="primary"
-        sticky="top"
-        {...props}
-      >
-        {children}
-      </Toolbar>
-    </div>
+    <Toolbar
+      align="center"
+      direction="vertical"
+      justify="v"
+      pad
+      padSize="xs"
+      variant="primary"
+      sticky="top"
+      {...props}
+    >
+      {children}
+    </Toolbar>
   );
 };
diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
@@ -34,6 +34,10 @@
     }
   }
 
+  &--direction-vertical .mykn-logo {
+    width: 32px;
+  }
+
   &:not(#{&}--direction-responsive)#{&}--direction-horizontal {
     max-height: 100%;
     flex-direction: row;
@@ -74,6 +78,12 @@
     flex-shrink: 9999;
   }
 
+  @media screen and (max-width: constants.$breakpoint-desktop - 1px) {
+    &--direction-responsive .mykn-logo {
+      width: 32px;
+    }
+  }
+
   @media screen and (min-width: constants.$breakpoint-desktop) {
     &--align-start {
       align-items: start;

diff --git a/src/templates/base/base.tsx b/src/templates/base/base.tsx
@@ -87,15 +87,15 @@ export const BaseTemplate: React.FC<BaseTemplateProps> = ({
   const content = (
     <Grid>
       <Column direction="row" span={12} {...columnProps}>
-        {slotPrimaryNavigation || contextNavigation}
-        {slotSidebar || contextSidebar}
         {children}
       </Column>
     </Grid>
   );
 
   return (
     <Page {...pageProps}>
+      {slotPrimaryNavigation || contextNavigation}
+      {slotSidebar || contextSidebar}
       {container ? <Container>{content}</Container> : content}
     </Page>
   );