From 12b6c2f8d36deba653fc849311e0d5bbd4aba07c Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 15 Oct 2024 17:06:02 +0200 Subject: [PATCH] :bug: - fix: fix a bug that caused the UI to horizontally overflow in certain cases --- src/components/dropdown/dropdown.tsx | 41 +++++++++++++++------------- src/components/layout/page/page.scss | 5 ++-- src/components/navbar/navbar.scss | 5 ---- src/components/navbar/navbar.tsx | 26 ++++++++---------- src/components/toolbar/toolbar.scss | 10 +++++++ src/templates/base/base.tsx | 4 +-- 6 files changed, 48 insertions(+), 43 deletions(-) diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index 72b5b8bb..48626675 100644 --- 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 = ({ {label} {isOpen && ( - -
- {isToolbarModuleLoaded(toolbarModuleState) && ( - - {children} - - )} -
-
+ + +
+ {isToolbarModuleLoaded(toolbarModuleState) && ( + + {children} + + )} +
+
+
)} ); diff --git a/src/components/layout/page/page.scss b/src/components/layout/page/page.scss index 9fe203f9..a37ce6a3 100644 --- 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 index 93cb9749..e69de29b 100644 --- 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 index ea2b0375..9b710b78 100644 --- 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 = ({ children, ...props }) => { return ( -
- - {children} - -
+ + {children} + ); }; diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss index 9d5a7d1e..ee9b6ce3 100644 --- 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 index ec7883f0..ca1df876 100644 --- a/src/templates/base/base.tsx +++ b/src/templates/base/base.tsx @@ -87,8 +87,6 @@ export const BaseTemplate: React.FC = ({ const content = ( - {slotPrimaryNavigation || contextNavigation} - {slotSidebar || contextSidebar} {children} @@ -96,6 +94,8 @@ export const BaseTemplate: React.FC = ({ return ( + {slotPrimaryNavigation || contextNavigation} + {slotSidebar || contextSidebar} {container ? {content} : content} );