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/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/password-dialog/password-dialog.css

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

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
@@ -41,6 +40,16 @@
  }
 }
 
+.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;
+ }
+ }
+}
+
 .playlistChannel {
  align-items: center;
  color: inherit;
@@ -98,13 +107,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 +148,25 @@
  }
 }
 
+/* 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;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+}
+
+@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

@@ -311,6 +311,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%;
- }
-}