Mobile/tablet channel page & share button visual improvements (#4061)

* Implement fix to elements escaping container on Channel page at small widths

* Show all Channel tabs on smaller viewport widths & reduce bulky gap

* Update Channel page to not break at even lower sizes

* Re-introduce channel button clipping fix

* Implement updated share button styling

* Fix issue with prompt box shrinking on small enough viewport sizes / overflow

* Update share button to work at all sizes'

* Fix pre-existing issue of Channel tabs overflowing on desktop view in some locales

Author: kommunarr

src/renderer/components/ft-prompt/ft-prompt.css

@@ -2,8 +2,8 @@
   position: fixed;
   inset-block-start: 0px;
   inset-inline-start: 0px;
-  inline-size: 100vw;
-  block-size: 100vh;
+  inline-size: 100%;
+  block-size: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   z-index: 10;
   padding: 15px;
@@ -13,6 +13,10 @@
   justify-content: center;
 }
 
+.promptCard {
+  overflow-y: scroll;
+}
+
 .promptCard.autosize {
   box-sizing: border-box;
   margin-block: 0;

src/renderer/components/ft-share-button/ft-share-button.scss

@@ -11,14 +11,19 @@
     font-weight: bold;
     margin-block: 4px 8px;
     margin-inline: 0;
+    display: flex;
+    justify-content: center;
   }
 
   .buttons {
     display: flex;
     flex-direction: column;
+    max-inline-size: min-content;
+    min-inline-size: 150px;
 
     .action {
       padding: 6px;
+      white-space: initial;
     }
   }
 
@@ -55,8 +60,6 @@
   }
 
   .invidious {
-    display: flex;
-    justify-content: center;
     letter-spacing: -0.4px;
 
     .invidiousLogo {
@@ -85,3 +88,25 @@
     }
   }
 }
+
+@media only screen and (max-width: 450px) {
+  .shareLinks {
+    grid-auto-flow: row;
+    margin-inline: auto;
+    justify-items: center;
+    max-inline-size: max-content;
+
+    .header.invidious {
+      margin-block-start: 20px;
+    }
+
+    .buttons {
+      max-inline-size: min-content;
+      min-inline-size: 180px;
+    }
+
+    .divider {
+      display: none;
+    }
+  }
+}

src/renderer/views/Channel/Channel.css

@@ -71,6 +71,10 @@
   justify-content: space-between;
 }
 
+.subscribeButton {
+  block-size: fit-content;
+}
+
 .shareIcon {
   align-self: center;
 }
@@ -94,11 +98,14 @@
   gap: 32px;
   padding-block: .3em;
   padding-inline: 0;
+  flex-direction: column;
+  flex-wrap: nowrap;
 }
 
 .tabs {
   display: flex;
   flex: 0 1 33%;
+  flex-wrap: wrap;
 }
 
 .tab {
@@ -187,6 +194,7 @@
   .channelInfoTabs {
     block-size: auto;
     flex-flow: column-reverse;
+    gap: 0;
   }
 
   .channelSearch {
@@ -195,9 +203,39 @@
   }
 
   .tabs {
-    overflow-x: scroll;
+    flex: 1 1 0;
+    flex-wrap: wrap;
   }
+
   #communityPanel {
     margin-block-start: 1rem;
   }
 }
+
+@media only screen and (max-width: 400px) {
+  .channelInfo {
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .channelInfoActionsContainer {
+    flex-direction: column-reverse;
+  }
+
+  .thumbnailContainer {
+    flex-direction: column;
+  }
+
+  .thumbnailContainer, .channelInfoActionsContainer {
+    flex-wrap: wrap;
+    align-items: center;
+    text-align: center;
+    gap: 10px;
+  }
+}
+
+@media only screen and (max-width: 260px) {
+   .channelDetails {
+    max-inline-size: none;
+  }
+}