From 1902e8206d572c2e96170e2617dbc11d0637a784 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Tue, 30 Sep 2025 11:11:14 +0200
Subject: [PATCH] Spacing fixes in forms

form - helps with capturing the submit top level. no styling
fieldset - helps with disabling elements in single place. no styling.
   in html, this does have a default border which we remove in style.css.

FormGroup - pankow element. This defines the spacing between adjacent
   FormGroups as 6px.
---
 dashboard/src/components/app/Cron.vue    | 18 ++++++++++--------
 dashboard/src/components/app/Display.vue |  4 ++--
 dashboard/src/style.css                  |  4 ----
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/dashboard/src/components/app/Cron.vue b/dashboard/src/components/app/Cron.vue
index 4b5cd5a81..d240c53f0 100644
--- a/dashboard/src/components/app/Cron.vue
+++ b/dashboard/src/components/app/Cron.vue
@@ -66,17 +66,19 @@ onMounted(() => {
       <fieldset :disabled="busy || app.error">
         <input style="display: none;" type="submit" />
 
-        <label for="crontabInput" style="display: flex; justify-content: space-between;">
-          <span>{{ $t('app.cron.title') }} <sup><a href="https://docs.cloudron.io/apps/#cron" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></span>
-          <Button small outline :menu="commonPatternsMenu">{{ $t('app.cron.addCommonPattern') }}</Button>
-        </label>
+        <FormGroup>
+          <label for="crontabInput" style="display: flex; justify-content: space-between;">
+            <span>{{ $t('app.cron.title') }} <sup><a href="https://docs.cloudron.io/apps/#cron" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></span>
+            <Button small outline :menu="commonPatternsMenu">{{ $t('app.cron.addCommonPattern') }}</Button>
+          </label>
 
-        <div>{{ $t('app.cron.description') }}</div>
+          <div>{{ $t('app.cron.description') }}</div>
 
-        <textarea id="crontabInput" style="width: 100%; white-space: pre-wrap; font-family: monospace;" v-model="crontab" rows="10"></textarea>
-
-        <Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.cron.saveAction') }}</Button>
+          <textarea id="crontabInput" style="width: 100%; white-space: pre-wrap; font-family: monospace;" v-model="crontab" rows="10"></textarea>
+        </FormGroup>
       </fieldset>
     </form>
+    <br/>
+    <Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.cron.saveAction') }}</Button>
   </div>
 </template>
diff --git a/dashboard/src/components/app/Display.vue b/dashboard/src/components/app/Display.vue
index 7fe87e361..d6aa5c112 100644
--- a/dashboard/src/components/app/Display.vue
+++ b/dashboard/src/components/app/Display.vue
@@ -107,9 +107,9 @@ onMounted(() => {
           <TagInput id="tagsInput" :placeholder="$t('app.display.tagsPlaceholder')" v-model="tags" v-tooltip="$t('app.display.tagsTooltip')"/>
           <div class="text-error" v-if="tagsError">{{ tagsError }}</div>
         </FormGroup>
-
-        <Button @click="onSubmit()" :loading="busy" :disabled="busy || !haveValuesChanged">{{ $t('app.display.saveAction') }}</Button>
       </fieldset>
     </form>
+    <br/>
+    <Button @click="onSubmit()" :loading="busy" :disabled="busy || !haveValuesChanged">{{ $t('app.display.saveAction') }}</Button>
   </div>
 </template>
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index f36510a0b..b00651eba 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -250,10 +250,6 @@ a.pankow-breadcrumb-item {
   transform: rotate(90deg);
 }
 
-fieldset > * {
-  margin: 6px 0;
-}
-
 /* Animations */
 .slide-fade-enter-active {
   transition: all 0.2s ease-out;