From 027ad5ddaedee74862f59f3c4622a5268bfbe24b Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 23 Mar 2025 13:15:34 +0100
Subject: [PATCH] fix(front): layout improvements

---
 front/src/App.vue                            |  6 ++++++
 front/src/components/admin/SettingsGroup.vue | 16 +++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/front/src/App.vue b/front/src/App.vue
index 8f60f2961..cf46627b8 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -84,6 +84,7 @@ store.dispatch('auth/fetchUser')
     <RouterView
       v-slot="{ Component }"
       v-bind="color({}, ['default', 'solid'])()"
+      :class="$style.layout"
     >
       <Transition
         v-if="Component"
@@ -135,3 +136,8 @@ store.dispatch('auth/fetchUser')
     overflow:hidden;
   }
 </style>
+<style module>
+  .layout {
+    padding: 32px;
+  }
+</style>
diff --git a/front/src/components/admin/SettingsGroup.vue b/front/src/components/admin/SettingsGroup.vue
index 5c05eaac8..e28c7abd2 100644
--- a/front/src/components/admin/SettingsGroup.vue
+++ b/front/src/components/admin/SettingsGroup.vue
@@ -122,7 +122,7 @@ const save = async () => {
       <div
         v-for="(setting, key) in settings"
         :key="key"
-        class="ui field"
+        :class="[$style.field, 'ui', 'field']"
       >
         <template v-if="setting.field.widget.class !== 'CheckboxInput'">
           <label :for="setting.identifier">{{ setting.verbose_name }}</label>
@@ -270,6 +270,16 @@ const save = async () => {
       </Alert>
     </form>
   </Section>
-  <Spacer />
-  <Spacer />
+  <hr :class="$style.separator">
+  <Spacer size-64 />
 </template>
+
+<style module>
+  .field > div {
+    display: flex;
+    flex-direction: column;
+  }
+  .separator:last-of-type {
+    display: none;
+  }
+</style>