Fix playlist overflow in list view

- playlist title and description now have vertical scrollbars when they are too long, this means that they can always be fully read by the user instead of being cut off
- the left panel also has a vertical scrollbar when its content doesn't fit
- since this can push the search bar and the buttons to the bottom, they are now sticky
- the left panel always has 30% width while in 2 column mode
- playlist buttons will now wrap instead of being cut off on small resolutions in list view
- in grid view the top bar is no longer sticky since it would obscure too much of the screen with longer titles and descriptions

src/renderer/components/playlist-info/playlist-info.scss

@@ -28,6 +28,8 @@
 .playlistTitle {
   margin-block-end: 0.1em;
   word-break: break-word;
+  max-block-size: 20vh;
+  overflow-y: scroll;
 }
 
 .playlistDescription {
@@ -36,10 +38,6 @@
   white-space: break-spaces;
   margin-inline: auto;
   word-break: break-word;
-
-  @media only screen and (width <= 500px) {
-    max-block-size: 10vh;
-  }
 }
 
 .isSideNavOpen {
@@ -77,13 +75,17 @@
   column-gap: 8px;
   display: grid;
   grid-template-columns: auto minmax(min-content, 1fr);
+  position: sticky;
+  bottom: -20px;
+  background-color: var(--card-bg-color);
+  padding-block: 5px;
 }
 
 .playlistOptions {
-  display: grid;
-  grid-auto-flow: column;
-  column-gap: 8px;
-  justify-content: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
 }
 
 .searchInputsRow {
@@ -150,15 +152,6 @@
   }
 }
 
-/* Only show full untruncated playlist description and title on smaller viewport sizes */
-@media only screen and (width > 680px) {
-  .playlistTitle,
-  .top-bar .playlistDescription {
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
 @media only screen and (width <= 680px) {
   .playlistTitle,
   .playlistDescription {

src/renderer/views/Playlist/Playlist.scss

@@ -31,6 +31,7 @@
 
 .playlistInfoContainer {
   box-sizing: border-box;
+  overflow-y: scroll;
 
   /* This is needed to make prompt always above video entries. Value being too high would block search suggestions */
   z-index: 1;
@@ -61,7 +62,6 @@
     }
 
     .playlistInfoContainer {
-      position: sticky;
       margin-block: -35px 16px;
       inset-block-start: calc(var(--top-bar-push-down-adjustment-default) + var(--top-bar-push-down-adjustment-edit-mode) + var(--top-bar-push-down-adjustment-no-description) + var(--top-bar-push-down-adjustment-one-or-fewer));
       padding-block: 0;
@@ -103,7 +103,7 @@
     .playlistInfoContainer {
       background-color: var(--card-bg-color);
       block-size: calc(100vh - 132px);
-      min-inline-size: 30%;
+      inline-size: 30%;
       inset-block-start: 96px;
       margin-block: 0;
       margin-inline-end: 1em;