fix dialog and dtl-panel height issues

This commit is contained in:
Timothée Goguely 2025-02-12 16:29:44 +01:00
parent bb2adabdeb
commit 390563be64
3 changed files with 9 additions and 5 deletions

View file

@ -151,7 +151,7 @@
overflow: hidden; overflow: hidden;
} }
#dtl-panel.with-dialog { #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; max-width: 25rem;
top: 0; top: 0;
bottom: 0; bottom: 0;

View file

@ -2,7 +2,7 @@
.dialog { .dialog {
--dialog-max-w: min(100vw - var(--gutter) * 2, 77rem); --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-header-h: 4.5rem;
--dialog-footer-h: 4.5rem; --dialog-footer-h: 4.5rem;
--dialog-comments-w: 22.5rem; --dialog-comments-w: 22.5rem;
@ -76,15 +76,18 @@
.dialog__inner { .dialog__inner {
background: var(--dialog-inner-background, #f7f7f7); background: var(--dialog-inner-background, #f7f7f7);
height: 100%; height: 100%;
overflow-y: auto;
} }
.dialog__inner .tracks-header { .dialog__inner .tracks-header {
background: var(--color-white-50); background: var(--color-white-50);
border-radius: var(--rounded-xl); border-radius: var(--rounded-xl);
padding: var(--space-8); padding: var(--space-8);
border: var(--border-width) solid var(--color-grey-200); border: var(--border-width) solid var(--color-grey-200);
position: relative;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: var(--space-8); gap: var(--space-8);
position: sticky;
top: 0;
z-index: 1;
} }
.dialog__inner .tracks { .dialog__inner .tracks {
display: flex; display: flex;

View file

@ -3,13 +3,14 @@
/* Container */ /* Container */
.track { .track {
--w: 100%; --w: 100%;
--h: calc(100% - 74px); --h: calc(100% - 4.666rem);
--x-steps: 14; --x-steps: 14;
--y-steps: 5; --y-steps: 5;
width: var(--w); width: var(--w);
height: var(--h); height: var(--h);
min-height: 25rem;
position: relative; position: relative;
margin: var(--space-16) auto; margin-top: var(--space-16);
border-radius: var(--rounded-lg); border-radius: var(--rounded-lg);
display: flex; display: flex;
gap: var(--gap); gap: var(--gap);