fix: make FormGroup layout in FormTable more stable

The FormGroup’s save-indicator would jump around when used in
combination with the FormTable. We now have a more tight coupling for
these components so that the FormTable can influence the FormGroup’s
rendering.

src/components/generic/FormGroup.vue

 <template>
   <div class="form-group tw-block last:tw-mb-0" :class="formGroupClass">
-    <div class="tw-flex tw-items-baseline tw-gap-2">
+    <div class="form-group-description tw-flex tw-items-baseline tw-gap-x-2 tw-gap-y-1 tw-mb-2">
       <label
         v-if="label"
         :for="id"
-        class="tw-text-gray-500 tw-font-medium tw-pt-1 tw-flex tw-gap-2 tw-items-center tw-grow"
+        class="tw-text-gray-500 tw-font-medium tw-flex tw-gap-2 tw-items-center tw-grow tw-m-0"
       >
         <span>{{ label }}</span>
         <button v-if="withEditButton" type="button" class="btn btn-sm tw-p-0" @click="emit('edit')">
@@ -12,16 +12,11 @@
         </button>
       </label>
 
-      <Transition
-        enter-active-class="tw-transition tw-duration-200 tw-ease-out"
-        enter-from-class="tw-opacity-0"
-        enter-to-class="tw-opacity-100"
-        leave-active-class="tw-transition tw-duration-150 tw-ease-in"
-        leave-from-class="tw-opacity-100"
-        leave-to-class="tw-opacity-0"
-      >
-        <SaveIndicator v-if="isSavingDebounced" />
-      </Transition>
+      <SaveIndicator
+        v-if="typeof isSaving === 'boolean'"
+        class="tw-transition-opacity tw-ease-in-out tw-duration-150"
+        :class="{ 'tw-invisible tw-opacity-0': !isSavingDebounced }"
+      />
     </div>
     <div class="tw-flex tw-flex-col">
       <div class="tw-grid tw-order-first">
@@ -64,13 +59,20 @@ type Error = {
   message?: string
 }
 
-const props = defineProps<{
-  label?: string
-  customControl?: boolean
-  errors?: undefined | (Error | undefined | null)[]
-  withEditButton?: boolean
-  isSaving?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    customControl?: boolean
+    errors?: undefined | (Error | undefined | null)[]
+    withEditButton?: boolean
+    isSaving?: boolean | undefined
+  }>(),
+  {
+    isSaving: undefined,
+    label: '',
+    errors: undefined,
+  },
+)
 const emit = defineEmits<{
   edit: []
 }>()

src/components/generic/FormTable.vue

@@ -20,6 +20,10 @@ export default {
 
 <style scoped>
 .form-table {
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: fit-content(200px) minmax(0, 2fr);
+}
+
+.form-table:deep(.form-group-description) {
+  @apply tw-flex-col;
 }
 </style>