From 75c446b8a9bcc1ee8f997914c62f37f052239117 Mon Sep 17 00:00:00 2001 From: PerIngeVaaje Date: Thu, 5 Mar 2026 13:54:55 +0100 Subject: [PATCH 01/54] First draft new layout table page --- .../NavigationDrawer.module.scss | 29 ++++---- .../pages/TableViewer/TableViewer.module.scss | 68 ++++++++++--------- .../src/app/pages/TableViewer/TableViewer.tsx | 10 ++- 3 files changed, 59 insertions(+), 48 deletions(-) diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss index a9ca749e5..23720cde3 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss +++ b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss @@ -26,7 +26,7 @@ // xsmall, small and medium @media (min-width: fixed.$breakpoints-xsmall-min-width) and (max-width: fixed.$breakpoints-small-max-width) { - height: 100vh; + height: calc(100vh - fixed.$spacing-19); // Handle rtl languages border-start-start-radius: var(--px-border-radius-none); border-start-end-radius: var(--px-border-radius-xlarge); @@ -34,13 +34,13 @@ border-end-start-radius: var(--px-border-radius-none); // Not from Figma - position: absolute; - top: 0; - z-index: 999; + position: sticky; + top: fixed.$spacing-19; + z-index: 10; } @media (min-width: fixed.$breakpoints-medium-min-width) and (max-width: fixed.$breakpoints-medium-max-width) { - height: calc(100vh - 80px); + height: calc(100vh - fixed.$spacing-20); // Handle rtl languages border-start-start-radius: var(--px-border-radius-none); border-start-end-radius: var(--px-border-radius-xlarge); @@ -48,9 +48,9 @@ border-end-start-radius: var(--px-border-radius-none); // Not from Figma - position: absolute; - top: 0; - z-index: 999; + position: sticky; + top: fixed.$spacing-20; + z-index: 10; } // large @@ -59,7 +59,7 @@ padding: fixed.$spacing-8; // Calculate height of main container, minus the header height - height: calc(100vh - fixed.$spacing-22); + height: calc(100vh - fixed.$spacing-20); // Handle rtl languages border-start-start-radius: var(--px-border-radius-xlarge); @@ -68,16 +68,17 @@ border-end-start-radius: var(--px-border-radius-none); // Not from Figma - position: absolute; + position: sticky; + top: fixed.$spacing-20; inset-inline-start: 120px; // Instead of "left" to handle rtl languages - z-index: 999; + z-index: 10; - // Position NavigationDrawer below the header - top: fixed.$spacing-22; + // // Position NavigationDrawer below the header + // top: fixed.$spacing-22; &.skipToMainContentVisible { // Calculate position of NavigationDrawer below the header and SkipToMainContent - top: calc(fixed.$spacing-22 + var(--skip-to-main-content-height)); + top: calc(fixed.$spacing-20 + var(--skip-to-main-content-height)); } } diff --git a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss index 474715997..5e6b85ab9 100644 --- a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss +++ b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss @@ -1,6 +1,12 @@ @use '$ui/style-dictionary/dist/scss/fixed-variables.scss' as fixed; @use '$ui/src/lib/breakpoints.scss' as breakpoints; +.stickyHeader { + position: sticky; + top: 0; + z-index: 20; +} + // Not from Figma .navigationAndContentContainer { display: flex; @@ -9,7 +15,7 @@ // Tablet and mobile sizes @media (breakpoints.$xsmall) or (breakpoints.$small) or (breakpoints.$medium) { flex-direction: column; - overflow-y: auto; + // overflow-y: auto; } } @@ -17,10 +23,8 @@ --skip-to-main-content-height: 48px; display: flex; - background: var(--px-color-surface-subtle); - - // Calculate height of main container, minus the header - height: calc(100vh - fixed.$spacing-20); + // background: var(--px-color-surface-subtle); + height: 100%; // xsmall, small and medium general settings @media (breakpoints.$xsmall) or (breakpoints.$small) or (breakpoints.$medium) { @@ -28,36 +32,36 @@ width: 100%; } - // height calculations - @media (breakpoints.$xsmall) or (breakpoints.$small) { - // Calculate height of main container, minus the header and navigation bar heights - height: calc(100vh - fixed.$spacing-19 - 78px); - - &.skipToMainContentVisible { - // Calculate height of main container, minus the header and navigation bar and SkipToMainContent heights - height: calc( - 100vh - fixed.$spacing-19 - - fixed.$spacing-20 - var(--skip-to-main-content-height) - ); - } - } - @media (breakpoints.$medium) { - // Calculate height of main container, minus the header and navigation bar heights - height: calc(100vh - fixed.$spacing-20 - 78px); - - &.skipToMainContentVisible { - // Calculate height of main container, minus the header and navigation bar and SkipToMainContent heights - height: calc( - 100vh - fixed.$spacing-20 - - fixed.$spacing-20 - var(--skip-to-main-content-height) - ); - } - } + // // height calculations + // @media (breakpoints.$xsmall) or (breakpoints.$small) { + // // Calculate height of main container, minus the header and navigation bar heights + // height: calc(100vh - fixed.$spacing-19 - 78px); + + // &.skipToMainContentVisible { + // // Calculate height of main container, minus the header and navigation bar and SkipToMainContent heights + // height: calc( + // 100vh - fixed.$spacing-19 - + // fixed.$spacing-20 - var(--skip-to-main-content-height) + // ); + // } + // } + // @media (breakpoints.$medium) { + // // Calculate height of main container, minus the header and navigation bar heights + // height: calc(100vh - fixed.$spacing-20 - 78px); + + // &.skipToMainContentVisible { + // // Calculate height of main container, minus the header and navigation bar and SkipToMainContent heights + // height: calc( + // 100vh - fixed.$spacing-20 - + // fixed.$spacing-20 - var(--skip-to-main-content-height) + // ); + // } + // } // large, xlarge and xxlarge @media (breakpoints.$large) or (breakpoints.$xlarge) or (breakpoints.$xxlarge) { width: calc(100% - 120px); - justify-content: center; + justify-content: start; align-items: flex-start; flex-shrink: 0; @@ -95,7 +99,7 @@ // large, xlarge and xxlarge @media (breakpoints.$large) or (breakpoints.$xlarge) or (breakpoints.$xxlarge) { padding-bottom: fixed.$spacing-8; - overflow-y: auto; + // overflow-y: auto; gap: fixed.$spacing-8; } diff --git a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx index 9be60f944..344d3463d 100644 --- a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx +++ b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx @@ -177,7 +177,11 @@ export function TableViewer() { return ( <> - {!isSmallScreen &&
} + {!isSmallScreen && ( +
+
+
+ )} {/* tabindex={-1} to fix firefox focusing this div*/}
{isSmallScreen ? ( <> -
+
+
+
Date: Thu, 5 Mar 2026 14:11:04 +0100 Subject: [PATCH 02/54] Sticky also for xlarge and xxlarge --- .../NavigationDrawer/NavigationDrawer.module.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss index 23720cde3..473d63f3a 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss +++ b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss @@ -87,6 +87,18 @@ width: 396px; padding: 0px fixed.$spacing-8 fixed.$spacing-8 0px; border-radius: var(--px-border-radius-none); + + // Calculate height of main container, minus the header height + height: calc(100vh - fixed.$spacing-20); + + position: sticky; + top: fixed.$spacing-20; + z-index: 10; + + &.skipToMainContentVisible { + // Calculate position of NavigationDrawer below the header and SkipToMainContent + top: calc(fixed.$spacing-20 + var(--skip-to-main-content-height)); + } } } From 64bf8ecc41680637c021ed20e269b1b9c5fb23d0 Mon Sep 17 00:00:00 2001 From: PerIngeVaaje Date: Thu, 5 Mar 2026 16:00:14 +0100 Subject: [PATCH 03/54] Try to fix z-index problem --- .../NavigationDrawer.module.scss | 21 ++++++++++--------- .../NavigationBar/NavigationBar.module.scss | 2 +- .../NavigationRail/NavigationRail.module.scss | 5 +++++ 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss index 473d63f3a..a6478c1d9 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss +++ b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss @@ -10,11 +10,12 @@ background: var(--px-color-background-subtle); overflow-y: auto; - @media (min-width: fixed.$breakpoints-xsmall-min-width) and (max-width: fixed.$breakpoints-xsmall-max-width) { - width: calc(100vw - 40px); - max-width: 396px; - padding: fixed.$spacing-4; - } + // @media (min-width: fixed.$breakpoints-xsmall-min-width) and (max-width: fixed.$breakpoints-xsmall-max-width) { + // width: calc(100vw - 40px); + // max-width: 396px; + // padding: fixed.$spacing-4; + // z-index: 70; + // } @media ((min-width: fixed.$breakpoints-small-min-width) and (max-width: fixed.$breakpoints-medium-max-width)) { width: 428px; @@ -36,7 +37,7 @@ // Not from Figma position: sticky; top: fixed.$spacing-19; - z-index: 10; + z-index: 70; } @media (min-width: fixed.$breakpoints-medium-min-width) and (max-width: fixed.$breakpoints-medium-max-width) { @@ -50,7 +51,7 @@ // Not from Figma position: sticky; top: fixed.$spacing-20; - z-index: 10; + z-index: 60; } // large @@ -71,7 +72,7 @@ position: sticky; top: fixed.$spacing-20; inset-inline-start: 120px; // Instead of "left" to handle rtl languages - z-index: 10; + z-index: 60; // // Position NavigationDrawer below the header // top: fixed.$spacing-22; @@ -93,7 +94,7 @@ position: sticky; top: fixed.$spacing-20; - z-index: 10; + z-index: 60; &.skipToMainContentVisible { // Calculate position of NavigationDrawer below the header and SkipToMainContent @@ -171,7 +172,7 @@ width: 100%; height: 100%; background-color: var(--px-color-surface-scrim); - z-index: 999; + z-index: 50; } } diff --git a/packages/pxweb2/src/app/components/NavigationMenu/NavigationBar/NavigationBar.module.scss b/packages/pxweb2/src/app/components/NavigationMenu/NavigationBar/NavigationBar.module.scss index c2d0d6d9b..b7ba13a15 100644 --- a/packages/pxweb2/src/app/components/NavigationMenu/NavigationBar/NavigationBar.module.scss +++ b/packages/pxweb2/src/app/components/NavigationMenu/NavigationBar/NavigationBar.module.scss @@ -15,7 +15,7 @@ // fix the navigation bar to the bottom of the screen position: fixed; bottom: 0; - z-index: 2; // 2 to fix gradient issue with table + z-index: 40; // 2 to fix gradient issue with table border-top: 1px solid var(--px-color-border-subtle); // xsmall, small and medium diff --git a/packages/pxweb2/src/app/components/NavigationMenu/NavigationRail/NavigationRail.module.scss b/packages/pxweb2/src/app/components/NavigationMenu/NavigationRail/NavigationRail.module.scss index 649b3d175..6d58983b3 100644 --- a/packages/pxweb2/src/app/components/NavigationMenu/NavigationRail/NavigationRail.module.scss +++ b/packages/pxweb2/src/app/components/NavigationMenu/NavigationRail/NavigationRail.module.scss @@ -20,6 +20,11 @@ // large, xlarge and xxlarge @media ((min-width: fixed.$breakpoints-large-min-width) and (max-width: fixed.$breakpoints-xlarge-max-width)) or ((min-width: fixed.$breakpoints-xxlarge-min-width)) { display: flex; + position: sticky; + top: fixed.$spacing-20; + height: calc(100vh - fixed.$spacing-20); + z-index: 10; + align-self: flex-start; } &:focus-visible { From ba6b413036e7a7cac53fb5f7fd5a16517afb4bdf Mon Sep 17 00:00:00 2001 From: MikaelNordberg Date: Fri, 6 Mar 2026 10:15:40 +0100 Subject: [PATCH 04/54] refactor: New wrapper in TableViewer for handling centered main content. Fixes in NavigationDrawer layout for smaller devices. --- .../NavigationDrawer.module.scss | 19 ++++++-------- .../pages/TableViewer/TableViewer.module.scss | 8 ++++++ .../src/app/pages/TableViewer/TableViewer.tsx | 26 +++++++++++-------- 3 files changed, 31 insertions(+), 22 deletions(-) diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss index a6478c1d9..612820879 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss +++ b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss @@ -10,12 +10,11 @@ background: var(--px-color-background-subtle); overflow-y: auto; - // @media (min-width: fixed.$breakpoints-xsmall-min-width) and (max-width: fixed.$breakpoints-xsmall-max-width) { - // width: calc(100vw - 40px); - // max-width: 396px; - // padding: fixed.$spacing-4; - // z-index: 70; - // } + @media (min-width: fixed.$breakpoints-xsmall-min-width) and (max-width: fixed.$breakpoints-xsmall-max-width) { + width: calc(100vw - 40px); + max-width: 396px; + padding: fixed.$spacing-4; + } @media ((min-width: fixed.$breakpoints-small-min-width) and (max-width: fixed.$breakpoints-medium-max-width)) { width: 428px; @@ -27,16 +26,15 @@ // xsmall, small and medium @media (min-width: fixed.$breakpoints-xsmall-min-width) and (max-width: fixed.$breakpoints-small-max-width) { - height: calc(100vh - fixed.$spacing-19); + height: 100vh; // Handle rtl languages border-start-start-radius: var(--px-border-radius-none); border-start-end-radius: var(--px-border-radius-xlarge); border-end-end-radius: var(--px-border-radius-xlarge); border-end-start-radius: var(--px-border-radius-none); - // Not from Figma - position: sticky; - top: fixed.$spacing-19; + position: fixed; + top: 0; z-index: 70; } @@ -47,7 +45,6 @@ border-start-end-radius: var(--px-border-radius-xlarge); border-end-end-radius: var(--px-border-radius-xlarge); border-end-start-radius: var(--px-border-radius-none); - // Not from Figma position: sticky; top: fixed.$spacing-20; diff --git a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss index 5e6b85ab9..dadaeaf03 100644 --- a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss +++ b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss @@ -75,6 +75,14 @@ } } +.contentAndFooterContainerWrapper { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + height: 100%; +} + .contentAndFooterContainer { // Not from Figma display: flex; diff --git a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx index 344d3463d..415c7a896 100644 --- a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx +++ b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx @@ -219,18 +219,22 @@ export function TableViewer() { hideMenuRef={hideMenuRef} />
- -
+
+ +
+
From a72116b15d8c446a91a8eb430280ee3c43a89ae3 Mon Sep 17 00:00:00 2001 From: MikaelNordberg Date: Fri, 6 Mar 2026 10:16:25 +0100 Subject: [PATCH 05/54] Prettier code --- packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx index 415c7a896..a07e8c6ab 100644 --- a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx +++ b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx @@ -218,9 +218,7 @@ export function TableViewer() { openedWithKeyboard={openedWithKeyboard} hideMenuRef={hideMenuRef} /> -
+
Date: Fri, 6 Mar 2026 13:26:52 +0100 Subject: [PATCH 06/54] fix: Adjust NavigationDrawer layout on medium devices --- .../components/NavigationDrawer/NavigationDrawer.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss index 612820879..cb20785a5 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss +++ b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss @@ -39,14 +39,14 @@ } @media (min-width: fixed.$breakpoints-medium-min-width) and (max-width: fixed.$breakpoints-medium-max-width) { - height: calc(100vh - fixed.$spacing-20); + height: calc(100vh - fixed.$spacing-20 - 80px); // 80px is the height of SkipToMainContent, needs to be subtracted from the height of NavigationDrawer when it is visible // Handle rtl languages border-start-start-radius: var(--px-border-radius-none); border-start-end-radius: var(--px-border-radius-xlarge); border-end-end-radius: var(--px-border-radius-xlarge); border-end-start-radius: var(--px-border-radius-none); // Not from Figma - position: sticky; + position: fixed; top: fixed.$spacing-20; z-index: 60; } From dea6a6ac2e029d7bd08917fd2520df8dfadd63d4 Mon Sep 17 00:00:00 2001 From: MikaelNordberg Date: Fri, 6 Mar 2026 13:29:04 +0100 Subject: [PATCH 07/54] Changed comment --- .../components/NavigationDrawer/NavigationDrawer.module.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss index cb20785a5..7deec6520 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss +++ b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss @@ -39,7 +39,9 @@ } @media (min-width: fixed.$breakpoints-medium-min-width) and (max-width: fixed.$breakpoints-medium-max-width) { - height: calc(100vh - fixed.$spacing-20 - 80px); // 80px is the height of SkipToMainContent, needs to be subtracted from the height of NavigationDrawer when it is visible + height: calc( + 100vh - fixed.$spacing-20 - 80px + ); // 80px is the height of NavigationBar, needs to be subtracted from the height of NavigationDrawer when it is visible // Handle rtl languages border-start-start-radius: var(--px-border-radius-none); border-start-end-radius: var(--px-border-radius-xlarge); From bd93aea52d1be562cec39011e2ad163c717c26d3 Mon Sep 17 00:00:00 2001 From: MikaelNordberg Date: Fri, 6 Mar 2026 14:04:04 +0100 Subject: [PATCH 08/54] Removed padding-top in main container to stabalize navigation drawer --- .../pxweb2/src/app/pages/TableViewer/TableViewer.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss index dadaeaf03..e65586d0a 100644 --- a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss +++ b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss @@ -71,7 +71,7 @@ border-end-end-radius: var(--px-border-radius-none); border-end-start-radius: var(--px-border-radius-none); - padding: fixed.$spacing-8 fixed.$spacing-8 0px fixed.$spacing-8; + padding: 0px fixed.$spacing-8 0px fixed.$spacing-8; } } From 87b6ac06134b6f94104d06cfb4d75db5e201e32d Mon Sep 17 00:00:00 2001 From: MikaelNordberg Date: Mon, 9 Mar 2026 13:15:07 +0100 Subject: [PATCH 09/54] refactor: Simplify padding in NavigationDrawer and update Header component in TableViewer --- .../NavigationDrawer.module.scss | 26 +++++++++---------- .../pages/TableViewer/TableViewer.module.scss | 3 ++- .../src/app/pages/TableViewer/TableViewer.tsx | 3 ++- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss index 7deec6520..ac0ba9fd5 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss +++ b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss @@ -18,10 +18,7 @@ @media ((min-width: fixed.$breakpoints-small-min-width) and (max-width: fixed.$breakpoints-medium-max-width)) { width: 428px; - padding-left: fixed.$spacing-8; - padding-right: fixed.$spacing-8; - padding-top: fixed.$spacing-6; - padding-bottom: fixed.$spacing-6; + padding: fixed.$spacing-6 fixed.$spacing-8; } // xsmall, small and medium @@ -56,14 +53,16 @@ // large @media (min-width: fixed.$breakpoints-large-min-width) and (max-width: fixed.$breakpoints-large-max-width) { width: 428px; - padding: fixed.$spacing-8; + padding-inline-start: fixed.$spacing-8; + padding-inline-end: fixed.$spacing-8; + padding-top: fixed.$spacing-2; + padding-bottom: fixed.$spacing-8; + border-top: fixed.$spacing-2 solid var(--px-color-background-subtle); // Calculate height of main container, minus the header height height: calc(100vh - fixed.$spacing-20); // Handle rtl languages - border-start-start-radius: var(--px-border-radius-xlarge); - border-start-end-radius: var(--px-border-radius-xlarge); border-end-end-radius: var(--px-border-radius-xlarge); border-end-start-radius: var(--px-border-radius-none); @@ -73,9 +72,6 @@ inset-inline-start: 120px; // Instead of "left" to handle rtl languages z-index: 60; - // // Position NavigationDrawer below the header - // top: fixed.$spacing-22; - &.skipToMainContentVisible { // Calculate position of NavigationDrawer below the header and SkipToMainContent top: calc(fixed.$spacing-20 + var(--skip-to-main-content-height)); @@ -84,13 +80,15 @@ // xlarge and xxlarge @media ((min-width: fixed.$breakpoints-xlarge-min-width) and (max-width: fixed.$breakpoints-xlarge-max-width)) or ((min-width: fixed.$breakpoints-xxlarge-min-width)) { - width: 396px; - padding: 0px fixed.$spacing-8 fixed.$spacing-8 0px; - border-radius: var(--px-border-radius-none); + width: 428px; + padding-inline-start: fixed.$spacing-8; + padding-inline-end: fixed.$spacing-8; + padding-top: fixed.$spacing-2; + padding-bottom: fixed.$spacing-8; + border-top: fixed.$spacing-2 solid var(--px-color-background-subtle); // Calculate height of main container, minus the header height height: calc(100vh - fixed.$spacing-20); - position: sticky; top: fixed.$spacing-20; z-index: 60; diff --git a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss index e65586d0a..f80aeff64 100644 --- a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss +++ b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.module.scss @@ -71,7 +71,8 @@ border-end-end-radius: var(--px-border-radius-none); border-end-start-radius: var(--px-border-radius-none); - padding: 0px fixed.$spacing-8 0px fixed.$spacing-8; + // padding: 0px fixed.$spacing-8 0px fixed.$spacing-8; + padding-right: fixed.$spacing-8; } } diff --git a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx index a07e8c6ab..3a4b0fc12 100644 --- a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx +++ b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx @@ -179,7 +179,7 @@ export function TableViewer() { {!isSmallScreen && (
-
+
)} {/* tabindex={-1} to fix firefox focusing this div*/} @@ -232,6 +232,7 @@ export function TableViewer() { setIsExpanded={setIsExpanded} >
+ {/*
*/}
From 44777513c434eadd096ff6f7ec8fc152e894d094 Mon Sep 17 00:00:00 2001 From: MikaelNordberg Date: Mon, 9 Mar 2026 13:15:52 +0100 Subject: [PATCH 10/54] Prettier code --- .../components/NavigationDrawer/NavigationDrawer.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss index ac0ba9fd5..de2128322 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss +++ b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss @@ -18,7 +18,7 @@ @media ((min-width: fixed.$breakpoints-small-min-width) and (max-width: fixed.$breakpoints-medium-max-width)) { width: 428px; - padding: fixed.$spacing-6 fixed.$spacing-8; + padding: fixed.$spacing-6 fixed.$spacing-8; } // xsmall, small and medium From a41218a41329cbb98d37e436f0118ab127fd33f9 Mon Sep 17 00:00:00 2001 From: PerIngeVaaje Date: Mon, 9 Mar 2026 15:47:30 +0100 Subject: [PATCH 11/54] Remove page scrollbar when side sheet is open --- .../app/components/ContentTop/ContentTop.tsx | 5 ++++- .../pxweb2/src/app/context/AppProvider.tsx | 19 +++++++++++++++++++ packages/pxweb2/src/styles.scss | 4 ++++ 3 files changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx b/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx index 365675c91..0ab0e8cdd 100644 --- a/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx +++ b/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx @@ -115,7 +115,8 @@ export function ContentTop({ const { pxTableMetadata, selectedVBValues } = useVariables(); const selectedMetadata = useTableData().data?.metadata; const buildTableTitle = useTableData().buildTableTitle; - const { setTitle, isXXLargeDesktop, isTablet } = useApp(); + const { setTitle, isXXLargeDesktop, isTablet, setHidePageScrollbar } = + useApp(); const openInformationButtonRef = useRef(null); const openInformationLinkRef = useRef(null); @@ -128,6 +129,7 @@ export function ContentTop({ setActiveTab(selectedTab); } setIsTableInformationOpen(true); + setHidePageScrollbar(true); }; const noteInfo = @@ -279,6 +281,7 @@ export function ContentTop({ selectedTab={activeTab} onClose={() => { setIsTableInformationOpen(false); + setHidePageScrollbar(false); }} > )} diff --git a/packages/pxweb2/src/app/context/AppProvider.tsx b/packages/pxweb2/src/app/context/AppProvider.tsx index 9b15dacc5..4839b1c9e 100644 --- a/packages/pxweb2/src/app/context/AppProvider.tsx +++ b/packages/pxweb2/src/app/context/AppProvider.tsx @@ -19,6 +19,8 @@ export type AppContextType = { setSkipToMainFocused: (focused: boolean) => void; title: string; setTitle: (title: string) => void; + hidePageScrollbar: boolean; + setHidePageScrollbar: (hide: boolean) => void; }; // Create the context with default values @@ -37,6 +39,10 @@ export const AppContext = createContext({ setTitle: () => { return; }, + hidePageScrollbar: false, + setHidePageScrollbar: () => { + return; + }, }); // Provider component @@ -46,6 +52,7 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ const [isInitialized] = useState(true); const [skipToMainFocused, setSkipToMainFocused] = useState(false); const [title, setTitle] = useState(''); + const [hidePageScrollbar, setHidePageScrollbar] = useState(false); /** * Keep state if window screen size is mobile, pad or desktop. @@ -67,6 +74,14 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ window.innerWidth <= mobileBreakpoint, ); + useEffect(() => { + document.body.classList.toggle('hide-scrollbar', hidePageScrollbar); + + return () => { + document.body.classList.remove('hide-scrollbar'); + }; + }, [hidePageScrollbar]); + // Use effect to set the isMobile and isTablet state useEffect(() => { const handleResize = () => { @@ -106,6 +121,8 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ setSkipToMainFocused, title, setTitle, + hidePageScrollbar, + setHidePageScrollbar, }), [ getSavedQueryId, @@ -118,6 +135,8 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ setSkipToMainFocused, title, setTitle, + hidePageScrollbar, + setHidePageScrollbar, ], ); diff --git a/packages/pxweb2/src/styles.scss b/packages/pxweb2/src/styles.scss index 20e366ff9..25ff1bfb0 100644 --- a/packages/pxweb2/src/styles.scss +++ b/packages/pxweb2/src/styles.scss @@ -7,6 +7,10 @@ body { } } +body.hide-scrollbar { + overflow-y: hidden; +} + @font-face { font-family: 'PxWeb-font'; src: url('/fonts/PxWeb-font-400.ttf') format('truetype'); From e2fa85ef6ff0c5dcdecca7eb494d1847a0f1d9a2 Mon Sep 17 00:00:00 2001 From: Sjur Sutterud Sagen Date: Tue, 10 Mar 2026 12:49:02 +0100 Subject: [PATCH 12/54] feat: Enhance scrollbar management with new context properties for selection and table information --- .../components/ContentTop/ContentTop.spec.tsx | 4 ++ .../app/components/ContentTop/ContentTop.tsx | 19 +++++-- .../Errors/NotFound/NotFound.spec.tsx | 1 + .../app/components/Selection/Selection.tsx | 27 ++++++++- .../pxweb2/src/app/context/AppProvider.tsx | 56 ++++++++++++++++--- 5 files changed, 95 insertions(+), 12 deletions(-) diff --git a/packages/pxweb2/src/app/components/ContentTop/ContentTop.spec.tsx b/packages/pxweb2/src/app/components/ContentTop/ContentTop.spec.tsx index 2f26088fe..31723c688 100644 --- a/packages/pxweb2/src/app/components/ContentTop/ContentTop.spec.tsx +++ b/packages/pxweb2/src/app/components/ContentTop/ContentTop.spec.tsx @@ -321,9 +321,13 @@ let mockIsXXLargeDesktop = true; vi.mock('../../context/useApp', () => ({ default: () => ({ isXXLargeDesktop: mockIsXXLargeDesktop, + isTablet: false, setTitle: () => { vi.fn(); }, + setTableInformationWantsToHidePageScrollbar: () => { + vi.fn(); + }, }), })); diff --git a/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx b/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx index 0ab0e8cdd..d98e49002 100644 --- a/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx +++ b/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx @@ -115,8 +115,12 @@ export function ContentTop({ const { pxTableMetadata, selectedVBValues } = useVariables(); const selectedMetadata = useTableData().data?.metadata; const buildTableTitle = useTableData().buildTableTitle; - const { setTitle, isXXLargeDesktop, isTablet, setHidePageScrollbar } = - useApp(); + const { + setTitle, + isXXLargeDesktop, + isTablet, + setTableInformationWantsToHidePageScrollbar, + } = useApp(); const openInformationButtonRef = useRef(null); const openInformationLinkRef = useRef(null); @@ -129,7 +133,7 @@ export function ContentTop({ setActiveTab(selectedTab); } setIsTableInformationOpen(true); - setHidePageScrollbar(true); + setTableInformationWantsToHidePageScrollbar(true); }; const noteInfo = @@ -168,6 +172,13 @@ export function ContentTop({ }); }, [isTableInformationOpen, tableInformationOpener, accessibility]); + // Release table info lock on unmount. + useEffect(() => { + return () => { + setTableInformationWantsToHidePageScrollbar(false); + }; + }, [setTableInformationWantsToHidePageScrollbar]); + let tableTitle = ''; if (selectedMetadata) { const titleBy = t('presentation_page.common.table_title_by'); @@ -281,7 +292,7 @@ export function ContentTop({ selectedTab={activeTab} onClose={() => { setIsTableInformationOpen(false); - setHidePageScrollbar(false); + setTableInformationWantsToHidePageScrollbar(false); }} > )} diff --git a/packages/pxweb2/src/app/components/Errors/NotFound/NotFound.spec.tsx b/packages/pxweb2/src/app/components/Errors/NotFound/NotFound.spec.tsx index 3385a8abd..033730c02 100644 --- a/packages/pxweb2/src/app/components/Errors/NotFound/NotFound.spec.tsx +++ b/packages/pxweb2/src/app/components/Errors/NotFound/NotFound.spec.tsx @@ -41,6 +41,7 @@ vi.mock('@pxweb2/pxweb2-ui', () => ({ ), BreakpointsXsmallMaxWidth: '575px', + BreakpointsSmallMaxWidth: '600px', BreakpointsMediumMaxWidth: '767px', BreakpointsLargeMaxWidth: '991px', BreakpointsXlargeMaxWidth: '1199px', diff --git a/packages/pxweb2/src/app/components/Selection/Selection.tsx b/packages/pxweb2/src/app/components/Selection/Selection.tsx index 77a1b3183..1cd433d61 100644 --- a/packages/pxweb2/src/app/components/Selection/Selection.tsx +++ b/packages/pxweb2/src/app/components/Selection/Selection.tsx @@ -235,7 +235,12 @@ export function Selection({ }: SelectionProps) { const variables = useVariables(); const app = useApp(); - const { isTablet } = useApp(); + const { + isTablet, + isSmallTablet, + isMobile, + setSelectionWantsToHidePageScrollbar, + } = useApp(); const { selectedVBValues, setSelectedVBValues, @@ -590,6 +595,26 @@ export function Selection({ /> ); + useEffect(() => { + if (selectedNavigationView !== 'none' && (isSmallTablet || isMobile)) { + setSelectionWantsToHidePageScrollbar(true); + } else { + setSelectionWantsToHidePageScrollbar(false); + } + }, [ + selectedNavigationView, + isSmallTablet, + isMobile, + setSelectionWantsToHidePageScrollbar, + ]); + + // Release selection lock on unmount. + useEffect(() => { + return () => { + setSelectionWantsToHidePageScrollbar(false); + }; + }, [setSelectionWantsToHidePageScrollbar]); + return ( selectedNavigationView !== 'none' && ( void; title: string; setTitle: (title: string) => void; hidePageScrollbar: boolean; - setHidePageScrollbar: (hide: boolean) => void; + selectionWantsToHidePageScrollbar: boolean; + setSelectionWantsToHidePageScrollbar: (hide: boolean) => void; + tableInformationWantsToHidePageScrollbar: boolean; + setTableInformationWantsToHidePageScrollbar: (hide: boolean) => void; }; // Create the context with default values @@ -30,6 +35,7 @@ export const AppContext = createContext({ isXLargeDesktop: false, isXXLargeDesktop: false, isTablet: false, + isSmallTablet: false, isMobile: false, skipToMainFocused: false, setSkipToMainFocused: () => { @@ -40,7 +46,12 @@ export const AppContext = createContext({ return; }, hidePageScrollbar: false, - setHidePageScrollbar: () => { + selectionWantsToHidePageScrollbar: false, + setSelectionWantsToHidePageScrollbar: () => { + return; + }, + tableInformationWantsToHidePageScrollbar: false, + setTableInformationWantsToHidePageScrollbar: () => { return; }, }); @@ -52,14 +63,27 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ const [isInitialized] = useState(true); const [skipToMainFocused, setSkipToMainFocused] = useState(false); const [title, setTitle] = useState(''); - const [hidePageScrollbar, setHidePageScrollbar] = useState(false); + const [ + selectionWantsToHidePageScrollbar, + setSelectionWantsToHidePageScrollbar, + ] = useState(false); + const [ + tableInformationWantsToHidePageScrollbar, + setTableInformationWantsToHidePageScrollbar, + ] = useState(false); + const hidePageScrollbar = + selectionWantsToHidePageScrollbar || + tableInformationWantsToHidePageScrollbar; /** - * Keep state if window screen size is mobile, pad or desktop. + * Keep state if window screen size is mobile, small tablet, tablet, or desktop. */ const largeBreakpoint = Number(BreakpointsLargeMaxWidth.replace('px', '')); const xLargeBreakpoint = Number(BreakpointsXlargeMaxWidth.replace('px', '')); const tabletBreakpoint = Number(BreakpointsMediumMaxWidth.replace('px', '')); + const smallTabletBreakpoint = Number( + BreakpointsSmallMaxWidth.replace('px', ''), + ); const mobileBreakpoint = Number(BreakpointsXsmallMaxWidth.replace('px', '')); const [isXLargeDesktop, setIsXLargeDesktop] = useState( window.innerWidth > largeBreakpoint, @@ -70,6 +94,9 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ const [isTablet, setIsTablet] = useState( window.innerWidth <= tabletBreakpoint, ); + const [isSmallTablet, setIsSmallTablet] = useState( + window.innerWidth <= smallTabletBreakpoint, + ); const [isMobile, setIsMobile] = useState( window.innerWidth <= mobileBreakpoint, ); @@ -88,6 +115,7 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ setIsXLargeDesktop(window.innerWidth > largeBreakpoint); setIsXXLargeDesktop(window.innerWidth > xLargeBreakpoint); setIsTablet(window.innerWidth <= tabletBreakpoint); + setIsSmallTablet(window.innerWidth <= smallTabletBreakpoint); setIsMobile(window.innerWidth <= mobileBreakpoint); }; @@ -96,7 +124,13 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ return () => { window.removeEventListener('resize', handleResize); }; - }, [mobileBreakpoint, tabletBreakpoint, largeBreakpoint, xLargeBreakpoint]); + }, [ + mobileBreakpoint, + tabletBreakpoint, + smallTabletBreakpoint, + largeBreakpoint, + xLargeBreakpoint, + ]); const getSavedQueryId = React.useCallback(() => { let savedQueryId: string = ''; @@ -116,13 +150,17 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ isXLargeDesktop, isXXLargeDesktop, isTablet, + isSmallTablet, isMobile, skipToMainFocused, setSkipToMainFocused, title, setTitle, hidePageScrollbar, - setHidePageScrollbar, + selectionWantsToHidePageScrollbar, + setSelectionWantsToHidePageScrollbar, + tableInformationWantsToHidePageScrollbar, + setTableInformationWantsToHidePageScrollbar, }), [ getSavedQueryId, @@ -130,13 +168,17 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ isXLargeDesktop, isXXLargeDesktop, isTablet, + isSmallTablet, isMobile, skipToMainFocused, setSkipToMainFocused, title, setTitle, hidePageScrollbar, - setHidePageScrollbar, + selectionWantsToHidePageScrollbar, + setSelectionWantsToHidePageScrollbar, + tableInformationWantsToHidePageScrollbar, + setTableInformationWantsToHidePageScrollbar, ], ); From 7d9f42d04bc6cc6ec910cbb6275cf68c738a4158 Mon Sep 17 00:00:00 2001 From: Sjur Sutterud Sagen Date: Tue, 10 Mar 2026 13:34:30 +0100 Subject: [PATCH 13/54] refactor: Adjust dimensions and background color in Navigation components for improved layout --- .../components/NavigationDrawer/NavigationDrawer.module.scss | 2 +- .../NavigationMenu/NavigationBar/NavigationBar.module.scss | 2 +- .../NavigationMenu/NavigationRail/NavigationRail.module.scss | 5 +++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss index de2128322..f88528a71 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss +++ b/packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss @@ -69,7 +69,7 @@ // Not from Figma position: sticky; top: fixed.$spacing-20; - inset-inline-start: 120px; // Instead of "left" to handle rtl languages + inset-inline-start: 100px; // Instead of "left" to handle rtl languages z-index: 60; &.skipToMainContentVisible { diff --git a/packages/pxweb2/src/app/components/NavigationMenu/NavigationBar/NavigationBar.module.scss b/packages/pxweb2/src/app/components/NavigationMenu/NavigationBar/NavigationBar.module.scss index b7ba13a15..bb58d5e18 100644 --- a/packages/pxweb2/src/app/components/NavigationMenu/NavigationBar/NavigationBar.module.scss +++ b/packages/pxweb2/src/app/components/NavigationMenu/NavigationBar/NavigationBar.module.scss @@ -10,7 +10,7 @@ align-items: center; gap: fixed.$spacing-2; flex-shrink: 0; - background-color: var(--px-color-surface-subtle); + background-color: var(--px-color-surface-default); // fix the navigation bar to the bottom of the screen position: fixed; diff --git a/packages/pxweb2/src/app/components/NavigationMenu/NavigationRail/NavigationRail.module.scss b/packages/pxweb2/src/app/components/NavigationMenu/NavigationRail/NavigationRail.module.scss index 6d58983b3..d43e2482d 100644 --- a/packages/pxweb2/src/app/components/NavigationMenu/NavigationRail/NavigationRail.module.scss +++ b/packages/pxweb2/src/app/components/NavigationMenu/NavigationRail/NavigationRail.module.scss @@ -8,13 +8,14 @@ } .navigationRail { - width: 120px; + width: 100px; height: 100%; - padding: fixed.$spacing-8 0px fixed.$spacing-14 0px; + padding: fixed.$spacing-6 0px fixed.$spacing-14 0px; flex-direction: column; align-items: center; flex-shrink: 0; background: var(--px-color-surface-default); + border-inline-end: 1px solid var(--px-color-border-subtle); gap: 24px; // large, xlarge and xxlarge From 368bc435b9dfc070285c8363f4bcb694e7923de1 Mon Sep 17 00:00:00 2001 From: Sjur Sutterud Sagen Date: Tue, 10 Mar 2026 13:39:45 +0100 Subject: [PATCH 14/54] Use simpler scrollToTop in footer on tableview --- packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx index 3a4b0fc12..c01141324 100644 --- a/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx +++ b/packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx @@ -231,8 +231,8 @@ export function TableViewer() { isExpanded={isExpanded} setIsExpanded={setIsExpanded} > -