Make autoplay text fit inside top bar when translated (#1767)

* Make autoplay fit inside top bar when translated * Lint
FreeTubeApp · Oct 3, 2021 · c2c6a55 · c2c6a55
1 parent 35ae762
commit c2c6a55
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css
@@ -8,8 +8,12 @@
 }
 
 .autoPlayToggle {
-	width: 120px;
-	position: absolute;
-	top: 10px;
-	right: 0px;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+
+.VideoRecommendationsTopBar{
+	display:flex; 
+	justify-content:space-between;
 }
diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue
@@ -3,17 +3,19 @@
     v-if="!hideRecommendedVideos"
     class="relative watchVideoRecommendations"
   >
-    <h3>
-      {{ $t("Up Next") }}
-    </h3>
-    <ft-toggle-switch
-      v-if="showAutoplay"
-      class="autoPlayToggle"
-      :label="$t('Video.Autoplay')"
-      :compact="true"
-      :default-value="playNextVideo"
-      @change="updatePlayNextVideo"
-    />
+    <div class="VideoRecommendationsTopBar">
+      <h3>
+        {{ $t("Up Next") }}
+      </h3>
+      <ft-toggle-switch
+        v-if="showAutoplay"
+        class="autoPlayToggle"
+        :label="$t('Video.Autoplay')"
+        :compact="true"
+        :default-value="playNextVideo"
+        @change="updatePlayNextVideo"
+      />
+    </div>
     <ft-list-video
       v-for="(video, index) in data"
       :key="index"