style updates

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);

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) {

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;
   }
+
 }

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"

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 (

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;

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>