diff --git a/src/renderer/App.css b/src/renderer/App.css
index 866c01197bf6f..f031b839caf01 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -13,11 +13,10 @@
 .routerView {
   flex: 1 1 0%;
   margin-block: 18px;
-  margin-inline: 10px;
+  margin-inline: 5px;
 }
 
 .banner {
-  inline-size: 85%;
   margin-block: 40px 0;
   margin-inline: auto;
 }
@@ -55,6 +54,18 @@
   opacity: 0;
 }
 
+/* align banner with ft-card width using identical styling rules */
+@media only screen and (width > 680px) {
+  .isSideNavOpen .banner {
+    max-inline-size: min(calc(100vw + -262px), 2800px);
+  }
+
+  .hideLabelsSideBar .banner {
+    max-inline-size: min(calc(100vw + -122px), 2800px);
+  }
+}
+
+
 @media only screen and (width <= 680px) {
   .routerView {
     margin-block: 68px;
@@ -62,7 +73,7 @@
   }
 
   .banner {
-    inline-size: 90%;
+    max-inline-size: calc(100vw - 64px);
     margin-block: 60px 0;
   }
 
diff --git a/src/renderer/components/FtAutoGrid/FtAutoGrid.css b/src/renderer/components/FtAutoGrid/FtAutoGrid.css
index ed10d515183ea..d6acdeff4399d 100644
--- a/src/renderer/components/FtAutoGrid/FtAutoGrid.css
+++ b/src/renderer/components/FtAutoGrid/FtAutoGrid.css
@@ -1,11 +1,30 @@
-.grid {
+.autoGrid {
   display: grid;
   grid-gap: 8px;
   grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
   justify-content: space-evenly;
 }
 
-.list {
+.autoList {
   display: grid;
   grid-gap: 4px;
 }
+
+@media (width >= 1514px) {
+  .autoList {
+    justify-content: center;
+  }
+}
+
+/* Cap grid column width at 5 for larger viewports */
+@media (width >= 1605px) {
+  .autoGrid {
+    grid-template-columns: repeat(5, minmax(262px, 1fr));
+  }
+}
+
+@media (width >= 2000px) {
+  .autoGrid {
+    grid-template-columns: repeat(6, minmax(262px, 1fr));
+  }
+}
diff --git a/src/renderer/components/FtAutoGrid/FtAutoGrid.vue b/src/renderer/components/FtAutoGrid/FtAutoGrid.vue
index 05af66ecb95a9..eaa2e8eb4f406 100644
--- a/src/renderer/components/FtAutoGrid/FtAutoGrid.vue
+++ b/src/renderer/components/FtAutoGrid/FtAutoGrid.vue
@@ -1,8 +1,8 @@
 <template>
   <div
     :class="{
-      grid: grid,
-      list: !grid
+      autoGrid: grid,
+      autoList: !grid
     }"
   >
     <slot />
diff --git a/src/renderer/components/PasswordDialog/PasswordDialog.css b/src/renderer/components/PasswordDialog/PasswordDialog.css
index cf547ceed9048..05e6d66ceda2a 100644
--- a/src/renderer/components/PasswordDialog/PasswordDialog.css
+++ b/src/renderer/components/PasswordDialog/PasswordDialog.css
@@ -1,5 +1,4 @@
 .card {
-  inline-size: 85%;
   margin: auto;
   box-sizing: border-box;
 }
diff --git a/src/renderer/components/ft-card/ft-card.css b/src/renderer/components/ft-card/ft-card.css
index 250d9a851753b..de83f3e1bc05d 100644
--- a/src/renderer/components/ft-card/ft-card.css
+++ b/src/renderer/components/ft-card/ft-card.css
@@ -4,4 +4,21 @@
   padding-block: 3px 16px;
   padding-inline: 16px;
   box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
+  max-inline-size: min(calc(100vw + -132px), 2800px);
+}
+
+@media only screen and (width > 680px) {
+  .isSideNavOpen .ft-card {
+    max-inline-size: min(calc(100vw + -262px), 2800px);
+  }
+
+  .hideLabelsSideBar .ft-card {
+    max-inline-size: min(calc(100vw + -122px), 2800px);
+  }
+}
+
+@media only screen and (width <= 680px) {
+  .ft-card {
+    max-inline-size: calc(100vw - 64px);
+  }
 }
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
index 3d7ff2ca33542..e44c9dcd0e7e7 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
@@ -4,13 +4,6 @@ h2,
 }
 
 .card {
-  inline-size: 85%;
   margin-block: 0 15px;
   margin-inline: auto;
 }
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.css b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
index 6290036dda212..537697e579761 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@@ -78,13 +78,6 @@ h3 {
 }
 
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
 }
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
index 35ee6d14029ab..27f879836538e 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
@@ -7,13 +7,6 @@ h2 {
 }
 
 .card {
-  inline-size: 85%;
   margin-block: 0 15px;
   margin-inline: auto;
 }
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
index cdec36bd25c9c..7086773919e3d 100644
--- a/src/renderer/components/playlist-info/playlist-info.scss
+++ b/src/renderer/components/playlist-info/playlist-info.scss
@@ -6,7 +6,6 @@
   cursor: pointer;
 }
 
