From ace8295c03bd57e59b377dbf49aec2f01ef29e6c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 7 Dec 2025 14:40:14 +0200
Subject: [PATCH] style updates

---
 src/App.scss                                  |  3 +-
 .../admin_tabs/frontends_tab.js               |  4 +--
 .../admin_tabs/frontends_tab.scss             | 36 +++++++++++++++++--
 .../admin_tabs/frontends_tab.vue              |  7 ++--
 .../helpers/vertical_tab_switcher.jsx         |  4 +--
 .../settings_modal/settings_modal.scss        |  5 ++-
 .../settings_modal_admin_content.vue          |  2 ++
 7 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index d6fae5fff..02500c661 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -678,7 +678,8 @@ option {
   list-style: none;
   display: grid;
   grid-auto-flow: row dense;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
+  grid-gap: 0.5em;
 
   li {
     border: 1px solid var(--border);
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
index a9a4777da..c63e76214 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -44,10 +44,10 @@ const FrontendsTab = {
     }
   },
   computed: {
+    ...SharedComputedObject(),
     frontends () {
       return this.$store.state.adminSettings.frontends
-    },
-    ...SharedComputedObject()
+    }
   },
   methods: {
     canInstall (frontend) {
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
index 3bc347087..27c1fdc55 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.scss
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
@@ -1,8 +1,24 @@
-.frontends-tab {
+.FrontendsTab {
   .cards-list {
     padding: 0;
   }
 
+  li.frontend-card {
+    display: flex;
+    margin: 0;
+    flex-direction: column;
+  }
+
+  .frontend-buttons {
+    margin-top: 0.5em;
+    display: flex;
+    justify-content: end;
+    gap: 0.5em;
+    flex-wrap: wrap;
+    flex: 1 0 auto;
+    align-items: end;
+  }
+
   .relative {
     position: relative;
   }
@@ -16,10 +32,26 @@
     inset: 0;
   }
 
+  h5 {
+    margin: 0;
+    font-size: 1.15em
+  }
+
+  dl {
+    margin-left: 1em;
+  }
+
+  dt {
+    margin-top: 0.5em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: hidden;
+  }
+
   dd {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow-x: hidden;
-    max-width: 10em;
   }
+
 }
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 4df45446b..3dd4acba1 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="frontends-tab"
+    class="FrontendsTab"
     :label="$t('admin_dash.tabs.frontends')"
   >
     <div class="setting-item">
@@ -42,9 +42,10 @@
         <ul class="cards-list">
           <li
             v-for="frontend in frontends"
+            class="frontend-card"
             :key="frontend.name"
           >
-            <strong>{{ frontend.name }}</strong>
+            <h5>{{ frontend.name }}</h5>
             {{ ' ' }}
             <span v-if="adminDraft && adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name">
               <i18n-t
@@ -89,7 +90,7 @@
                 >{{ frontend.build_url }}</a>
               </dd>
             </dl>
-            <div>
+            <div class="frontend-buttons">
               <span class="btn-group">
                 <button
                   class="button button-default btn"
diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
index 7fea1cab8..bbb36af6f 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
@@ -159,10 +159,10 @@ export default {
 
       const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
       const contentClasses = ['tab-content']
-      if (props['full-width']) {
+      if (props['full-width'] || props['full-width'] === '') {
         contentClasses.push('-full-width')
       }
-      if (props['full-height']) {
+      if (props['full-height'] || props['full-width'] === '') {
         contentClasses.push('-full-height')
       }
       return (
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index a9f560048..9e04c3fe7 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -32,10 +32,13 @@
   }
 
   p {
-    width: 40em;
     line-height: 1.5;
   }
 
+  .setting-item > p {
+    margin-left: 1em;
+  }
+
   .setting-list,
   .option-list {
     list-style-type: none;
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
index 37feed3e3..1caff38d7 100644
--- a/src/components/settings_modal/settings_modal_admin_content.vue
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -69,6 +69,7 @@
       :label="$t('admin_dash.tabs.emoji')"
       icon="face-smile-beam"
       data-tab-name="emoji"
+      full-width
     >
       <EmojiTab />
     </div>
@@ -77,6 +78,7 @@
       :label="$t('admin_dash.tabs.frontends')"
       icon="laptop-code"
       data-tab-name="frontends"
+      full-width
     >
       <FrontendsTab />
     </div>