fix dialog and dtl-panel height issues
This commit is contained in:
parent
bb2adabdeb
commit
390563be64
3 changed files with 9 additions and 5 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue