From 96b2410bcc1af1ad680f9decd107b9608f044d67 Mon Sep 17 00:00:00 2001
From: pkrasicki <pkrasicki@protonmail.com>
Date: Wed, 11 Oct 2023 12:36:02 +0000
Subject: [PATCH 1/3] Add setting to enable full-width layout

Implements #3918
---
 src/renderer/App.js                                  |  4 ++++
 src/renderer/{App.css => App.scss}                   | 12 ++++++++++++
 src/renderer/App.vue                                 |  4 +++-
 .../ft-profile-channel-list.js                       |  3 +++
 ...channel-list.css => ft-profile-channel-list.scss} |  5 ++++-
 .../ft-profile-channel-list.vue                      |  4 ++--
 .../components/ft-profile-edit/ft-profile-edit.js    |  3 +++
 .../{ft-profile-edit.css => ft-profile-edit.scss}    |  7 +++++--
 .../components/ft-profile-edit/ft-profile-edit.vue   |  4 ++--
 .../ft-profile-filter-channels-list.js               |  3 +++
 ...list.css => ft-profile-filter-channels-list.scss} |  5 ++++-
 .../ft-profile-filter-channels-list.vue              |  4 ++--
 .../components/password-dialog/password-dialog.js    |  3 +++
 .../{password-dialog.css => password-dialog.scss}    |  5 ++++-
 .../components/password-dialog/password-dialog.vue   |  3 ++-
 .../components/theme-settings/theme-settings.js      |  7 ++++++-
 .../components/theme-settings/theme-settings.vue     |  6 ++++++
 src/renderer/store/modules/settings.js               |  1 +
 src/renderer/views/About/About.js                    |  5 +++++
 src/renderer/views/About/About.scss                  |  9 ++++++---
 src/renderer/views/About/About.vue                   |  2 +-
 src/renderer/views/Channel/Channel.js                |  4 ++++
 .../views/Channel/{Channel.css => Channel.scss}      | 12 +++++++++---
 src/renderer/views/Channel/Channel.vue               |  8 ++++----
 src/renderer/views/Hashtag/Hashtag.js                |  4 ++++
 .../views/Hashtag/{Hashtag.css => Hashtag.scss}      |  7 +++++--
 src/renderer/views/Hashtag/Hashtag.vue               |  3 ++-
 src/renderer/views/History/History.js                |  4 ++++
 .../UserPlaylists.css => History/History.scss}       |  7 +++++--
 src/renderer/views/History/History.vue               |  3 ++-
 src/renderer/views/Popular/Popular.js                |  4 ++++
 .../views/Popular/{Popular.css => Popular.scss}      |  7 +++++--
 src/renderer/views/Popular/Popular.vue               |  3 ++-
 .../views/ProfileSettings/ProfileSettings.js         |  4 ++++
 .../{ProfileSettings.css => ProfileSettings.scss}    |  7 +++++--
 .../views/ProfileSettings/ProfileSettings.vue        |  4 ++--
 src/renderer/views/Search/Search.js                  |  4 ++++
 .../views/Search/{Search.css => Search.scss}         |  7 +++++--
 src/renderer/views/Search/Search.vue                 |  3 ++-
 .../views/SubscribedChannels/SubscribedChannels.js   |  4 ++++
 ...ubscribedChannels.css => SubscribedChannels.scss} |  7 +++++--
 .../views/SubscribedChannels/SubscribedChannels.vue  |  4 ++--
 src/renderer/views/Subscriptions/Subscriptions.js    |  4 ++++
 .../{Subscriptions.css => Subscriptions.scss}        |  7 +++++--
 src/renderer/views/Subscriptions/Subscriptions.vue   |  4 ++--
 src/renderer/views/Trending/Trending.js              |  3 +++
 .../views/Trending/{Trending.css => Trending.scss}   |  7 +++++--
 src/renderer/views/Trending/Trending.vue             |  3 ++-
 src/renderer/views/UserPlaylists/UserPlaylists.js    |  4 ++++
 .../History.css => UserPlaylists/UserPlaylists.scss} |  7 +++++--
 src/renderer/views/UserPlaylists/UserPlaylists.vue   |  3 ++-
 static/locales/en-US.yaml                            |  1 +
 static/locales/en_GB.yaml                            |  1 +
 53 files changed, 198 insertions(+), 55 deletions(-)
 rename src/renderer/{App.css => App.scss} (87%)
 rename src/renderer/components/ft-profile-channel-list/{ft-profile-channel-list.css => ft-profile-channel-list.scss} (53%)
 rename src/renderer/components/ft-profile-edit/{ft-profile-edit.css => ft-profile-edit.scss} (90%)
 rename src/renderer/components/ft-profile-filter-channels-list/{ft-profile-filter-channels-list.css => ft-profile-filter-channels-list.scss} (79%)
 rename src/renderer/components/password-dialog/{password-dialog.css => password-dialog.scss} (65%)
 rename src/renderer/views/Channel/{Channel.css => Channel.scss} (97%)
 rename src/renderer/views/Hashtag/{Hashtag.css => Hashtag.scss} (85%)
 rename src/renderer/views/{UserPlaylists/UserPlaylists.css => History/History.scss} (70%)
 rename src/renderer/views/Popular/{Popular.css => Popular.scss} (81%)
 rename src/renderer/views/ProfileSettings/{ProfileSettings.css => ProfileSettings.scss} (78%)
 rename src/renderer/views/Search/{Search.css => Search.scss} (85%)
 rename src/renderer/views/SubscribedChannels/{SubscribedChannels.css => SubscribedChannels.scss} (94%)
 rename src/renderer/views/Subscriptions/{Subscriptions.css => Subscriptions.scss} (89%)
 rename src/renderer/views/Trending/{Trending.css => Trending.scss} (91%)
 rename src/renderer/views/{History/History.css => UserPlaylists/UserPlaylists.scss} (70%)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index ea50ffe27bc2b..82678b90d3098 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -121,6 +121,10 @@ export default defineComponent({
 
     externalLinkHandling: function () {
       return this.$store.getters.getExternalLinkHandling
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/App.css b/src/renderer/App.scss
similarity index 87%
rename from src/renderer/App.css
rename to src/renderer/App.scss
index 90fc87ab4938e..f5520bb0de4d3 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.scss
@@ -14,6 +14,10 @@
   flex: 1 1 0%;
   margin-block: 18px;
   margin-inline: 10px;
+
+  &.fullWidth {
+    margin-block: 5px;
+  }
 }
 
 .banner {
@@ -50,6 +54,10 @@
   .routerView {
     margin-block: 68px;
     margin-inline: 8px;
+
+    &.fullWidth {
+      margin-block: 68px;
+    }
   }
 
   .banner {
@@ -60,5 +68,9 @@
   .flexBox {
     margin-block-start: 60px;
     margin-block-end: -75px;
+
+    &.fullWidth {
+      margin-block-start: 0;
+    }
   }
 }
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index e0394fae9711b..22291e1b6030a 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -11,6 +11,7 @@
     <side-nav ref="sideNav" />
     <ft-flex-box
       class="flexBox routerView"
+      :class="{ fullWidth: useFullWidthLayout }"
       role="main"
     >
       <div
@@ -41,6 +42,7 @@
         <RouterView
           ref="router"
           class="routerView"
+          :class="{ fullWidth: useFullWidthLayout }"
         />
       <!-- </keep-alive> -->
       </transition>
@@ -85,4 +87,4 @@
 
 <style src="./themes.css" />
 <style src="./videoJS.css" />
-<style scoped src="./App.css" />
+<style scoped src="./App.scss" lang="scss" />
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
index 971382b0f0398..6c58b42f9e7cb 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
@@ -68,6 +68,9 @@ export default defineComponent({
     locale: function () {
       return this.$i18n.locale.replace('_', '-')
     },
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
+    }
   },
   watch: {
     profile: function () {
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss
similarity index 53%
rename from src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
rename to src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss
index 9071f57d38cc2..d988a859af37f 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss
@@ -1,5 +1,8 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 15px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
index 287ba452bcb5d..80f530bcc6e0f 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card">
+    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
       <h2>
         {{ $t("Profile.Subscription List") }}
       </h2>
@@ -47,4 +47,4 @@
 </template>
 
 <script src="./ft-profile-channel-list.js" />
-<style scoped src="./ft-profile-channel-list.css" />
+<style scoped src="./ft-profile-channel-list.scss" lang="scss" />
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.js b/src/renderer/components/ft-profile-edit/ft-profile-edit.js
index e6f4eddce3607..aefdab1102fe4 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.js
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.js
@@ -65,6 +65,9 @@ export default defineComponent({
         this.$t('Yes'),
         this.$t('No')
       ]
+    },
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.css b/src/renderer/components/ft-profile-edit/ft-profile-edit.scss
similarity index 90%
rename from src/renderer/components/ft-profile-edit/ft-profile-edit.css
rename to src/renderer/components/ft-profile-edit/ft-profile-edit.scss
index dc77c5077ecfb..cdc936f53b8af 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.scss
@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 15px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .message {
@@ -42,7 +45,7 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     inline-size: 90%;
   }
 }
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
index 6d17bcd3cb0f7..ab797f6732c77 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card">
+    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
       <h2>{{ $t("Profile.Edit Profile") }}</h2>
       <ft-flex-box>
         <ft-input
@@ -102,4 +102,4 @@
 </template>
 
 <script src="./ft-profile-edit.js" />
-<style scoped src="./ft-profile-edit.css" />
+<style scoped src="./ft-profile-edit.scss" lang="scss" />
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
index aecb99f49ebb6..9d4261dea6255 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
@@ -50,6 +50,9 @@ export default defineComponent({
     locale: function () {
       return this.$i18n.locale.replace('_', '-')
     },
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
+    }
   },
   watch: {
     profile: 'updateChannelList',
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss
similarity index 79%
rename from src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
rename to src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss
index 966b1fa8cfc4d..563b46d6e1e0c 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss
@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 30px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .selected {
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
index faa2c61aaff6a..a8b832a690e59 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card">
+    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
       <h2>
         {{ $t("Profile.Other Channels") }}
       </h2>
@@ -49,4 +49,4 @@
 </template>
 
 <script src="./ft-profile-filter-channels-list.js" />
-<style scoped src="./ft-profile-filter-channels-list.css" />
+<style scoped src="./ft-profile-filter-channels-list.scss" lang="scss" />
diff --git a/src/renderer/components/password-dialog/password-dialog.js b/src/renderer/components/password-dialog/password-dialog.js
index ed4b5e99cafe3..a58d6aa5a1450 100644
--- a/src/renderer/components/password-dialog/password-dialog.js
+++ b/src/renderer/components/password-dialog/password-dialog.js
@@ -12,6 +12,9 @@ export default defineComponent({
   computed: {
     settingsPassword: function () {
       return this.$store.getters.getSettingsPassword
+    },
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   mounted: function () {
diff --git a/src/renderer/components/password-dialog/password-dialog.css b/src/renderer/components/password-dialog/password-dialog.scss
similarity index 65%
rename from src/renderer/components/password-dialog/password-dialog.css
rename to src/renderer/components/password-dialog/password-dialog.scss
index cf547ceed9048..c69f279fe63f1 100644
--- a/src/renderer/components/password-dialog/password-dialog.css
+++ b/src/renderer/components/password-dialog/password-dialog.scss
@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin: auto;
   box-sizing: border-box;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .passwordInput {
diff --git a/src/renderer/components/password-dialog/password-dialog.vue b/src/renderer/components/password-dialog/password-dialog.vue
index 89858f2106e8a..3520544735e2e 100644
--- a/src/renderer/components/password-dialog/password-dialog.vue
+++ b/src/renderer/components/password-dialog/password-dialog.vue
@@ -1,6 +1,7 @@
 <template>
   <ft-card
     class="card"
+    :class="{ fullWidth: useFullWidthLayout }"
   >
     <h3>{{ $t("Settings.Password Dialog.Enter Password To Unlock") }}</h3>
 
@@ -16,4 +17,4 @@
 </template>
 
 <script src="./password-dialog.js" />
-<style scoped src="./password-dialog.css" />
+<style scoped src="./password-dialog.scss" lang="scss" />
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index 090a6dc8984cf..2804c58607b8b 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -82,6 +82,10 @@ export default defineComponent({
       return this.$store.getters.getHideHeaderLogo
     },
 
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
+    },
+
     restartPromptMessage: function () {
       return this.$t('Settings["The app needs to restart for changes to take effect. Restart and apply change?"]')
     },
@@ -168,7 +172,8 @@ export default defineComponent({
       'updateUiScale',
       'updateDisableSmoothScrolling',
       'updateHideLabelsSideBar',
-      'updateHideHeaderLogo'
+      'updateHideHeaderLogo',
+      'updateUseFullWidthLayout'
     ])
   }
 })
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
index 27cd6d8589c80..9b465df5a44d2 100644
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -37,6 +37,12 @@
           :default-value="hideHeaderLogo"
           @change="updateHideHeaderLogo"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Theme Settings.Use Full-Width Layout')"
+          :compact="true"
+          :default-value="useFullWidthLayout"
+          @change="updateUseFullWidthLayout"
+        />
       </div>
     </div>
     <ft-flex-box>
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index ba2ff912b1218..f0884c7379998 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -297,6 +297,7 @@ const state = {
   allowDashAv1Formats: false,
   commentAutoLoadEnabled: false,
   useDeArrowTitles: false,
+  useFullWidthLayout: false,
 }
 
 const stateWithSideEffects = {
diff --git a/src/renderer/views/About/About.js b/src/renderer/views/About/About.js
index 0605cffd2f338..dc04ede07a24a 100644
--- a/src/renderer/views/About/About.js
+++ b/src/renderer/views/About/About.js
@@ -83,5 +83,10 @@ export default defineComponent({
         }
       ]
     }
+  },
+  computed: {
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
+    }
   }
 })
diff --git a/src/renderer/views/About/About.scss b/src/renderer/views/About/About.scss
index 0272d7628b06f..ba0bae5ee0b6d 100644
--- a/src/renderer/views/About/About.scss
+++ b/src/renderer/views/About/About.scss
@@ -1,10 +1,13 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-  inline-size: 85%;
 
-  @media only screen and (max-width: 680px) {
-    inline-size: 90%;
+  &:not(.fullWidth) {
+    inline-size: 85%;
+
+    @media only screen and (max-width: 680px) {
+      inline-size: 90%;
+    }
   }
 }
 
diff --git a/src/renderer/views/About/About.vue b/src/renderer/views/About/About.vue
index 4812fcb554585..e031d60befe58 100644
--- a/src/renderer/views/About/About.vue
+++ b/src/renderer/views/About/About.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card">
+    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
       <h1>
         {{ $t("About.About") }}
       </h1>
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index 1cec8b70de184..1a80ee1f52e30 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -288,6 +288,10 @@ export default defineComponent({
       })
 
       return values
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.scss
similarity index 97%
rename from src/renderer/views/Channel/Channel.css
rename to src/renderer/views/Channel/Channel.scss
index 3852c84b5fd5d..7806040ecc04e 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.scss
@@ -1,14 +1,20 @@
 .card {
   position: relative;
-  inline-size: 85%;
   margin-block: 0 20px;
   margin-inline: auto;
   box-sizing: border-box;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .channelDetails {
   padding: 0;
-  max-inline-size: 92vw;
+
+  &:not(.fullWidth) {
+    max-inline-size: 92vw;
+  }
 }
 
 .channelBannerContainer {
@@ -237,7 +243,7 @@
 }
 
 @media only screen and (max-width: 260px) {
-   .channelDetails {
+  .channelDetails {
     max-inline-size: none;
   }
 }
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index f8cfb0b5c6ed8..21f4ed292c02d 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -8,7 +8,7 @@
     />
     <ft-card
       v-else-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
-      class="card channelDetails"
+      class="card channelDetails" :class="{ fullWidth: useFullWidthLayout }"
     >
       <div
         class="channelBannerContainer"
@@ -216,7 +216,7 @@
     </ft-card>
     <ft-card
       v-if="!isLoading && !errorMessage && (isFamilyFriendly || !showFamilyFriendlyOnly)"
-      class="card"
+      class="card" :class="{ fullWidth: useFullWidthLayout }"
     >
       <channel-about
         v-if="currentTab === 'about'"
@@ -409,7 +409,7 @@
     </ft-card>
     <ft-card
       v-if="errorMessage"
-      class="card"
+      class="card" :class="{ fullWidth: useFullWidthLayout }"
     >
       <p>
         {{ errorMessage }}
@@ -424,4 +424,4 @@
 </template>
 
 <script src="./Channel.js" />
-<style scoped src="./Channel.css" />
+<style scoped src="./Channel.scss" lang="scss" />
diff --git a/src/renderer/views/Hashtag/Hashtag.js b/src/renderer/views/Hashtag/Hashtag.js
index 61d0b8bead220..d1e06f73f727c 100644
--- a/src/renderer/views/Hashtag/Hashtag.js
+++ b/src/renderer/views/Hashtag/Hashtag.js
@@ -38,6 +38,10 @@ export default defineComponent({
 
     showFetchMoreButton() {
       return !isNullOrEmpty(this.hashtagContinuationData) || this.apiUsed === 'invidious'
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/Hashtag/Hashtag.css b/src/renderer/views/Hashtag/Hashtag.scss
similarity index 85%
rename from src/renderer/views/Hashtag/Hashtag.css
rename to src/renderer/views/Hashtag/Hashtag.scss
index 8dd30434746de..58f09b5dd5cf9 100644
--- a/src/renderer/views/Hashtag/Hashtag.css
+++ b/src/renderer/views/Hashtag/Hashtag.scss
@@ -16,11 +16,14 @@
 .card {
   margin-block: 0 20px;
   margin-inline: auto;
-  inline-size: 85%;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     inline-size: 90%;
   }
 }
diff --git a/src/renderer/views/Hashtag/Hashtag.vue b/src/renderer/views/Hashtag/Hashtag.vue
index 8e4b92fe8716f..d3a83174b747e 100644
--- a/src/renderer/views/Hashtag/Hashtag.vue
+++ b/src/renderer/views/Hashtag/Hashtag.vue
@@ -7,6 +7,7 @@
     <ft-card
       v-else
       class="card"
+      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ hashtag }}</h2>
       <ft-element-list
@@ -37,4 +38,4 @@
   </div>
 </template>
 <script src="./Hashtag.js" />
-<style scoped src="./Hashtag.css" />
+<style scoped src="./Hashtag.scss" lang="scss" />
diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js
index ffa871ea23886..22e456409a152 100644
--- a/src/renderer/views/History/History.js
+++ b/src/renderer/views/History/History.js
@@ -38,6 +38,10 @@ export default defineComponent({
       } else {
         return this.historyCacheSorted.slice(0, this.dataLimit)
       }
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.css b/src/renderer/views/History/History.scss
similarity index 70%
rename from src/renderer/views/UserPlaylists/UserPlaylists.css
rename to src/renderer/views/History/History.scss
index 8885b1123ddfb..c0d12ce3a23ef 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.css
+++ b/src/renderer/views/History/History.scss
@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .message {
@@ -9,7 +12,7 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     inline-size: 90%;
   }
 }
diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue
index 25a0758ca9274..752ea7ffb7052 100644
--- a/src/renderer/views/History/History.vue
+++ b/src/renderer/views/History/History.vue
@@ -7,6 +7,7 @@
     <ft-card
       v-show="!isLoading"
       class="card"
+      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("History.History") }}</h2>
       <ft-input
@@ -53,4 +54,4 @@
 </template>
 
 <script src="./History.js" />
-<style scoped src="./History.css" />
+<style scoped src="./History.scss" lang="scss" />
diff --git a/src/renderer/views/Popular/Popular.js b/src/renderer/views/Popular/Popular.js
index 08a1a893ca8ae..a628c9778f9bf 100644
--- a/src/renderer/views/Popular/Popular.js
+++ b/src/renderer/views/Popular/Popular.js
@@ -24,6 +24,10 @@ export default defineComponent({
   computed: {
     popularCache: function () {
       return this.$store.getters.getPopularCache
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   mounted: function () {
diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.scss
similarity index 81%
rename from src/renderer/views/Popular/Popular.css
rename to src/renderer/views/Popular/Popular.scss
index 8625c77b4f8df..a456956b99b59 100644
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.scss
@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .floatingTopButton {
@@ -17,7 +20,7 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     inline-size: 90%;
   }
 }
diff --git a/src/renderer/views/Popular/Popular.vue b/src/renderer/views/Popular/Popular.vue
index ea86d813e4dd8..371fa93a8fa1f 100644
--- a/src/renderer/views/Popular/Popular.vue
+++ b/src/renderer/views/Popular/Popular.vue
@@ -7,6 +7,7 @@
     <ft-card
       v-else
       class="card"
+      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("Most Popular") }}</h2>
       <ft-element-list
@@ -25,4 +26,4 @@
 </template>
 
 <script src="./Popular.js" />
-<style scoped src="./Popular.css" />
+<style scoped src="./Popular.scss" lang="scss" />
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.js b/src/renderer/views/ProfileSettings/ProfileSettings.js
index 0324f46087cc3..881323c9910bf 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.js
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.js
@@ -15,6 +15,10 @@ export default defineComponent({
   computed: {
     profileList: function () {
       return this.$store.getters.getProfileList
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   methods: {
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.css b/src/renderer/views/ProfileSettings/ProfileSettings.scss
similarity index 78%
rename from src/renderer/views/ProfileSettings/ProfileSettings.css
rename to src/renderer/views/ProfileSettings/ProfileSettings.scss
index 6a6ef39e2dba5..f6f9a809046a8 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.css
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.scss
@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .message {
@@ -15,7 +18,7 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     inline-size: 90%;
   }
 }
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.vue b/src/renderer/views/ProfileSettings/ProfileSettings.vue
index 4ddcefc174361..1c13e6bf403b4 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.vue
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card">
+    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
       <h2>{{ $t("Profile.Profile Manager") }}</h2>
       <ft-flex-box
         class="profileList"
@@ -25,4 +25,4 @@
 </template>
 
 <script src="./ProfileSettings.js" />
-<style scoped src="./ProfileSettings.css" />
+<style scoped src="./ProfileSettings.scss" lang="scss" />
diff --git a/src/renderer/views/Search/Search.js b/src/renderer/views/Search/Search.js
index e888af50bff33..99c29b7627062 100644
--- a/src/renderer/views/Search/Search.js
+++ b/src/renderer/views/Search/Search.js
@@ -40,6 +40,10 @@ export default defineComponent({
 
     showFamilyFriendlyOnly: function() {
       return this.$store.getters.getShowFamilyFriendlyOnly
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.scss
similarity index 85%
rename from src/renderer/views/Search/Search.css
rename to src/renderer/views/Search/Search.scss
index aeaa95da9bc44..6e09786a38dc8 100644
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.scss
@@ -14,13 +14,16 @@
 }
 
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     inline-size: 90%;
   }
 }
diff --git a/src/renderer/views/Search/Search.vue b/src/renderer/views/Search/Search.vue
index 7d7a98dc9153c..aefe4e7b6d5d1 100644
--- a/src/renderer/views/Search/Search.vue
+++ b/src/renderer/views/Search/Search.vue
@@ -9,6 +9,7 @@
     <ft-card
       v-else
       class="card"
+      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("Search Filters.Search Results") }}</h2>
       <ft-element-list
@@ -29,4 +30,4 @@
 </template>
 
 <script src="./Search.js" />
-<style scoped src="./Search.css" />
+<style scoped src="./Search.scss" lang="scss" />
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.js b/src/renderer/views/SubscribedChannels/SubscribedChannels.js
index 0022240632d9e..a03e6b342b109 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.js
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.js
@@ -64,6 +64,10 @@ export default defineComponent({
 
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.scss
similarity index 94%
rename from src/renderer/views/SubscribedChannels/SubscribedChannels.css
rename to src/renderer/views/SubscribedChannels/SubscribedChannels.scss
index 70798e8ce2e62..c575de89f4482 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.scss
@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .message {
@@ -67,7 +70,7 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     inline-size: 90%;
   }
 
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
index 88b8ad36cd552..dd666447ff894 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card">
+    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
       <h2>{{ $t('Channels.Title') }}</h2>
       <ft-input
         v-show="subscribedChannels.length > 0"
@@ -66,4 +66,4 @@
 </template>
 
 <script src="./SubscribedChannels.js" />
-<style scoped src="./SubscribedChannels.css" />
+<style scoped src="./SubscribedChannels.scss" lang="scss" />
diff --git a/src/renderer/views/Subscriptions/Subscriptions.js b/src/renderer/views/Subscriptions/Subscriptions.js
index c36ff32cda7a5..6fee6785da35c 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.js
+++ b/src/renderer/views/Subscriptions/Subscriptions.js
@@ -68,6 +68,10 @@ export default defineComponent({
       }
 
       return tabs
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.scss
similarity index 89%
rename from src/renderer/views/Subscriptions/Subscriptions.css
rename to src/renderer/views/Subscriptions/Subscriptions.scss
index 66ff34fe8a104..b91efd5badc2f 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.scss
@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .message {
@@ -36,7 +39,7 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     inline-size: 90%;
   }
 }
diff --git a/src/renderer/views/Subscriptions/Subscriptions.vue b/src/renderer/views/Subscriptions/Subscriptions.vue
index 0ff44aa1c6a24..1003753ddd6a0 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.vue
+++ b/src/renderer/views/Subscriptions/Subscriptions.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card">
+    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
       <h2>{{ $t("Subscriptions.Subscriptions") }}</h2>
       <ft-flex-box
         class="subscriptionTabs"
@@ -103,4 +103,4 @@
 </template>
 
 <script src="./Subscriptions.js" />
-<style scoped src="./Subscriptions.css" />
+<style scoped src="./Subscriptions.scss" lang="scss" />
diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js
index d308c9c88c7ff..0c6a681aaaa0b 100644
--- a/src/renderer/views/Trending/Trending.js
+++ b/src/renderer/views/Trending/Trending.js
@@ -39,6 +39,9 @@ export default defineComponent({
     },
     trendingCache () {
       return this.$store.getters.getTrendingCache
+    },
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   mounted: function () {
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.scss
similarity index 91%
rename from src/renderer/views/Trending/Trending.css
rename to src/renderer/views/Trending/Trending.scss
index a973f9088dd8e..dac92c840509e 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.scss
@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .floatingTopButton {
@@ -46,7 +49,7 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     inline-size: 90%;
   }
 }
diff --git a/src/renderer/views/Trending/Trending.vue b/src/renderer/views/Trending/Trending.vue
index 8b244d5482472..1090b094c4ad4 100644
--- a/src/renderer/views/Trending/Trending.vue
+++ b/src/renderer/views/Trending/Trending.vue
@@ -7,6 +7,7 @@
     <ft-card
       v-else
       class="card"
+      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("Trending.Trending") }}</h2>
       <ft-flex-box
@@ -97,4 +98,4 @@
 </template>
 
 <script src="./Trending.js" />
-<style scoped src="./Trending.css" />
+<style scoped src="./Trending.scss" lang="scss" />
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.js b/src/renderer/views/UserPlaylists/UserPlaylists.js
index b3477dbc13657..533119c23492a 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.js
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.js
@@ -41,6 +41,10 @@ export default defineComponent({
       } else {
         return data.slice(0, this.dataLimit)
       }
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/History/History.css b/src/renderer/views/UserPlaylists/UserPlaylists.scss
similarity index 70%
rename from src/renderer/views/History/History.css
rename to src/renderer/views/UserPlaylists/UserPlaylists.scss
index 8885b1123ddfb..c0d12ce3a23ef 100644
--- a/src/renderer/views/History/History.css
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.scss
@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .message {
@@ -9,7 +12,7 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     inline-size: 90%;
   }
 }
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.vue b/src/renderer/views/UserPlaylists/UserPlaylists.vue
index 1fb061fbf6c7c..8fc80c6989786 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.vue
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.vue
@@ -7,6 +7,7 @@
     <ft-card
       v-show="!isLoading"
       class="card"
+      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>
         {{ $t("User Playlists.Your Playlists") }}
@@ -59,4 +60,4 @@
 </template>
 
 <script src="./UserPlaylists.js" />
-<style scoped src="./UserPlaylists.css" />
+<style scoped src="./UserPlaylists.scss" lang="scss" />
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 81d442062e63b..ae0942ae4a73c 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -200,6 +200,7 @@ Settings:
     UI Scale: UI Scale
     Hide Side Bar Labels: Hide Side Bar Labels
     Hide FreeTube Header Logo: Hide FreeTube Header Logo
+    Use Full-Width Layout: Use Full-Width Layout
     Base Theme:
       Base Theme: Base Theme
       Black: Black
diff --git a/static/locales/en_GB.yaml b/static/locales/en_GB.yaml
index 5ba44273f966c..83587bf1e9d8a 100644
--- a/static/locales/en_GB.yaml
+++ b/static/locales/en_GB.yaml
@@ -241,6 +241,7 @@ Settings:
     Expand Side Bar by Default: Expand side bar by default
     Hide Side Bar Labels: Hide side bar labels
     Hide FreeTube Header Logo: Hide FreeTube Header Logo
+    Use Full-Width Layout: Use Full-Width Layout
   Player Settings:
     Player Settings: 'Player Settings'
     Force Local Backend for Legacy Formats: 'Force Local Back-end for Legacy Formats'

From 7da85e49bdccf07aa6936bc906eb512fd5cfd6f5 Mon Sep 17 00:00:00 2001
From: pkrasicki <pkrasicki@protonmail.com>
Date: Sat, 25 Nov 2023 12:00:06 +0000
Subject: [PATCH 2/3] Move changes to card component

---
 src/renderer/components/ft-card/ft-card.css     |  7 -------
 src/renderer/components/ft-card/ft-card.js      | 13 ++++++++++++-
 src/renderer/components/ft-card/ft-card.scss    | 17 +++++++++++++++++
 src/renderer/components/ft-card/ft-card.vue     |  3 ++-
 .../ft-profile-channel-list.js                  |  3 ---
 .../ft-profile-channel-list.scss                |  4 ----
 .../ft-profile-channel-list.vue                 |  5 ++++-
 .../ft-profile-edit/ft-profile-edit.js          |  3 ---
 .../ft-profile-edit/ft-profile-edit.scss        | 10 ----------
 .../ft-profile-edit/ft-profile-edit.vue         |  5 ++++-
 .../ft-profile-filter-channels-list.js          |  3 ---
 .../ft-profile-filter-channels-list.scss        |  4 ----
 .../ft-profile-filter-channels-list.vue         |  5 ++++-
 .../password-dialog/password-dialog.js          |  3 ---
 .../password-dialog/password-dialog.scss        |  4 ----
 .../password-dialog/password-dialog.vue         |  1 -
 src/renderer/views/About/About.js               |  5 -----
 src/renderer/views/About/About.scss             |  8 --------
 src/renderer/views/About/About.vue              |  5 ++++-
 src/renderer/views/Channel/Channel.scss         |  4 ----
 src/renderer/views/Channel/Channel.vue          | 10 +++++++---
 src/renderer/views/Hashtag/Hashtag.js           |  4 ----
 src/renderer/views/Hashtag/Hashtag.scss         | 10 ----------
 src/renderer/views/Hashtag/Hashtag.vue          |  2 +-
 src/renderer/views/History/History.js           |  4 ----
 src/renderer/views/History/History.scss         | 12 +-----------
 src/renderer/views/History/History.vue          |  2 +-
 src/renderer/views/Popular/Popular.js           |  4 ----
 src/renderer/views/Popular/Popular.scss         | 12 +-----------
 src/renderer/views/Popular/Popular.vue          |  2 +-
 .../views/ProfileSettings/ProfileSettings.js    |  4 ----
 .../views/ProfileSettings/ProfileSettings.scss  | 12 +-----------
 .../views/ProfileSettings/ProfileSettings.vue   |  2 +-
 src/renderer/views/Search/Search.js             |  4 ----
 src/renderer/views/Search/Search.scss           | 12 +-----------
 src/renderer/views/Search/Search.vue            |  2 +-
 .../SubscribedChannels/SubscribedChannels.js    |  4 ----
 .../SubscribedChannels/SubscribedChannels.scss  |  8 --------
 .../SubscribedChannels/SubscribedChannels.vue   |  5 ++++-
 .../views/Subscriptions/Subscriptions.js        |  4 ----
 .../views/Subscriptions/Subscriptions.scss      | 10 ----------
 .../views/Subscriptions/Subscriptions.vue       |  5 ++++-
 src/renderer/views/Trending/Trending.js         |  3 ---
 src/renderer/views/Trending/Trending.scss       | 10 ----------
 src/renderer/views/Trending/Trending.vue        |  2 +-
 .../views/UserPlaylists/UserPlaylists.js        |  4 ----
 .../views/UserPlaylists/UserPlaylists.scss      | 10 ----------
 .../views/UserPlaylists/UserPlaylists.vue       |  2 +-
 48 files changed, 73 insertions(+), 204 deletions(-)
 delete mode 100644 src/renderer/components/ft-card/ft-card.css
 create mode 100644 src/renderer/components/ft-card/ft-card.scss

diff --git a/src/renderer/components/ft-card/ft-card.css b/src/renderer/components/ft-card/ft-card.css
deleted file mode 100644
index b9ef73f8b7f41..0000000000000
--- a/src/renderer/components/ft-card/ft-card.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.ft-card {
-  background-color: var(--card-bg-color);
-  margin: 8px;
-  padding-block: 3px 16px;
-  padding-inline: 16px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
-}
diff --git a/src/renderer/components/ft-card/ft-card.js b/src/renderer/components/ft-card/ft-card.js
index 29d02d72472a2..8075ef4c6387b 100644
--- a/src/renderer/components/ft-card/ft-card.js
+++ b/src/renderer/components/ft-card/ft-card.js
@@ -1,5 +1,16 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'FtCard'
+  name: 'FtCard',
+  props: {
+    big: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
+    }
+  }
 })
diff --git a/src/renderer/components/ft-card/ft-card.scss b/src/renderer/components/ft-card/ft-card.scss
new file mode 100644
index 0000000000000..fd586793de389
--- /dev/null
+++ b/src/renderer/components/ft-card/ft-card.scss
@@ -0,0 +1,17 @@
+.ft-card {
+  background-color: var(--card-bg-color);
+  margin: 8px;
+  padding-block: 3px 16px;
+  padding-inline: 16px;
+  box-shadow: 0 1px 2px rgba(0,0,0,.1);
+
+  &.big:not(.fullWidth) {
+    inline-size: 85%;
+  }
+
+  @media only screen and (max-width: 680px) {
+    &.big:not(.fullWidth) {
+      inline-size: 90%;
+    }
+  }
+}
diff --git a/src/renderer/components/ft-card/ft-card.vue b/src/renderer/components/ft-card/ft-card.vue
index 641a0100f7366..e4716ed4abf54 100644
--- a/src/renderer/components/ft-card/ft-card.vue
+++ b/src/renderer/components/ft-card/ft-card.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="ft-card"
+    :class="{ fullWidth: useFullWidthLayout, big }"
     @focusout="$emit('focusout')"
   >
     <slot />
@@ -8,4 +9,4 @@
 </template>
 
 <script src="./ft-card.js" />
-<style scoped src="./ft-card.css" />
+<style scoped src="./ft-card.scss" lang="scss" />
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
index 6c58b42f9e7cb..986fbb7e27b07 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
@@ -67,9 +67,6 @@ export default defineComponent({
     },
     locale: function () {
       return this.$i18n.locale.replace('_', '-')
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss
index d988a859af37f..64d4733d5a91d 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss
@@ -1,8 +1,4 @@
 .card {
   margin-block: 0 15px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
index 80f530bcc6e0f..b1aed32075463 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>
         {{ $t("Profile.Subscription List") }}
       </h2>
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.js b/src/renderer/components/ft-profile-edit/ft-profile-edit.js
index aefdab1102fe4..e6f4eddce3607 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.js
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.js
@@ -65,9 +65,6 @@ export default defineComponent({
         this.$t('Yes'),
         this.$t('No')
       ]
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.scss b/src/renderer/components/ft-profile-edit/ft-profile-edit.scss
index cdc936f53b8af..792d958e444cf 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.scss
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 15px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
@@ -43,9 +39,3 @@
   user-select: none;
   -webkit-user-select: none;
 }
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
index ab797f6732c77..1969adea8c986 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>{{ $t("Profile.Edit Profile") }}</h2>
       <ft-flex-box>
         <ft-input
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
index 9d4261dea6255..fc576fcd19dcb 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
@@ -49,9 +49,6 @@ export default defineComponent({
     },
     locale: function () {
       return this.$i18n.locale.replace('_', '-')
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss
index 563b46d6e1e0c..f29b0fe8fd724 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 30px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .selected {
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
index a8b832a690e59..f81d9b82d1bd4 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>
         {{ $t("Profile.Other Channels") }}
       </h2>
diff --git a/src/renderer/components/password-dialog/password-dialog.js b/src/renderer/components/password-dialog/password-dialog.js
index a58d6aa5a1450..ed4b5e99cafe3 100644
--- a/src/renderer/components/password-dialog/password-dialog.js
+++ b/src/renderer/components/password-dialog/password-dialog.js
@@ -12,9 +12,6 @@ export default defineComponent({
   computed: {
     settingsPassword: function () {
       return this.$store.getters.getSettingsPassword
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   mounted: function () {
diff --git a/src/renderer/components/password-dialog/password-dialog.scss b/src/renderer/components/password-dialog/password-dialog.scss
index c69f279fe63f1..05e6d66ceda2a 100644
--- a/src/renderer/components/password-dialog/password-dialog.scss
+++ b/src/renderer/components/password-dialog/password-dialog.scss
@@ -1,10 +1,6 @@
 .card {
   margin: auto;
   box-sizing: border-box;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .passwordInput {
diff --git a/src/renderer/components/password-dialog/password-dialog.vue b/src/renderer/components/password-dialog/password-dialog.vue
index 3520544735e2e..2524c90acde74 100644
--- a/src/renderer/components/password-dialog/password-dialog.vue
+++ b/src/renderer/components/password-dialog/password-dialog.vue
@@ -1,7 +1,6 @@
 <template>
   <ft-card
     class="card"
-    :class="{ fullWidth: useFullWidthLayout }"
   >
     <h3>{{ $t("Settings.Password Dialog.Enter Password To Unlock") }}</h3>
 
diff --git a/src/renderer/views/About/About.js b/src/renderer/views/About/About.js
index dc04ede07a24a..0605cffd2f338 100644
--- a/src/renderer/views/About/About.js
+++ b/src/renderer/views/About/About.js
@@ -83,10 +83,5 @@ export default defineComponent({
         }
       ]
     }
-  },
-  computed: {
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
-    }
   }
 })
diff --git a/src/renderer/views/About/About.scss b/src/renderer/views/About/About.scss
index ba0bae5ee0b6d..e34ae03d64b62 100644
--- a/src/renderer/views/About/About.scss
+++ b/src/renderer/views/About/About.scss
@@ -1,14 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-
-    @media only screen and (max-width: 680px) {
-      inline-size: 90%;
-    }
-  }
 }
 
 .brand {
diff --git a/src/renderer/views/About/About.vue b/src/renderer/views/About/About.vue
index e031d60befe58..5b6dde53cc5fe 100644
--- a/src/renderer/views/About/About.vue
+++ b/src/renderer/views/About/About.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h1>
         {{ $t("About.About") }}
       </h1>
diff --git a/src/renderer/views/Channel/Channel.scss b/src/renderer/views/Channel/Channel.scss
index 7806040ecc04e..86dfda8617ae8 100644
--- a/src/renderer/views/Channel/Channel.scss
+++ b/src/renderer/views/Channel/Channel.scss
@@ -3,10 +3,6 @@
   margin-block: 0 20px;
   margin-inline: auto;
   box-sizing: border-box;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .channelDetails {
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index 21f4ed292c02d..bc81d6804ed80 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -8,7 +8,9 @@
     />
     <ft-card
       v-else-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
-      class="card channelDetails" :class="{ fullWidth: useFullWidthLayout }"
+      big
+      class="card channelDetails"
+      :class="{ fullWidth: useFullWidthLayout }"
     >
       <div
         class="channelBannerContainer"
@@ -216,7 +218,8 @@
     </ft-card>
     <ft-card
       v-if="!isLoading && !errorMessage && (isFamilyFriendly || !showFamilyFriendlyOnly)"
-      class="card" :class="{ fullWidth: useFullWidthLayout }"
+      big
+      class="card"
     >
       <channel-about
         v-if="currentTab === 'about'"
@@ -409,7 +412,8 @@
     </ft-card>
     <ft-card
       v-if="errorMessage"
-      class="card" :class="{ fullWidth: useFullWidthLayout }"
+      big
+      class="card"
     >
       <p>
         {{ errorMessage }}
diff --git a/src/renderer/views/Hashtag/Hashtag.js b/src/renderer/views/Hashtag/Hashtag.js
index d1e06f73f727c..61d0b8bead220 100644
--- a/src/renderer/views/Hashtag/Hashtag.js
+++ b/src/renderer/views/Hashtag/Hashtag.js
@@ -38,10 +38,6 @@ export default defineComponent({
 
     showFetchMoreButton() {
       return !isNullOrEmpty(this.hashtagContinuationData) || this.apiUsed === 'invidious'
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/Hashtag/Hashtag.scss b/src/renderer/views/Hashtag/Hashtag.scss
index 58f09b5dd5cf9..8cddd79654330 100644
--- a/src/renderer/views/Hashtag/Hashtag.scss
+++ b/src/renderer/views/Hashtag/Hashtag.scss
@@ -16,14 +16,4 @@
 .card {
   margin-block: 0 20px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
-}
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
 }
diff --git a/src/renderer/views/Hashtag/Hashtag.vue b/src/renderer/views/Hashtag/Hashtag.vue
index d3a83174b747e..354d85c2fd6b0 100644
--- a/src/renderer/views/Hashtag/Hashtag.vue
+++ b/src/renderer/views/Hashtag/Hashtag.vue
@@ -6,8 +6,8 @@
     />
     <ft-card
       v-else
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ hashtag }}</h2>
       <ft-element-list
diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js
index 22e456409a152..ffa871ea23886 100644
--- a/src/renderer/views/History/History.js
+++ b/src/renderer/views/History/History.js
@@ -38,10 +38,6 @@ export default defineComponent({
       } else {
         return this.historyCacheSorted.slice(0, this.dataLimit)
       }
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/History/History.scss b/src/renderer/views/History/History.scss
index c0d12ce3a23ef..e2bdbe32d1e43 100644
--- a/src/renderer/views/History/History.scss
+++ b/src/renderer/views/History/History.scss
@@ -1,18 +1,8 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
   color: var(--tertiary-text-color);
-}
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue
index 752ea7ffb7052..3be3cfe2c4306 100644
--- a/src/renderer/views/History/History.vue
+++ b/src/renderer/views/History/History.vue
@@ -6,8 +6,8 @@
     />
     <ft-card
       v-show="!isLoading"
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("History.History") }}</h2>
       <ft-input
diff --git a/src/renderer/views/Popular/Popular.js b/src/renderer/views/Popular/Popular.js
index a628c9778f9bf..08a1a893ca8ae 100644
--- a/src/renderer/views/Popular/Popular.js
+++ b/src/renderer/views/Popular/Popular.js
@@ -24,10 +24,6 @@ export default defineComponent({
   computed: {
     popularCache: function () {
       return this.$store.getters.getPopularCache
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   mounted: function () {
diff --git a/src/renderer/views/Popular/Popular.scss b/src/renderer/views/Popular/Popular.scss
index a456956b99b59..2e14f4ea3af88 100644
--- a/src/renderer/views/Popular/Popular.scss
+++ b/src/renderer/views/Popular/Popular.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .floatingTopButton {
@@ -17,10 +13,4 @@
   .floatingTopButton {
     position: absolute
   }
-}
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/renderer/views/Popular/Popular.vue b/src/renderer/views/Popular/Popular.vue
index 371fa93a8fa1f..32155970704fc 100644
--- a/src/renderer/views/Popular/Popular.vue
+++ b/src/renderer/views/Popular/Popular.vue
@@ -6,8 +6,8 @@
     />
     <ft-card
       v-else
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("Most Popular") }}</h2>
       <ft-element-list
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.js b/src/renderer/views/ProfileSettings/ProfileSettings.js
index 881323c9910bf..0324f46087cc3 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.js
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.js
@@ -15,10 +15,6 @@ export default defineComponent({
   computed: {
     profileList: function () {
       return this.$store.getters.getProfileList
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   methods: {
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.scss b/src/renderer/views/ProfileSettings/ProfileSettings.scss
index f6f9a809046a8..fc7da61fd415a 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.scss
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
@@ -15,10 +11,4 @@
   max-inline-size: 1000px;
   margin-block: 0 10px;
   margin-inline: auto;
-}
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.vue b/src/renderer/views/ProfileSettings/ProfileSettings.vue
index 1c13e6bf403b4..589d954cdd466 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.vue
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card big class="card">
       <h2>{{ $t("Profile.Profile Manager") }}</h2>
       <ft-flex-box
         class="profileList"
diff --git a/src/renderer/views/Search/Search.js b/src/renderer/views/Search/Search.js
index 99c29b7627062..e888af50bff33 100644
--- a/src/renderer/views/Search/Search.js
+++ b/src/renderer/views/Search/Search.js
@@ -40,10 +40,6 @@ export default defineComponent({
 
     showFamilyFriendlyOnly: function() {
       return this.$store.getters.getShowFamilyFriendlyOnly
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/Search/Search.scss b/src/renderer/views/Search/Search.scss
index 6e09786a38dc8..796ee7d802d79 100644
--- a/src/renderer/views/Search/Search.scss
+++ b/src/renderer/views/Search/Search.scss
@@ -16,14 +16,4 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
-}
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/renderer/views/Search/Search.vue b/src/renderer/views/Search/Search.vue
index aefe4e7b6d5d1..536d71d3fe0ae 100644
--- a/src/renderer/views/Search/Search.vue
+++ b/src/renderer/views/Search/Search.vue
@@ -8,8 +8,8 @@
     />
     <ft-card
       v-else
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("Search Filters.Search Results") }}</h2>
       <ft-element-list
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.js b/src/renderer/views/SubscribedChannels/SubscribedChannels.js
index a03e6b342b109..0022240632d9e 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.js
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.js
@@ -64,10 +64,6 @@ export default defineComponent({
 
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.scss b/src/renderer/views/SubscribedChannels/SubscribedChannels.scss
index c575de89f4482..ee9c5831afb33 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.scss
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
@@ -70,10 +66,6 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-
   .channels {
     gap: 1.5rem;
   }
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
index dd666447ff894..55335e933fdad 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>{{ $t('Channels.Title') }}</h2>
       <ft-input
         v-show="subscribedChannels.length > 0"
diff --git a/src/renderer/views/Subscriptions/Subscriptions.js b/src/renderer/views/Subscriptions/Subscriptions.js
index 6fee6785da35c..c36ff32cda7a5 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.js
+++ b/src/renderer/views/Subscriptions/Subscriptions.js
@@ -68,10 +68,6 @@ export default defineComponent({
       }
 
       return tabs
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/Subscriptions/Subscriptions.scss b/src/renderer/views/Subscriptions/Subscriptions.scss
index b91efd5badc2f..3d9b5ff1a5ed6 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.scss
+++ b/src/renderer/views/Subscriptions/Subscriptions.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
@@ -37,9 +33,3 @@
 .tab:hover {
   font-weight: bold;
 }
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/Subscriptions/Subscriptions.vue b/src/renderer/views/Subscriptions/Subscriptions.vue
index 1003753ddd6a0..a7c252a416351 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.vue
+++ b/src/renderer/views/Subscriptions/Subscriptions.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>{{ $t("Subscriptions.Subscriptions") }}</h2>
       <ft-flex-box
         class="subscriptionTabs"
diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js
index 0c6a681aaaa0b..d308c9c88c7ff 100644
--- a/src/renderer/views/Trending/Trending.js
+++ b/src/renderer/views/Trending/Trending.js
@@ -39,9 +39,6 @@ export default defineComponent({
     },
     trendingCache () {
       return this.$store.getters.getTrendingCache
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   mounted: function () {
diff --git a/src/renderer/views/Trending/Trending.scss b/src/renderer/views/Trending/Trending.scss
index dac92c840509e..b40247882c9fb 100644
--- a/src/renderer/views/Trending/Trending.scss
+++ b/src/renderer/views/Trending/Trending.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .floatingTopButton {
@@ -47,9 +43,3 @@
     position: absolute
   }
 }
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/Trending/Trending.vue b/src/renderer/views/Trending/Trending.vue
index 1090b094c4ad4..c1cbf40f7d9dd 100644
--- a/src/renderer/views/Trending/Trending.vue
+++ b/src/renderer/views/Trending/Trending.vue
@@ -6,8 +6,8 @@
     />
     <ft-card
       v-else
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("Trending.Trending") }}</h2>
       <ft-flex-box
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.js b/src/renderer/views/UserPlaylists/UserPlaylists.js
index 533119c23492a..b3477dbc13657 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.js
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.js
@@ -41,10 +41,6 @@ export default defineComponent({
       } else {
         return data.slice(0, this.dataLimit)
       }
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.scss b/src/renderer/views/UserPlaylists/UserPlaylists.scss
index c0d12ce3a23ef..a93ab9893f834 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.scss
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.scss
@@ -1,18 +1,8 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
   color: var(--tertiary-text-color);
 }
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.vue b/src/renderer/views/UserPlaylists/UserPlaylists.vue
index 8fc80c6989786..6f592aa32210a 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.vue
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.vue
@@ -6,8 +6,8 @@
     />
     <ft-card
       v-show="!isLoading"
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>
         {{ $t("User Playlists.Your Playlists") }}

From c842a2fcacd16c1ba7f9ec5c7114c43291f153d0 Mon Sep 17 00:00:00 2001
From: pkrasicki <pkrasicki@protonmail.com>
Date: Sun, 26 Nov 2023 11:50:17 +0000
Subject: [PATCH 3/3] Revert some files back to CSS

---
 ...ft-profile-channel-list.scss => ft-profile-channel-list.css} | 0
 .../ft-profile-channel-list/ft-profile-channel-list.vue         | 2 +-
 .../{ft-profile-edit.scss => ft-profile-edit.css}               | 0
 src/renderer/components/ft-profile-edit/ft-profile-edit.vue     | 2 +-
 ...r-channels-list.scss => ft-profile-filter-channels-list.css} | 0
 .../ft-profile-filter-channels-list.vue                         | 2 +-
 .../{password-dialog.scss => password-dialog.css}               | 0
 src/renderer/components/password-dialog/password-dialog.vue     | 2 +-
 src/renderer/views/Hashtag/{Hashtag.scss => Hashtag.css}        | 0
 src/renderer/views/Hashtag/Hashtag.vue                          | 2 +-
 src/renderer/views/History/{History.scss => History.css}        | 0
 src/renderer/views/History/History.vue                          | 2 +-
 .../{ProfileSettings.scss => ProfileSettings.css}               | 0
 src/renderer/views/ProfileSettings/ProfileSettings.vue          | 2 +-
 src/renderer/views/Search/{Search.scss => Search.css}           | 0
 src/renderer/views/Search/Search.vue                            | 2 +-
 .../{SubscribedChannels.scss => SubscribedChannels.css}         | 0
 src/renderer/views/SubscribedChannels/SubscribedChannels.vue    | 2 +-
 .../Subscriptions/{Subscriptions.scss => Subscriptions.css}     | 0
 src/renderer/views/Subscriptions/Subscriptions.vue              | 2 +-
 src/renderer/views/Trending/{Trending.scss => Trending.css}     | 0
 src/renderer/views/Trending/Trending.vue                        | 2 +-
 .../UserPlaylists/{UserPlaylists.scss => UserPlaylists.css}     | 0
 src/renderer/views/UserPlaylists/UserPlaylists.vue              | 2 +-
 24 files changed, 12 insertions(+), 12 deletions(-)
 rename src/renderer/components/ft-profile-channel-list/{ft-profile-channel-list.scss => ft-profile-channel-list.css} (100%)
 rename src/renderer/components/ft-profile-edit/{ft-profile-edit.scss => ft-profile-edit.css} (100%)
 rename src/renderer/components/ft-profile-filter-channels-list/{ft-profile-filter-channels-list.scss => ft-profile-filter-channels-list.css} (100%)
 rename src/renderer/components/password-dialog/{password-dialog.scss => password-dialog.css} (100%)
 rename src/renderer/views/Hashtag/{Hashtag.scss => Hashtag.css} (100%)
 rename src/renderer/views/History/{History.scss => History.css} (100%)
 rename src/renderer/views/ProfileSettings/{ProfileSettings.scss => ProfileSettings.css} (100%)
 rename src/renderer/views/Search/{Search.scss => Search.css} (100%)
 rename src/renderer/views/SubscribedChannels/{SubscribedChannels.scss => SubscribedChannels.css} (100%)
 rename src/renderer/views/Subscriptions/{Subscriptions.scss => Subscriptions.css} (100%)
 rename src/renderer/views/Trending/{Trending.scss => Trending.css} (100%)
 rename src/renderer/views/UserPlaylists/{UserPlaylists.scss => UserPlaylists.css} (100%)

diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
similarity index 100%
rename from src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss
rename to src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
index 68eaede60c67a..319eedd415139 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
@@ -50,4 +50,4 @@
 </template>
 
 <script src="./ft-profile-channel-list.js" />
-<style scoped src="./ft-profile-channel-list.scss" lang="scss" />
+<style scoped src="./ft-profile-channel-list.css" />
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.scss b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
similarity index 100%
rename from src/renderer/components/ft-profile-edit/ft-profile-edit.scss
rename to src/renderer/components/ft-profile-edit/ft-profile-edit.css
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
index 9cb749f2b4aa9..2e9f2aec4a116 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
@@ -107,4 +107,4 @@
 </template>
 
 <script src="./ft-profile-edit.js" />
-<style scoped src="./ft-profile-edit.scss" lang="scss" />
+<style scoped src="./ft-profile-edit.css" />
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
similarity index 100%
rename from src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss
rename to src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
index f01f7bfddfc1b..c28573eaf1553 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
@@ -52,4 +52,4 @@
 </template>
 
 <script src="./ft-profile-filter-channels-list.js" />
-<style scoped src="./ft-profile-filter-channels-list.scss" lang="scss" />
+<style scoped src="./ft-profile-filter-channels-list.css" />
diff --git a/src/renderer/components/password-dialog/password-dialog.scss b/src/renderer/components/password-dialog/password-dialog.css
similarity index 100%
rename from src/renderer/components/password-dialog/password-dialog.scss
rename to src/renderer/components/password-dialog/password-dialog.css
diff --git a/src/renderer/components/password-dialog/password-dialog.vue b/src/renderer/components/password-dialog/password-dialog.vue
index 2524c90acde74..89858f2106e8a 100644
--- a/src/renderer/components/password-dialog/password-dialog.vue
+++ b/src/renderer/components/password-dialog/password-dialog.vue
@@ -16,4 +16,4 @@
 </template>
 
 <script src="./password-dialog.js" />
-<style scoped src="./password-dialog.scss" lang="scss" />
+<style scoped src="./password-dialog.css" />
diff --git a/src/renderer/views/Hashtag/Hashtag.scss b/src/renderer/views/Hashtag/Hashtag.css
similarity index 100%
rename from src/renderer/views/Hashtag/Hashtag.scss
rename to src/renderer/views/Hashtag/Hashtag.css
diff --git a/src/renderer/views/Hashtag/Hashtag.vue b/src/renderer/views/Hashtag/Hashtag.vue
index 354d85c2fd6b0..3cab0e34cf40b 100644
--- a/src/renderer/views/Hashtag/Hashtag.vue
+++ b/src/renderer/views/Hashtag/Hashtag.vue
@@ -38,4 +38,4 @@
   </div>
 </template>
 <script src="./Hashtag.js" />
-<style scoped src="./Hashtag.scss" lang="scss" />
+<style scoped src="./Hashtag.css" />
diff --git a/src/renderer/views/History/History.scss b/src/renderer/views/History/History.css
similarity index 100%
rename from src/renderer/views/History/History.scss
rename to src/renderer/views/History/History.css
diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue
index 3be3cfe2c4306..db5854f40aacf 100644
--- a/src/renderer/views/History/History.vue
+++ b/src/renderer/views/History/History.vue
@@ -54,4 +54,4 @@
 </template>
 
 <script src="./History.js" />
-<style scoped src="./History.scss" lang="scss" />
+<style scoped src="./History.css" />
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.scss b/src/renderer/views/ProfileSettings/ProfileSettings.css
similarity index 100%
rename from src/renderer/views/ProfileSettings/ProfileSettings.scss
rename to src/renderer/views/ProfileSettings/ProfileSettings.css
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.vue b/src/renderer/views/ProfileSettings/ProfileSettings.vue
index 2f6c9a7194590..7337132c3bc4f 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.vue
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.vue
@@ -52,4 +52,4 @@
 </template>
 
 <script src="./ProfileSettings.js" />
-<style scoped src="./ProfileSettings.scss" lang="scss" />
+<style scoped src="./ProfileSettings.css" />
diff --git a/src/renderer/views/Search/Search.scss b/src/renderer/views/Search/Search.css
similarity index 100%
rename from src/renderer/views/Search/Search.scss
rename to src/renderer/views/Search/Search.css
diff --git a/src/renderer/views/Search/Search.vue b/src/renderer/views/Search/Search.vue
index 536d71d3fe0ae..8c1b0070ef259 100644
--- a/src/renderer/views/Search/Search.vue
+++ b/src/renderer/views/Search/Search.vue
@@ -30,4 +30,4 @@
 </template>
 
 <script src="./Search.js" />
-<style scoped src="./Search.scss" lang="scss" />
+<style scoped src="./Search.css" />
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.scss b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
similarity index 100%
rename from src/renderer/views/SubscribedChannels/SubscribedChannels.scss
rename to src/renderer/views/SubscribedChannels/SubscribedChannels.css
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
index 90937d694121f..6b611c075730c 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
@@ -70,4 +70,4 @@
 </template>
 
 <script src="./SubscribedChannels.js" />
-<style scoped src="./SubscribedChannels.scss" lang="scss" />
+<style scoped src="./SubscribedChannels.css" />
diff --git a/src/renderer/views/Subscriptions/Subscriptions.scss b/src/renderer/views/Subscriptions/Subscriptions.css
similarity index 100%
rename from src/renderer/views/Subscriptions/Subscriptions.scss
rename to src/renderer/views/Subscriptions/Subscriptions.css
diff --git a/src/renderer/views/Subscriptions/Subscriptions.vue b/src/renderer/views/Subscriptions/Subscriptions.vue
index a7c252a416351..7d6b33eb16030 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.vue
+++ b/src/renderer/views/Subscriptions/Subscriptions.vue
@@ -106,4 +106,4 @@
 </template>
 
 <script src="./Subscriptions.js" />
-<style scoped src="./Subscriptions.scss" lang="scss" />
+<style scoped src="./Subscriptions.css" />
diff --git a/src/renderer/views/Trending/Trending.scss b/src/renderer/views/Trending/Trending.css
similarity index 100%
rename from src/renderer/views/Trending/Trending.scss
rename to src/renderer/views/Trending/Trending.css
diff --git a/src/renderer/views/Trending/Trending.vue b/src/renderer/views/Trending/Trending.vue
index c1cbf40f7d9dd..af949ce2ce745 100644
--- a/src/renderer/views/Trending/Trending.vue
+++ b/src/renderer/views/Trending/Trending.vue
@@ -98,4 +98,4 @@
 </template>
 
 <script src="./Trending.js" />
-<style scoped src="./Trending.scss" lang="scss" />
+<style scoped src="./Trending.css" />
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.scss b/src/renderer/views/UserPlaylists/UserPlaylists.css
similarity index 100%
rename from src/renderer/views/UserPlaylists/UserPlaylists.scss
rename to src/renderer/views/UserPlaylists/UserPlaylists.css
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.vue b/src/renderer/views/UserPlaylists/UserPlaylists.vue
index 6f592aa32210a..4f43487b7d94e 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.vue
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.vue
@@ -60,4 +60,4 @@
 </template>
 
 <script src="./UserPlaylists.js" />
-<style scoped src="./UserPlaylists.scss" lang="scss" />
+<style scoped src="./UserPlaylists.css" />