Improving responsiveness in Settings (#2694)

* Removing a `width:auto` which was overriding

the width for a lot of .select-text

* Making the general-settings component not overflow

* Reducing margin in settings when window is narrow

* Moving invidious instance tooltip to reduce overflow

* Reducing the width of sliders to be 100% at maximum

Before this change, the preset width `380px` could easily
be wider than the window.

* Reducing overflow in Theme Settings

- Added breakpoint for theme `select`s
- Added breakpoint for the UI scale slider

* Reducing the remaining overflow in settings

This moves all of the tooltips slightly to the left
when the window is narrow to reduce overflow.

* Expanding the sponsorblock settings to full width

* Moving remaining tooltips into a fixed zone

* Floating the tooltip icon to the right

When the display is narrow, the tooltip
can sometimes overflow, and it is very
difficult to predict how it will overflow
if the tool tip icon comes directly after
a locale string.

This change floats those icons into a
centralized location where the tooltip
can be guaranteed to not overflow.

* Removing some irrelevant changes

* Reducing margin on switches

* Removing bottom margin on the last section

* Making room for overflow ellipsis

* Adding class  `.containsTooltip` to `ft-toggle`

This should make is easier to style the toggles
which contain tooltips specficially.

* Modifying the media query for tooltips

* Adding a media query to reduce data settings margin

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

@@ -38,7 +38,7 @@
   font-family: inherit;
   background-color: transparent;
   color: var(--primary-text-color);
-  width: 200px;
+  width: 240px;
   padding: 10px 10px 10px 0;
   font-size: 18px;
   border-radius: 0;
@@ -143,3 +143,26 @@
   pointer-events: none;
   opacity: 0.5;
 }
+
+@media only screen and (max-width: 1000px) {
+  .select .select-text {
+    max-width: 240px;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  .select {
+    width: 100%;
+  }
+  .select .select-text {
+    display:block;
+    max-width: 95%;
+  }
+}
+
+@media only screen and (max-width: 680px) {
+  .select {
+    padding: 0px;
+    margin-right: -15px;
+  }  
+}

src/renderer/components/ft-settings-section/ft-settings-section.sass

@@ -2,12 +2,19 @@
   background-color: var(--card-bg-color)
   width: 85%
   margin: 0 auto
+  @media only screen and (max-width: 800px)
+    width: 100%
 
   &[open]
     padding-bottom: 15px
 
-  @media only screen and (max-width: 680px)
+  > div
-    width: 90%
+    width: 100%
+    padding: 0px 20px
+    box-sizing: border-box
+  > div:not(:last-child):not(.ft-flex-box)
+    @media only screen and (max-width: 800px)
+      margin-bottom: 20px
 
 .sectionLine
   width: 100%
@@ -52,3 +59,24 @@
 @media only screen and (max-width: 500px)
   :deep(.settingsFlexStart500px)
     justify-content: flex-start
+
+@media only screen and (max-width: 680px)
+  .settingsSection 
+    > div 
+      :deep(.text.bottom)
+        left: -85px
+    :deep(.switch-ctn.containsTooltip)
+      left: -10px
+      margin-right: 5px
+      padding: 0px 10px 0px 10px
+    :not(.select)
+      > :deep(.tooltip)
+        display: inline-block
+        position: absolute
+        right: -25px
+        top: 12px
+    .settingsFlexStart460px :deep(.tooltip)
+      right: 0px
+      top: -2px
+    :deep(.switch-ctn)
+      margin: 10px 7px

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

@@ -242,3 +242,9 @@
     box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
     transform: scale(4, 4);
 }
+
+@media only screen and (max-width: 680px) {
+    .pure-material-slider {
+        width: 100%;
+    }
+}

src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.sass

@@ -1,5 +1,7 @@
 .sponsorBlockCategory
     margin-top: 30px
     padding: 0 10px
+    @media only screen and (max-width: 680px)
+        width: 100%
     .sponsorTitle
         font-size: x-large

src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass

@@ -77,3 +77,5 @@
     .switch-input:disabled + &
       background-color: #BDBDBD
   
+  @media (max-width: 680px)
+    max-width: 250px 

src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue

@@ -3,7 +3,8 @@
     class="switch-ctn"
     :class="{
       compact,
-      disabled: disabled
+      disabled: disabled,
+      containsTooltip: tooltip.length > 0
     }"
   >
     <input