From 3ec21cb442ed8521da0aa793f3db909a2b43c70c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Dec 2025 15:06:36 +0200
Subject: [PATCH] prettified pwa setting

---
 .../helpers/pwa_manifest_icons_setting.vue    | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
index 45b4c797a..c98b582f9 100644
--- a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
+++ b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
@@ -4,7 +4,7 @@
     class="PWAManifestIconsSetting setting-item"
   >
     <label
-      class="setting-label"
+      class="pwa-label setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
       <template v-if="backendDescriptionLabel">
@@ -22,12 +22,12 @@
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
-    <ul class="setting-list">
+    <ul class="setting-list setting-control">
       <li
         v-for="(item, index) in visibleState"
         :key="index"
       >
-        <div>
+        <div class="setting-item">
           <dl>
             <dt><code>purpose</code></dt>
             <dd>
@@ -96,13 +96,34 @@
 <script src="./pwa_manifest_icons_setting.js"></script>
 <style lang="scss">
 .PWAManifestIconsSetting {
-  display: inline-block;
+  &.setting-item {
+    display: grid;
+    grid-template-areas:
+      "label control"
+      "desc control"
+      ". draft";
+    grid-template-rows: 2em auto 1fr;
+  }
+
+  .pwa-label.setting-label {
+    align-self: end;
+
+  }
+
+  .setting-description {
+    text-align: right;
+    align-self: start;
+  }
 
   .setting-list {
     display: grid;
     gap: 0.5em;
   }
 
+  .setting-item {
+    display: inline-block;
+  }
+
   .buttons {
     display: flex;
     gap: 0.5em;