Fix playlist list view when side nav is open

kommunarr · Jun 21, 2024 · 72ca2f8 · 72ca2f8
1 parent 22adb57
commit 72ca2f8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 19 deletions.
diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
@@ -41,7 +41,16 @@
   }
 }
 
-.playlistTitle, .playlistDescription {
+.isSideNavOpen {
+  .playlistTitle, .playlistDescription {
+    @media only screen and (width >= 1162px) {
+      /* Approximate max size before untruncated title starts breaking list view desktop interface with side nav open */
+      max-inline-size: 28vw;
+    }
+  }
+}
+
+.app:not(.isSideNavOpen) .playlistTitle, .app:not(.isSideNavOpen) .playlistDescription {
   inline-size: 100%;
   margin-block: 8px;
   max-inline-size: 70vw;
@@ -102,10 +111,14 @@
     text-align: center;
   }
 
+
+
+  /* stylelint-disable-next-line no-descending-specificity */
   .playlistTitle {
     margin-block-start: 0.2em;
   }
 
+  /* stylelint-disable-next-line no-descending-specificity */
   .playlistTitle, .playlistDescription {
     text-align: center;
 

diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss
@@ -1,5 +1,27 @@
 @use '../../scss-partials/utils';
 
+@mixin single-column-list-view {
+  .routerView {
+    flex-direction: column;
+
+    &.list {
+      .playlistInfoContainer {
+        box-sizing: border-box;
+        position: relative;
+        inset-block-start: 0;
+        block-size: auto;
+        inline-size: 100%;
+        margin-inline: 0;
+      }
+
+      .playlistItemsCard {
+        box-sizing: border-box;
+        inline-size: 100%;
+      }
+    }
+  }
+}
+
 .playlistItemsCard {
   display: flex;
   flex-direction: column;
@@ -73,6 +95,7 @@
       block-size: calc(100vh - 132px);
       min-inline-size: 30%;
       inset-block-start: 96px;
+      margin-block: 0;
       margin-inline-end: 1em;
       position: sticky;
 
@@ -134,27 +157,16 @@
   margin-block: auto;
 }
 
-@media only screen and (width <= 910px) {
-  .routerView {
-    flex-direction: column;
-
-    &.list {
-      .playlistInfoContainer {
-        box-sizing: border-box;
-        position: relative;
-        inset-block-start: 0;
-        block-size: auto;
-        inline-size: 100%;
-      }
-
-      .playlistItemsCard {
-        box-sizing: border-box;
-        inline-size: 100%;
-      }
-    }
+.isSideNavOpen {
+  @media only screen and (width <= 1162px) {
+    @include single-column-list-view;
   }
 }
 
+@media only screen and (width <= 910px) {
+  @include single-column-list-view;
+}
+
 .message {
   color: var(--tertiary-text-color);
 }