From 390563be64c91b3eb1f40f58ec27f4594891695b Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 12 Feb 2025 16:29:44 +0100
Subject: [PATCH] fix dialog and dtl-panel height issues

---
 src/assets/css/src/2.blocks.design-to-light.css | 2 +-
 src/assets/css/src/2.blocks.dialog.css          | 7 +++++--
 src/assets/css/src/2.blocks.track.css           | 5 +++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/src/2.blocks.design-to-light.css b/src/assets/css/src/2.blocks.design-to-light.css
index cca61a4..4508773 100644
--- a/src/assets/css/src/2.blocks.design-to-light.css
+++ b/src/assets/css/src/2.blocks.design-to-light.css
@@ -151,7 +151,7 @@
   overflow: hidden;
 }
 #dtl-panel.with-dialog {
-  max-height: min(100vh - var(--gutter) * 2 - 5.5rem, 50rem);
+  max-height: min(100vh - var(--gutter) * 2, 50rem);
   max-width: 25rem;
   top: 0;
   bottom: 0;
diff --git a/src/assets/css/src/2.blocks.dialog.css b/src/assets/css/src/2.blocks.dialog.css
index 4dd5dcc..bc105b4 100644
--- a/src/assets/css/src/2.blocks.dialog.css
+++ b/src/assets/css/src/2.blocks.dialog.css
@@ -2,7 +2,7 @@
 
 .dialog {
   --dialog-max-w: min(100vw - var(--gutter) * 2, 77rem);
-  --dialog-max-h: min(100vh - var(--gutter) * 2 - 5.5rem, 50rem);
+  --dialog-max-h: min(100vh - var(--gutter) * 2, 50rem);
   --dialog-header-h: 4.5rem;
   --dialog-footer-h: 4.5rem;
   --dialog-comments-w: 22.5rem;
@@ -76,15 +76,18 @@
 .dialog__inner {
   background: var(--dialog-inner-background, #f7f7f7);
   height: 100%;
+  overflow-y: auto;
 }
 .dialog__inner .tracks-header {
   background: var(--color-white-50);
   border-radius: var(--rounded-xl);
   padding: var(--space-8);
   border: var(--border-width) solid var(--color-grey-200);
-  position: relative;
   flex-wrap: nowrap;
   gap: var(--space-8);
+  position: sticky;
+  top: 0;
+  z-index: 1;
 }
 .dialog__inner .tracks {
   display: flex;
diff --git a/src/assets/css/src/2.blocks.track.css b/src/assets/css/src/2.blocks.track.css
index 838c166..6ccc703 100644
--- a/src/assets/css/src/2.blocks.track.css
+++ b/src/assets/css/src/2.blocks.track.css
@@ -3,13 +3,14 @@
 /* Container */
 .track {
   --w: 100%;
-  --h: calc(100% - 74px);
+  --h: calc(100% - 4.666rem);
   --x-steps: 14;
   --y-steps: 5;
   width: var(--w);
   height: var(--h);
+  min-height: 25rem;
   position: relative;
-  margin: var(--space-16) auto;
+  margin-top: var(--space-16);
   border-radius: var(--rounded-lg);
   display: flex;
   gap: var(--gap);