Merge pull request #6018 from getkirby/fix/6016-scroll-top

Fixes for sticky table headers
getkirby · Nov 30, 2023 · 31ac829 · 31ac829
2 parents ea94126 + cb7d407
commit 31ac829
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/panel/lab/components/blocks/table/index.vue b/panel/lab/components/blocks/table/index.vue
@@ -5,3 +5,9 @@
 		</k-lab-example>
 	</k-lab-examples>
 </template>
+
+<style>
+.k-lab-examples {
+	padding-bottom: 100rem;
+}
+</style>
diff --git a/panel/src/components/Forms/Blocks/Types/Table.vue b/panel/src/components/Forms/Blocks/Types/Table.vue
@@ -65,10 +65,8 @@ export default {
 	border: 1px solid var(--color-gray-300);
 	border-spacing: 0;
 	border-radius: var(--rounded-sm);
-	overflow: hidden;
 }
-.k-block-type-table-preview td,
-.k-block-type-table-preview th {
+.k-block-type-table-preview :where(th, td) {
 	text-align: start;
 	line-height: 1.5em;
 	font-size: var(--text-sm);

diff --git a/panel/src/components/Layout/Header.vue b/panel/src/components/Layout/Header.vue
@@ -92,7 +92,7 @@ export default {
 :root {
 	--header-color-back: var(--color-light);
 	--header-padding-block: var(--spacing-4);
-	--header-sticky-offset: calc(var(--scroll-top, 0rem) + 4rem);
+	--header-sticky-offset: calc(var(--scroll-top) + 4rem);
 }
 
 .k-header {
@@ -161,7 +161,7 @@ export default {
 /** TODO: .k-header:has(.k-header-buttons) */
 .k-header[data-has-buttons="true"] {
 	position: sticky;
-	top: var(--scroll-top, 0);
+	top: var(--scroll-top);
 	z-index: var(--z-toolbar);
 }
 </style>
diff --git a/panel/src/components/View/Panel.vue b/panel/src/components/View/Panel.vue
@@ -60,6 +60,10 @@ export default {};
 </script>
 
 <style>
+:root {
+	--scroll-top: 0rem;
+}
+
 html {
 	overflow-x: hidden;
 	overflow-y: scroll;