From abbd2a271bfbeb09577c5902e5e2ccd72545c9b9 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 8 Aug 2024 16:59:19 +0200
Subject: [PATCH] fix: subnav with scrolling sticky table

---
 src/lib/elements/table/cellCheck.svelte   |  9 +--------
 src/lib/elements/table/tableScroll.svelte |  2 +-
 src/lib/layout/navigation.svelte          |  3 +++
 src/lib/layout/shell.svelte               | 12 ++++++++++++
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/lib/elements/table/cellCheck.svelte b/src/lib/elements/table/cellCheck.svelte
index 79b5c8f37..2482dbfec 100644
--- a/src/lib/elements/table/cellCheck.svelte
+++ b/src/lib/elements/table/cellCheck.svelte
@@ -24,7 +24,7 @@
     };
 </script>
 
-<TableCell class="u-position-relative">
+<TableCell>
     <div
         class="touch-area"
         role="button"
@@ -39,10 +39,3 @@
         {disabled}
         on:click={handleClick} />
 </TableCell>
-
-<style lang="scss">
-    .touch-area {
-        position: absolute;
-        inset: 0;
-    }
-</style>
diff --git a/src/lib/elements/table/tableScroll.svelte b/src/lib/elements/table/tableScroll.svelte
index 40a3fafc1..38a821860 100644
--- a/src/lib/elements/table/tableScroll.svelte
+++ b/src/lib/elements/table/tableScroll.svelte
@@ -7,7 +7,7 @@
     export let transparent = false;
     export let noStyles = false;
     export let dense = false;
-    let classes: string = undefined;
+    let classes: string = '';
     export { classes as class };
 
     let isOverflowing = false;
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 1084d4454..d828768dc 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -46,6 +46,9 @@
         isOpen = false;
         $showSupportModal = true;
     }
+
+    $: window.document.body.dataset.isNarrow = String(narrow);
+    $: window.document.body.dataset.hasSubNavigation = String(hasSubNavigation);
 </script>
 
 <svelte:window on:keydown={handleKeyDown} />
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 1106341b3..7c1856353 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -78,6 +78,18 @@
 </main>
 
 <style lang="scss">
+    :global([data-has-sub-navigation='true']) {
+        &:global([data-is-narrow='false']) {
+            main {
+                --p-side-size: 25rem; // 12.5rem + 12.5rem
+            }
+        }
+        &:global([data-is-narrow='true']) {
+            main {
+                --p-side-size: 17rem; // 12.5rem + 4.5rem
+            }
+        }
+    }
     main {
         min-height: 100vh;