location: fix various spacing issues

dashboard/src/components/PortBindings.vue

@@ -14,7 +14,7 @@ const udpPorts = defineModel('udp');
   <div v-for="ports in [ tcpPorts, udpPorts ]" :key="ports">
     <FormGroup v-for="(port, key) in ports" :key="key" style="margin-top: 10px;">
       <Checkbox :label="port.title" v-model="port.enabled" />
-      <small>{{ port.description + '. ' + (port.portCount > 1 ? (port.portCount + ' ports. ') : '') }}</small>
+      <small>{{ port.description + (port.portCount > 1 ? ('. ' + port.portCount + ' ports. ') : '') }}</small>
       <small v-show="port.readOnly">{{ $t('appstore.installDialog.portReadOnly') }}</small>
       <small class="has-error" v-if="error.port === port.value">Port already taken {{ port }}</small>
       <NumberInput v-model="port.value" :disabled="!port.enabled" :min="1"/>
@@ -24,3 +24,10 @@ const udpPorts = defineModel('udp');
     </FormGroup>
   </div>
 </template>
+
+<style scoped>
+.pankow-form-group small {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+</style>

dashboard/src/components/app/Location.vue

@@ -226,10 +226,10 @@ onMounted(async () => {
 
         <PortBindings v-model:tcp="tcpPorts" v-model:udp="udpPorts" :error="errorObject" :domain-provider="domainProvider"/>
 
-        <div v-if="app.manifest.multiDomain" style="margin-top: 20px">
+        <FormGroup v-if="app.manifest.multiDomain">
           <label>{{ $t('app.location.aliases') }} <sup><a href="https://docs.cloudron.io/apps/#aliases" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
 
-          <div v-if="aliases.length === 0">{{ $t('app.location.noAliases') }}</div>
+          <div v-if="aliases.length === 0" style="margin-bottom: 10px;">{{ $t('app.location.noAliases') }}</div>
           <div v-for="(item, index) in aliases" :key="item" style="margin-bottom: 10px">
             <div style="display: flex; gap: 10px;">
               <InputGroup style="flex-grow: 1">
@@ -242,12 +242,11 @@ onMounted(async () => {
           </div>
 
           <div class="actionable" v-if="!busy" @click="onAddAlias()">{{ $t('app.location.addAliasAction') }}</div>
-        </div>
+        </FormGroup>
 
-        <div style="margin-top: 20px">
+        <FormGroup>
           <label>{{ $t('app.location.redirections') }} <sup><a href="https://docs.cloudron.io/apps/#redirections" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-
-          <div v-if="redirects.length === 0">{{ $t('app.location.noRedirections') }}</div>
+          <div v-if="redirects.length === 0" style="margin-bottom: 10px;">{{ $t('app.location.noRedirections') }}</div>
           <div v-for="(item, index) in redirects" :key="item" style="margin-bottom: 10px;">
             <div style="display: flex; gap: 10px;">
               <InputGroup style="flex-grow: 1">
@@ -260,7 +259,7 @@ onMounted(async () => {
           </div>
 
           <div class="actionable" v-if="!busy" @click="onAddRedirect()">{{ $t('app.location.addRedirectionAction') }}</div>
-        </div>
+        </FormGroup>
 
       </fieldset>
     </form>
@@ -270,8 +269,15 @@ onMounted(async () => {
     <div class="error-label" v-if="errorMessage">{{ errorMessage }}</div>
 
     <Checkbox v-if="needsOverwriteDns" v-model="overwriteDns" :label="$t('app.location.dnsoverwrite')"/>
+    <br v-if="needsOverwriteDns"/>
 
-    <br/>
     <Button @click="onSubmit()" :loading="busy" :disabled="busy || (app.error && app.error.installationState !== ISTATES.PENDING_LOCATION_CHANGE) || app.taskId || !formValid">{{ $t('app.location.saveAction') }}</Button>
   </div>
 </template>
+
+<style scoped>
+.pankow-form-group small {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+</style>