From ea45b60c68de5934c3c5c7836233b70edc442c80 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 14 Apr 2024 17:07:40 -0500
Subject: [PATCH] Implement styling improvements

---
 .../ft-icon-button/ft-icon-button.scss          |  4 ++--
 .../components/playlist-info/playlist-info.scss |  8 ++++----
 .../watch-video-info/watch-video-info.scss      |  3 +++
 .../watch-video-info/watch-video-info.vue       | 17 +++++++++--------
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 9451d2eb4..a01982fa9 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -96,7 +96,7 @@
   &:has(.iconButtonLabel) {
     border-radius: 18px;
     padding-inline: 5px;
-    max-inline-size: 105px;
+    inline-size: 105px;
 
     .iconButton {
       padding-block: 0.5em;
@@ -109,7 +109,7 @@
     padding-inline: 2px 5px;
     font-size: 14px;
     font-weight: 500;
-    text-align: center;
+    text-align: start;
     -webkit-line-clamp: 2;
     display: -webkit-box;
     -webkit-box-orient: vertical;
diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
index 8bf11cf08..0bc5a188d 100644
--- a/src/renderer/components/playlist-info/playlist-info.scss
+++ b/src/renderer/components/playlist-info/playlist-info.scss
@@ -67,10 +67,10 @@
 }
 
 .playlistOptions {
-  display: grid;
-  grid-auto-flow: column;
-  column-gap: 8px;
-  justify-content: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
 }
 
 .searchInputsRow {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 09177b58d..14915ac6d 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -67,6 +67,9 @@
 
     @media screen and (max-width: 460px) {
       flex-wrap: nowrap;
+      max-inline-size: 100vw;
+      overflow-x: scroll;
+      justify-content: flex-start;
       :deep(.iconDropdown) {
         inset-inline-start: auto;
         inset-inline-end: auto;
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index bec66755e..f79b93859 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -100,6 +100,15 @@
           :theme="quickBookmarkIconTheme"
           @click="toggleQuickBookmarked"
         />
+        <ft-icon-button
+          v-if="externalPlayer !== ''"
+          :title="$t('Video.External Player.OpenInTemplate', { externalPlayer })"
+          :icon="['fas', 'external-link-alt']"
+          :hide-label="true"
+          class="option"
+          theme="secondary"
+          @click="handleExternalPlayer"
+        />
         <ft-share-button
           v-if="!hideSharingActions"
           :id="id"
@@ -107,14 +116,6 @@
           :playlist-id="playlistId"
           class="option"
         />
-        <ft-icon-button
-          v-if="externalPlayer !== ''"
-          :title="$t('Video.External Player.OpenInTemplate', { externalPlayer })"
-          :icon="['fas', 'external-link-alt']"
-          class="option"
-          theme="secondary"
-          @click="handleExternalPlayer"
-        />
         <ft-icon-button
           v-if="!isUpcoming && downloadLinks.length > 0"
           ref="downloadButton"