Fix responsiveness of the settings template (#4383)

web/src/components/admin/settings/AdminInfoTab.vue

@@ -3,7 +3,7 @@
     <div class="flex flex-col items-center gap-4">
       <WoodpeckerLogo class="w-32 h-32 fill-wp-text-200" />
 
-      <i18n-t keypath="running_version" tag="p" class="text-xl">
+      <i18n-t keypath="running_version" tag="p" class="text-xl text-center">
         <span class="font-bold">{{ version?.current }}</span>
       </i18n-t>
 

web/src/components/atomic/Button.vue

@@ -2,7 +2,7 @@
   <component
     :is="to === undefined ? 'button' : httpLink ? 'a' : 'router-link'"
     v-bind="btnAttrs"
-    class="relative flex items-center py-1 px-2 rounded-md border shadow-sm cursor-pointer transition-all duration-150 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
+    class="relative flex flex-shrink-0 whitespace-nowrap items-center py-1 px-2 rounded-md border shadow-sm cursor-pointer transition-all duration-150 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
     :class="{
       'bg-wp-control-neutral-100 hover:bg-wp-control-neutral-200 border-wp-control-neutral-300 text-wp-text-100':
         color === 'gray',
@@ -16,7 +16,7 @@
   >
     <slot>
       <Icon v-if="startIcon" :name="startIcon" class="!w-6 !h-6" :class="{ invisible: isLoading, 'mr-1': text }" />
-      <span :class="{ invisible: isLoading }" class="flex-shrink-0">{{ text }}</span>
+      <span :class="{ invisible: isLoading }">{{ text }}</span>
       <Icon v-if="endIcon" :name="endIcon" class="ml-2 w-6 h-6" :class="{ invisible: isLoading }" />
       <div
         v-if="isLoading"

web/src/components/atomic/Warning.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="flex gap-2 items-center text-gray-700 font-bold rounded-md p-2 border border-solid border-l-6 border-wp-hint-warn-200 bg-wp-hint-warn-100"
+    class="flex gap-4 items-center text-gray-700 font-bold rounded-md p-4 border border-solid border-l-6 border-wp-hint-warn-200 bg-wp-hint-warn-100"
   >
-    <Icon v-if="!textOnly" name="warning" />
+    <Icon v-if="!textOnly" name="warning" class="flex-shrink-0" />
     <slot>
-      <span class="whitespace-pre">{{ text }}</span>
+      <span class="whitespace-pre-wrap">{{ text }}</span>
     </slot>
   </div>
 </template>

web/src/components/layout/Settings.vue

@@ -1,18 +1,18 @@
 <template>
   <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ title }}</h1>
-        <p v-if="desc" class="text-sm text-wp-text-alt-100">
-          {{ desc }}
-          <DocsLink v-if="docsUrl" :topic="title" :url="docsUrl" />
-        </p>
-        <Warning v-if="warning" class="text-sm mt-1" :text="warning" />
-      </div>
+    <h1 class="text-xl text-wp-text-100">{{ title }}</h1>
+    <div class="flex flex-col gap-4 border-b mb-4 pb-4">
+      <div class="flex flex-col sm:flex-row gap-4 sm:gap-12 md:justify-between dark:border-wp-background-100">
+        <div v-if="desc" class="flex items-center gap-x-2 text-sm text-wp-text-alt-100">
+          <span class="flex flex-grow-0">{{ desc }}</span>
+          <DocsLink v-if="docsUrl" class="flex flex-grow-0" :topic="title" :url="docsUrl" />
+        </div>
 
-      <div class="ml-auto">
-        <slot v-if="$slots.titleActions" name="titleActions" />
+        <div>
+          <slot v-if="$slots.titleActions" name="titleActions" />
+        </div>
       </div>
+      <Warning v-if="warning" class="text-sm mt-1" :text="warning" />
     </div>
 
     <slot />

web/src/components/user/UserRegistriesTab.vue

@@ -1,22 +1,18 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('registries.registries') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">
-          {{ $t('user.settings.registries.desc') }}
-          <DocsLink :topic="$t('registries.registries')" url="docs/usage/registries" />
-        </p>
-      </div>
+  <Settings
+    :title="$t('registries.registries')"
+    :desc="$t('user.settings.registries.desc')"
+    docs-url="docs/usage/registries"
+  >
+    <template #titleActions>
       <Button
         v-if="selectedRegistry"
-        class="ml-auto"
         :text="$t('registries.show')"
         start-icon="back"
         @click="selectedRegistry = undefined"
       />
-      <Button v-else class="ml-auto" :text="$t('registries.add')" start-icon="plus" @click="showAddRegistry" />
-    </div>
+      <Button v-else :text="$t('registries.add')" start-icon="plus" @click="showAddRegistry" />
+    </template>
 
     <RegistryList
       v-if="!selectedRegistry"
@@ -33,7 +29,7 @@
       @save="createRegistry"
       @cancel="selectedRegistry = undefined"
     />
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -42,8 +38,7 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
-import DocsLink from '~/components/atomic/DocsLink.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import RegistryEdit from '~/components/registry/RegistryEdit.vue';
 import RegistryList from '~/components/registry/RegistryList.vue';
 import useApiClient from '~/compositions/useApiClient';

web/src/components/user/UserSecretsTab.vue

@@ -1,22 +1,9 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('secrets.secrets') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">
-          {{ $t('user.settings.secrets.desc') }}
-          <DocsLink :topic="$t('secrets.secrets')" url="docs/usage/secrets" />
-        </p>
-      </div>
-      <Button
-        v-if="selectedSecret"
-        class="ml-auto"
-        :text="$t('secrets.show')"
-        start-icon="back"
-        @click="selectedSecret = undefined"
-      />
-      <Button v-else class="ml-auto" :text="$t('secrets.add')" start-icon="plus" @click="showAddSecret" />
-    </div>
+  <Settings :title="$t('secrets.secrets')" :desc="$t('user.settings.secrets.desc')" docs-url="docs/usage/secrets">
+    <template #titleActions>
+      <Button v-if="selectedSecret" :text="$t('secrets.show')" start-icon="back" @click="selectedSecret = undefined" />
+      <Button v-else :text="$t('secrets.add')" start-icon="plus" @click="showAddSecret" />
+    </template>
 
     <SecretList
       v-if="!selectedSecret"
@@ -33,7 +20,7 @@
       @save="createSecret"
       @cancel="selectedSecret = undefined"
     />
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -42,8 +29,7 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
-import DocsLink from '~/components/atomic/DocsLink.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import SecretEdit from '~/components/secrets/SecretEdit.vue';
 import SecretList from '~/components/secrets/SecretList.vue';
 import useApiClient from '~/compositions/useApiClient';