Improve responsiveness of Hide Videos From Channels (#2994)

* Add wrapper in `ft-input`  to correct absolute pos

Previously, the action icon was absolutely positioned
to the relative `ft-input-component`; however,
when the label wrapped (on small displays), the height of the
ft-input-component changed, and the icon would overflow
the bottom of the component.  Now, it should be absolutely
positioned to the relative `inputWrapper` which
begins with the top of the input element, and thus, it should
not change position based on the height of the label making it
easier to ensure it is in the right position.

* Modify wrapper to not interfere with existing components

* Make ft-input-tags `width: 100%` on small displays

There isn't a lot of screen real estate on small displays, so
this component should just expand to fill it instead of crunching
in on itself.

* Modify media queries to use more standard breakpoint

# Conflicts:
#	src/renderer/components/ft-input/ft-input.css

* Hide line-break in distraction-settings on small displays

* Fix lint issue by removing self-close from `br`

src/renderer/components/distraction-settings/distraction-settings.css

@@ -0,0 +1,5 @@
+@media only screen and (max-width: 800px) {
+  br.hide-on-mobile {
+    display: none;
+  }
+}

src/renderer/components/distraction-settings/distraction-settings.vue

@@ -104,7 +104,7 @@
         />
       </div>
     </div>
-    <br>
+    <br class="hide-on-mobile">
     <ft-flex-box>
       <ft-input-tags
         :label="$t('Settings.Distraction Free Settings.Hide Channels')"
@@ -119,3 +119,4 @@
 </template>
 
 <script src="./distraction-settings.js" />
+<style src="./distraction-settings.css" />

src/renderer/components/ft-input-tags/ft-input-tags.css

@@ -48,3 +48,8 @@
   margin-top: 10px;
 }
 
+@media only screen and (max-width: 576px) {
+  .ft-input-tags-component {
+    width: 100%;
+  }
+}

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

@@ -114,11 +114,15 @@
   color: #EEEEEE;
 }
 
+.inputWrapper {
+  position: relative;
+}
+
 .inputAction {
   position: absolute;
   margin: 0 3px;
   padding: 10px;
-  top: 5px;
+  top: -8px;
   right: 0;
   border-radius: 100%;
   color: var(--primary-text-color);
@@ -132,20 +136,11 @@
   cursor: pointer;
 }
 
-.inputAction.withLabel {
-  /* If showLabel defined, re-centralize the input button*/
-  top: 34px;
-}
-
 
 .search ::-webkit-calendar-picker-indicator {
   display: none;
 }
 
-.search .inputAction {
-  top: 12px;
-}
-
 .forceTextColor .inputAction {
   color: #EEEEEE;
 }

src/renderer/components/ft-input/ft-input.vue

@@ -38,32 +38,33 @@
       @keydown.space.prevent="handleClearTextClick"
       @keydown.enter.prevent="handleClearTextClick"
     />
-    <input
-      :id="id"
-      ref="input"
-      v-model="inputData"
-      :list="idDataList"
-      class="ft-input"
-      :type="inputType"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :spellcheck="spellcheck"
-      @input="e => handleInput(e.target.value)"
-      @focus="handleFocus"
-      @blur="handleInputBlur"
-      @keydown="handleKeyDown"
-    >
-    <font-awesome-icon
-      v-if="showActionButton"
-      :icon="actionButtonIconName"
-      class="inputAction"
-      :class="{
-        enabled: inputDataPresent,
-        withLabel: showLabel
-      }"
-      @click="handleClick"
-    />
-
+    <span class="inputWrapper">
+      <input
+        :id="id"
+        ref="input"
+        v-model="inputData"
+        :list="idDataList"
+        class="ft-input"
+        :type="inputType"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :spellcheck="spellcheck"
+        @input="e => handleInput(e.target.value)"
+        @focus="handleFocus"
+        @blur="handleInputBlur"
+        @keydown="handleKeyDown"
+      >
+      <font-awesome-icon
+        v-if="showActionButton"
+        :icon="actionButtonIconName"
+        class="inputAction"
+        :class="{
+          enabled: inputDataPresent,
+          withLabel: showLabel
+        }"
+        @click="handleClick"
+      />
+    </span>
     <div class="options">
       <ul
         v-if="inputData !== '' && visibleDataList.length > 0 && searchState.showOptions"