* Move toggles to the left

PikachuEXE · May 30, 2024 · a2085e9 · a2085e9
1 parent 41c563d
commit a2085e9
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 20 deletions.
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
@@ -24,11 +24,15 @@
 
 .optionsRow {
   display: grid;
-  grid-template-columns: repeat(3, auto);
-  column-gap: 32px;
-  grid-template-rows: 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  align-items: center;
+}
+
+.tightOptions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
+  column-gap: 16px;
   align-items: center;
-  justify-content: end;
 }
 
 @media only screen and (width <= 800px) {
@@ -37,7 +41,13 @@
     grid-template-columns: auto;
     grid-template-rows: repeat(auto-fit, auto);
     align-items: stretch;
-    justify-content: initial;
+  }
+
+  .tightOptions {
+    /* Switch to rows from columns */
+    grid-template-columns: auto;
+    grid-template-rows: repeat(auto-fit, auto);
+    align-items: stretch;
   }
 }
 

diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
@@ -27,21 +27,25 @@
     <div
       class="optionsRow"
     >
-      <ft-toggle-switch
-        class="matchingVideoToggle"
-        :label="$t('User Playlists.Playlists with Matching Videos')"
-        :compact="true"
-        :default-value="doSearchPlaylistsWithMatchingVideos"
-        @change="doSearchPlaylistsWithMatchingVideos = !doSearchPlaylistsWithMatchingVideos"
-      />
-      <ft-toggle-switch
-        v-if="anyPlaylistContainsVideosToBeAdded"
-        class="allowDuplicateToggle"
-        :label="$t('User Playlists.AddVideoPrompt.Allow Adding Duplicate Video(s)')"
-        :compact="true"
-        :default-value="addingDuplicateVideosEnabled"
-        @change="addingDuplicateVideosEnabled = !addingDuplicateVideosEnabled"
-      />
+      <div
+        class="tightOptions"
+      >
+        <ft-toggle-switch
+          class="matchingVideoToggle"
+          :label="$t('User Playlists.Playlists with Matching Videos')"
+          :compact="true"
+          :default-value="doSearchPlaylistsWithMatchingVideos"
+          @change="doSearchPlaylistsWithMatchingVideos = !doSearchPlaylistsWithMatchingVideos"
+        />
+        <ft-toggle-switch
+          v-if="anyPlaylistContainsVideosToBeAdded"
+          class="allowDuplicateToggle"
+          :label="$t('User Playlists.AddVideoPrompt.Allow Adding Duplicate Video(s)')"
+          :compact="true"
+          :default-value="addingDuplicateVideosEnabled"
+          @change="addingDuplicateVideosEnabled = !addingDuplicateVideosEnabled"
+        />
+      </div>
       <ft-select
         v-if="allPlaylists.length > 1"
         class="sortSelect"