Adjust sidebar width to accommodate dropup content

This commit is contained in:
thePR0M3TH3AN committed 2025-10-19 14:28:44 -04:00
1 parent ea4c50f218
commit 5fca466e94
3 files changed
+142 -10

No files matched your search

+31 -9
View File
@@ -2811,9 +2811,18 @@
}
#app[data-sidebar-state="expanded"] {
margin-left: var(--sidebar-width-expanded);
width: calc(100vw - var(--sidebar-width-expanded));
max-width: calc(100vw - var(--sidebar-width-expanded));
margin-left: max(
var(--sidebar-width-expanded-base),
var(--sidebar-dropup-content-width)
);
width: min(
calc(100vw - var(--sidebar-width-expanded-base)),
calc(100vw - var(--sidebar-dropup-content-width))
);
max-width: min(
calc(100vw - var(--sidebar-width-expanded-base)),
calc(100vw - var(--sidebar-dropup-content-width))
);
}
body.sidebar-collapsed #sidebar .sidebar-nav-link,
@@ -2925,14 +2934,27 @@
}
#app[data-sidebar-state="expanded"] {
margin-left: calc(
var(--sidebar-width-expanded) + var(--sidebar-content-gap)
margin-left: max(
calc(var(--sidebar-width-expanded-base) + var(--sidebar-content-gap)),
calc(var(--sidebar-dropup-content-width) + var(--sidebar-content-gap))
);
width: calc(
100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap)
width: min(
calc(
100vw - var(--sidebar-width-expanded-base) - var(--sidebar-content-gap)
),
calc(
100vw - var(--sidebar-dropup-content-width) -
var(--sidebar-content-gap)
)
);
max-width: calc(
100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap)
max-width: min(
calc(
100vw - var(--sidebar-width-expanded-base) - var(--sidebar-content-gap)
),
calc(
100vw - var(--sidebar-dropup-content-width) -
var(--sidebar-content-gap)
)
);
}
+6 -1
View File
@@ -146,7 +146,12 @@
--z-modal-top-content: 160;
--overlay-backdrop-color: var(--color-overlay-backdrop);
--overlay-backdrop-blur: 12px;
--sidebar-width-expanded: 16rem;
--sidebar-width-expanded-base: 16rem;
--sidebar-dropup-content-width: 0px;
--sidebar-width-expanded: max(
var(--sidebar-width-expanded-base),
var(--sidebar-dropup-content-width)
);
--sidebar-width-collapsed: 4rem;
--sidebar-width: var(--sidebar-width-expanded);
--sidebar-control-size: 2.75rem;