fix(front): layout improvements

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>

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 />
+  <hr :class="$style.separator">
-  <Spacer />
+  <Spacer size-64 />
 </template>
+
+<style module>
+  .field > div {
+    display: flex;
+    flex-direction: column;
+  }
+  .separator:last-of-type {
+    display: none;
+  }
+</style>