Fix style for the Select component (#4405)

* Fix style for the Select component

Fixes #1804

Fixes the width of dropdowns and changes their style a little bit

* Fix lint

* Fix comments partially obscuring the sort dropdown

* Move select tooltip

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

@@ -24,8 +24,6 @@
 .select {
   position: relative;
   inline-size: 200px;
-  padding-block: 0 10px;
-  padding-inline: 0 10px;
   margin-block-start: 30px;
 }
 
@@ -37,13 +35,13 @@
 .select-text {
   position: relative;
   font-family: inherit;
-  background-color: transparent;
+  background-color: var(--search-bar-color);
   color: var(--primary-text-color);
-  inline-size: 240px;
-  padding-block: 10px;
-  padding-inline: 0 10px;
-  font-size: 18px;
-  border-radius: 0;
+  inline-size: 100%;
+  block-size: 45px;
+  padding-inline-start: 1rem;
+  font-size: 16px;
+  border-radius: 5px;
   border: none;
 }
 
@@ -62,13 +60,13 @@
   appearance: none;
   -webkit-appearance:none;
   text-overflow: ellipsis;
-  padding-inline-end: 1.1rem;
+  padding-inline-end: 1.5rem;
 }
 
 .iconSelect {
   position: absolute;
   inset-block-start: 10px;
-  inset-inline-end: 15px;
+  inset-inline-end: 10px;
   /* Styling the down arrow */
   padding: 0;
   content: '';
@@ -80,8 +78,8 @@
 
 .selectTooltip {
   position: absolute;
-  inset-block-start: -20px;
-  inset-inline-end: 17px;
+  inset-block-start: -22px;
+  inset-inline-end: 13px;
 }
 
 
@@ -108,7 +106,6 @@
 .select-bar {
   position: relative;
   display: block;
-  inline-size: 200px;
 }
 
 .select-bar:before, .select-bar:after {
@@ -145,25 +142,8 @@
   opacity: 0.5;
 }
 
-@media only screen and (max-width: 1000px) {
-  .select .select-text {
-    max-inline-size: 240px;
-  }
-}
-
 @media only screen and (max-width: 800px) {
   .select {
     inline-size: 100%;
   }
-  .select .select-text {
-    display:block;
-    max-inline-size: 95%;
-  }
-}
-
-@media only screen and (max-width: 680px) {
-  .select {
-    padding: 0px;
-    margin-inline-end: -15px;
-  }
-}
+}

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

@@ -3,8 +3,7 @@
   inline-size: auto;
 }
 
-/* https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors */
-.select:deep(.select-text) {
-  min-inline-size: 240px;
-  inline-size: auto;
-}
+.switchGrid {
+  gap: 10px;
+  margin-block-end: 12px;
+}

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

@@ -0,0 +1,3 @@
+.protocol-dropdown {
+  margin-block-end: 1rem;
+}

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

@@ -18,6 +18,7 @@
           :value="proxyProtocol"
           :select-names="protocolNames"
           :select-values="protocolValues"
+          class="protocol-dropdown"
           @change="handleUpdateProxyProtocol"
         />
       </ft-flex-box>
@@ -77,3 +78,4 @@
 </template>
 
 <script src="./proxy-settings.js" />
+<style scoped src="./proxy-settings.css" />

src/renderer/components/watch-video-comments/watch-video-comments.css

@@ -34,14 +34,12 @@
 @media only screen and (max-width: 800px) {
   .commentSort {
     float: none;
-    inline-size: fit-content;
   }
 }
 
 
 .comment {
   padding: 15px;
-  position: relative;
 }
 
 .hideComments {

src/renderer/views/Channel/Channel.css

@@ -87,8 +87,11 @@
   flex: 1 1 0%;
 }
 
-.sortSelect {
-  margin-inline-start: auto;
+.select-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-block-end: 10px;
 }
 
 .channelInfoTabs {

src/renderer/views/Channel/Channel.vue

@@ -229,46 +229,44 @@
         :tags="tags"
         :related-channels="relatedChannels"
       />
-      <ft-select
-        v-if="showVideoSortBy"
-        v-show="currentTab === 'videos' && latestVideos.length > 0"
-        class="sortSelect"
-        :value="videoLiveSelectValues[0]"
-        :select-names="videoLiveSelectNames"
-        :select-values="videoLiveSelectValues"
-        :placeholder="$t('Search Filters.Sort By.Sort By')"
-        @change="videoSortBy = $event"
-      />
-      <ft-select
-        v-if="!hideChannelShorts && showShortSortBy"
-        v-show="currentTab === 'shorts' && latestShorts.length > 0"
-        class="sortSelect"
-        :value="shortSelectValues[0]"
-        :select-names="shortSelectNames"
-        :select-values="shortSelectValues"
-        :placeholder="$t('Search Filters.Sort By.Sort By')"
-        @change="shortSortBy = $event"
-      />
-      <ft-select
-        v-if="!hideLiveStreams && showLiveSortBy"
-        v-show="currentTab === 'live' && latestLive.length > 0"
-        class="sortSelect"
-        :value="videoLiveSelectValues[0]"
-        :select-names="videoLiveSelectNames"
-        :select-values="videoLiveSelectValues"
-        :placeholder="$t('Search Filters.Sort By.Sort By')"
-        @change="liveSortBy = $event"
-      />
-      <ft-select
-        v-if="!hideChannelPlaylists && showPlaylistSortBy"
-        v-show="currentTab === 'playlists' && latestPlaylists.length > 0"
-        class="sortSelect"
-        :value="playlistSelectValues[0]"
-        :select-names="playlistSelectNames"
-        :select-values="playlistSelectValues"
-        :placeholder="$t('Search Filters.Sort By.Sort By')"
-        @change="playlistSortBy = $event"
-      />
+      <div class="select-container">
+        <ft-select
+          v-if="showVideoSortBy"
+          v-show="currentTab === 'videos' && latestVideos.length > 0"
+          :value="videoLiveSelectValues[0]"
+          :select-names="videoLiveSelectNames"
+          :select-values="videoLiveSelectValues"
+          :placeholder="$t('Search Filters.Sort By.Sort By')"
+          @change="videoSortBy = $event"
+        />
+        <ft-select
+          v-if="!hideChannelShorts && showShortSortBy"
+          v-show="currentTab === 'shorts' && latestShorts.length > 0"
+          :value="shortSelectValues[0]"
+          :select-names="shortSelectNames"
+          :select-values="shortSelectValues"
+          :placeholder="$t('Search Filters.Sort By.Sort By')"
+          @change="shortSortBy = $event"
+        />
+        <ft-select
+          v-if="!hideLiveStreams && showLiveSortBy"
+          v-show="currentTab === 'live' && latestLive.length > 0"
+          :value="videoLiveSelectValues[0]"
+          :select-names="videoLiveSelectNames"
+          :select-values="videoLiveSelectValues"
+          :placeholder="$t('Search Filters.Sort By.Sort By')"
+          @change="liveSortBy = $event"
+        />
+        <ft-select
+          v-if="!hideChannelPlaylists && showPlaylistSortBy"
+          v-show="currentTab === 'playlists' && latestPlaylists.length > 0"
+          :value="playlistSelectValues[0]"
+          :select-names="playlistSelectNames"
+          :select-values="playlistSelectValues"
+          :placeholder="$t('Search Filters.Sort By.Sort By')"
+          @change="playlistSortBy = $event"
+        />
+      </div>
       <ft-loader
         v-if="isElementListLoading"
       />