fix layout shift caused by sidebar panel divider

This commit is contained in:
jeffvli
2025-12-27 16:22:19 -08:00
parent 710fc16f62
commit c8221c07ef
2 changed files with 6 additions and 3 deletions
@@ -53,19 +53,23 @@
.resize-handle { .resize-handle {
position: relative; position: relative;
z-index: 10;
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
height: 4px !important; height: 0;
padding: 4px 0;
margin: -4px 0;
cursor: row-resize; cursor: row-resize;
&::before { &::before {
position: absolute; position: absolute;
top: 0; top: 50%;
left: 0; left: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
content: ''; content: '';
background: var(--theme-colors-border); background: var(--theme-colors-border);
transform: translateY(-50%);
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
} }
} }
@@ -184,7 +184,6 @@ export const SidebarPlayQueue = () => {
direction="vertical" direction="vertical"
dividerClassName={styles.resizeHandle} dividerClassName={styles.resizeHandle}
onResize={onLayoutChange} onResize={onLayoutChange}
style={{ flex: 1, height: '100%', minHeight: 0 }}
> >
{orderedPanels.map((panel, index) => {orderedPanels.map((panel, index) =>
renderPanel(panel, index, orderedPanels.length), renderPanel(panel, index, orderedPanels.length),