-
 .playlistThumbnail img {
   inline-size: 100%;
   // Ensure placeholder image displayed at same aspect ratio as most other images
@@ -28,6 +27,9 @@
 
 .playlistTitle {
   margin-block-end: 0.1em;
+  word-break: break-word;
+  max-block-size: 20vh;
+  overflow-y: scroll;
 }
 
 .playlistDescription {
@@ -35,9 +37,16 @@
   overflow-y: auto;
   white-space: break-spaces;
   margin-inline: auto;
+  word-break: break-word;
+}
 
-  @media only screen and (width <= 500px) {
-    max-block-size: 10vh;
+.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;
+    }
   }
 }
 
@@ -62,17 +71,28 @@
   word-break: break-all;
 }
 
+.playlistOptions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+
 .channelShareWrapper {
   column-gap: 8px;
   display: grid;
   grid-template-columns: auto minmax(min-content, 1fr);
-}
-
-.playlistOptions {
-  display: grid;
-  grid-auto-flow: column;
-  column-gap: 8px;
-  justify-content: flex-end;
+  position: sticky;
+  inset-block-end: -20px;
+  background-color: var(--card-bg-color);
+  padding-block: 5px;
+
+  .playlistOptions {
+    display: grid;
+    grid-auto-flow: column;
+    column-gap: 8px;
+    justify-content: flex-end;
+  }
 }
 
 .searchInputsRow {
@@ -98,13 +118,22 @@
 
   .playlistTitle,
   .playlistDescription {
-    overflow-x: hidden;
     text-align: center;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-inline-size: 750px;
+
+    /* Approximate max size before untruncated title could break grid view interface */
+    max-inline-size: 50vw;
+  }
+
+  .app:not(.isSideNavOpen) .playlistTitle,
+  .app:not(.isSideNavOpen) .playlistDescription {
     inline-size: 100%;
     margin-block: 8px;
+    max-inline-size: 70vw;
+
+    @media only screen and (width >= 910px) {
+      /* Approximate max size before untruncated title starts breaking list view desktop interface */
+      max-inline-size: 28vw;
+    }
   }
 
   .descriptionInput {
@@ -130,6 +159,15 @@
   }
 }
 
+@media only screen and (width <= 680px) {
+  .playlistTitle,
+  .playlistDescription {
+    max-inline-size: 100%;
+  }
+}
+
+
+
 @media only screen and (width <= 1250px) {
   :deep(.sharePlaylistIcon .iconDropdown) {
     inset-inline: auto;
diff --git a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
index a902565bb94b5..a93ab9893f834 100644
--- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
+++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
@@ -1,5 +1,4 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
 }
@@ -7,9 +6,3 @@
 .message {
   color: var(--tertiary-text-color);
 }
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index dcc43ec020584..95a368c5dc5ff 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -319,6 +319,10 @@ $watched-transition-duration: 0.5s;
     .info .description {
       margin-inline-end: 10px;
     }
+
+    @media only screen and (width >= 1514px) {
+      max-inline-size: 1250px;
+    }
   }
 
   &.grid {
diff --git a/src/renderer/views/About/About.css b/src/renderer/views/About/About.css
index 51416a5c72566..c86b3a95a438d 100644
--- a/src/renderer/views/About/About.css
+++ b/src/renderer/views/About/About.css
@@ -1,7 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-  inline-size: 85%;
 }
 
 .brand {
@@ -61,9 +60,3 @@
     grid-template-columns: 1fr;
   }
 }
