Make layout full-width

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,14 +54,26 @@
   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;
     margin-inline: 8px;
   }
 
   .banner {
-    inline-size: 90%;
+    max-inline-size: calc(100vw - 64px);
     margin-block: 60px 0;
   }
 

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));
+  }
+}

src/renderer/components/FtAutoGrid/FtAutoGrid.vue

@@ -1,8 +1,8 @@
 <template>
   <div
     :class="{
-      grid: grid,
-      list: !grid
+      autoGrid: grid,
+      autoList: !grid
     }"
   >
     <slot />

src/renderer/components/PasswordDialog/PasswordDialog.css

@@ -1,5 +1,4 @@
 .card {
-  inline-size: 85%;
   margin: auto;
   box-sizing: border-box;
 }

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);
+  }
 }

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%;
-  }
-}

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%;
-  }
-}

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%;
-  }
-}

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,16 +27,26 @@
 
 .playlistTitle {
   margin-block-end: 0.1em;
+  word-break: break-word;
+  max-block-size: 20vh;
+  overflow-y: scroll;
 }
 
 .playlistDescription {
   max-block-size: 20vh;
   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;

src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css

@@ -1,15 +1,8 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
 }
 
 .message {
   color: var(--tertiary-text-color);
 }
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}

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 {

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%;
-  }
-}

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;

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%;
-  }
 }

src/renderer/views/History/History.css

@@ -1,15 +1,8 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
 }
 
 .message {
   color: var(--tertiary-text-color);
 }
-
-@media only screen and (width <= 680px) {
-  .card {
-    inline-size: 90%;
-  }
-}