diff --git a/src/renderer/layouts/default-layout/left-sidebar.module.css b/src/renderer/layouts/default-layout/left-sidebar.module.css index 5efaa8ef8..796e3493b 100644 --- a/src/renderer/layouts/default-layout/left-sidebar.module.css +++ b/src/renderer/layouts/default-layout/left-sidebar.module.css @@ -1,6 +1,7 @@ .container { position: relative; grid-area: sidebar; + overflow: hidden; background: var(--theme-colors-background-alternate); - border-right: 1px solid alpha(var(--theme-colors-border), 0.5); + border-radius: var(--theme-radius-lg); } diff --git a/src/renderer/layouts/default-layout/main-content.module.css b/src/renderer/layouts/default-layout/main-content.module.css index 2012522a3..23165ee08 100644 --- a/src/renderer/layouts/default-layout/main-content.module.css +++ b/src/renderer/layouts/default-layout/main-content.module.css @@ -1,10 +1,12 @@ .main-content-container { position: relative; + box-sizing: border-box; display: grid; grid-area: main-content; - grid-template-areas: 'sidebar . right-sidebar'; + grid-template-areas: 'sidebar main'; grid-template-rows: 1fr; - gap: 0; + gap: var(--theme-spacing-sm); + padding: var(--theme-spacing-md); background: var(--theme-colors-background); } @@ -21,6 +23,7 @@ } .main-content-container.right-expanded { + grid-template-areas: 'sidebar main right-sidebar'; grid-template-columns: var(--sidebar-width) 1fr var(--right-sidebar-width); } @@ -30,7 +33,7 @@ .main-content-container.vertical-layout { grid-template-areas: - 'sidebar .' + 'sidebar main' 'sidebar right-sidebar'; grid-template-rows: minmax(0, 1fr) var(--right-sidebar-height); grid-template-columns: var(--sidebar-width) 1fr; @@ -40,17 +43,15 @@ grid-template-columns: 80px 1fr; } -.main-content-container.vertical-layout #sidebar-queue { - border-top: 1px solid alpha(var(--theme-colors-border), 0.5); - border-left: 0; -} - .main-content-body { display: flex; flex: 1; flex-direction: column; + grid-area: main; min-height: 0; overflow: hidden; + background: var(--theme-colors-background); + border-radius: var(--theme-radius-lg); } .main-content-body-scroll { diff --git a/src/renderer/layouts/default-layout/right-sidebar.module.css b/src/renderer/layouts/default-layout/right-sidebar.module.css index 581418304..1562727ef 100644 --- a/src/renderer/layouts/default-layout/right-sidebar.module.css +++ b/src/renderer/layouts/default-layout/right-sidebar.module.css @@ -7,18 +7,13 @@ min-height: 0; overflow: hidden; background: var(--theme-colors-background-alternate); - border-left: 1px solid alpha(var(--theme-colors-border), 0.5); + border-radius: var(--theme-radius-lg); .current-song-cell:not(.current-playlist-song-cell) svg { display: none; } } -.right-sidebar-container.vertical-layout { - border-top: 1px solid alpha(var(--theme-colors-border), 0.5); - border-left: 0; -} - .queue-drawer { border-radius: var(--theme-radius-lg); } diff --git a/src/renderer/layouts/default-layout/right-sidebar.tsx b/src/renderer/layouts/default-layout/right-sidebar.tsx index 9975e05fe..5a3db6ba3 100644 --- a/src/renderer/layouts/default-layout/right-sidebar.tsx +++ b/src/renderer/layouts/default-layout/right-sidebar.tsx @@ -1,4 +1,3 @@ -import clsx from 'clsx'; import { forwardRef, Ref } from 'react'; import styles from './right-sidebar.module.css'; @@ -64,9 +63,7 @@ export const RightSidebar = forwardRef( <> {rightExpanded && sideQueueType === 'sideQueue' && (