-
-@media only screen and (width <=680px) {
-  .card {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index c2a6815f8b202..76ec3c5cb469a 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -1,6 +1,5 @@
 .card {
   position: relative;
-  inline-size: 85%;
   margin-block: 0 20px;
   margin-inline: auto;
   box-sizing: border-box;
diff --git a/src/renderer/views/Hashtag/Hashtag.css b/src/renderer/views/Hashtag/Hashtag.css
index 372cb70483a83..e8059e9bbc018 100644
--- a/src/renderer/views/Hashtag/Hashtag.css
+++ b/src/renderer/views/Hashtag/Hashtag.css
@@ -17,11 +17,4 @@
 .card {
   margin-block: 0 20px;
   margin-inline: auto;
-  inline-size: 85%;
-}
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
 }
diff --git a/src/renderer/views/History/History.css b/src/renderer/views/History/History.css
index a902565bb94b5..a93ab9893f834 100644
--- a/src/renderer/views/History/History.css
+++ b/src/renderer/views/History/History.css
@@ -1,5 +1,4 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
 }
@@ -7,9 +6,3 @@
 .message {
   color: var(--tertiary-text-color);
 }
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss
index d1ab1f4dd939a..014d570ec5465 100644
--- 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;
+        min-inline-size: 100%;
+        margin-inline: 0;
+      }
+
+      .playlistItemsCard {
+        box-sizing: border-box;
+        min-inline-size: 100%;
+      }
+    }
+  }
+}
+
 .playlistItemsCard {
   display: flex;
   flex-direction: column;
@@ -9,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;
@@ -39,14 +62,13 @@
     }
 
     .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;
       margin-inline: auto;
       padding-inline: 16px;
-      box-sizing: content-box;
-      inline-size: 85%;
+      box-sizing: border-box;
+      inline-size: 100%;
       background-color: var(--card-bg-color);
       box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
 
@@ -60,28 +82,42 @@
     }
 
     .playlistItemsCard {
-      inline-size: 85%;
       margin-block: 0 60px;
       margin-inline: auto;
+      inline-size: 100%;
+      box-sizing: border-box;
     }
   }
 
   &.list {
+    @media only screen and (width <= 680px) {
+      .playlistInfoContainer {
+        max-inline-size: 100vw;
+      }
+
+      .playlistItemsCard {
+        max-inline-size: 100vw;
+      }
+    }
+
     .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;
       position: sticky;
 
       .playlistInfo {
         padding: 10px;
+        padding-inline-end: 0;
       }
     }
 
     .playlistItemsCard {
-      inline-size: 60%;
+      inline-size: 100%;
       padding: 10px;
     }
   }
@@ -134,27 +170,23 @@
   margin-block: auto;
 }
 
-@media only screen and (width <= 850px) {
-  .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);
 }
+
+@media only screen and (width <= 680px) {
+  .playlistPage {
+    // this is a hack, the proper way would be to set `margin-inline: 0;` on .routerView, but I don't know how to do that without affecting other pages
+    margin-inline: -8px !important;
+  }
+}
diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
index 576f501900d02..d3639f266486e 100644
--- a/src/renderer/views/Playlist/Playlist.vue
+++ b/src/renderer/views/Playlist/Playlist.vue
@@ -7,7 +7,7 @@
       v-if="isLoading"
       :fullscreen="true"
     />
-    <div
+    <ft-card
       v-if="!isLoading"
       class="playlistInfoContainer"
       :class="{
@@ -41,7 +41,7 @@
         @prompt-open="promptOpen = true"
         @prompt-close="promptOpen = false"
       />
-    </div>
+    </ft-card>
 
     <ft-card
       v-if="!isLoading"
diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css
index b6f8ffc9db440..47966ea7ac2ba 100644
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.css
@@ -1,11 +1,4 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
 }
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.css b/src/renderer/views/ProfileSettings/ProfileSettings.css
index 4ec9e91f2297e..25b34c4383e77 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.css
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.css
@@ -25,13 +25,6 @@ h2 {
 }
 
 .card {
-  inline-size: 85%;
   margin-block: 0 15px;
   margin-inline: auto;
 }
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css
index ec9031f0d9dcf..121350b2aea40 100644
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.css
@@ -15,13 +15,6 @@
 }
 
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
 }
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
index a9ba894a37e03..4b793d1c57d9c 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -1,5 +1,4 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
 }
@@ -68,10 +67,6 @@
 }
 
 @media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-
   .channels {
     gap: 1.5rem;
   }
diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css
index 3446217754239..e1cbc8b5763ba 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.css
@@ -1,5 +1,4 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
 }
@@ -33,9 +32,3 @@
 .tab:hover {
   font-weight: bold;
 }
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index 33afef6ba2ead..fd8cf730cbb38 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -1,5 +1,4 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
 }
@@ -36,8 +35,3 @@
   color: var(--primary-color);
 }
 
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.css b/src/renderer/views/UserPlaylists/UserPlaylists.css
index bdecb1640e17f..56118aac5d54c 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.css
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.css
@@ -1,6 +1,5 @@
 .card {
   position: relative;
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
 }
@@ -55,9 +54,3 @@
 .message {
   color: var(--tertiary-text-color);
 }
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}