From 54e6cd92d155b730d5b0a7d14ae0e0b09d52d882 Mon Sep 17 00:00:00 2001
From: p0lycarpio <arsene.reymond@free.fr>
Date: Wed, 25 Jun 2025 19:44:25 +0000
Subject: [PATCH] sizing & spacing improvements

---
 .../Domain/Cookbook/CookbookPage.vue          |  6 ++---
 .../components/Domain/Recipe/RecipeChips.vue  |  2 +-
 .../Domain/Recipe/RecipeExplorerPage.vue      |  2 +-
 .../Domain/Recipe/RecipeOrganizerPage.vue     |  2 +-
 .../Domain/Recipe/RecipePage/RecipePage.vue   |  2 +-
 .../RecipePageEditorToolbar.vue               |  7 +++---
 .../RecipePageParts/RecipePageInfoCard.vue    | 10 +++++---
 .../Domain/Recipe/RecipeTimeCard.vue          |  3 +++
 frontend/components/Domain/SearchFilter.vue   |  1 +
 frontend/components/Layout/DefaultLayout.vue  |  2 +-
 .../global/BaseCardSectionTitle.vue           |  3 ++-
 frontend/components/global/BaseWizard.vue     |  2 +-
 frontend/components/global/InputQuantity.vue  |  1 -
 frontend/pages/admin/maintenance/index.vue    | 12 +++++----
 .../pages/g/[groupSlug]/r/create/bulk.vue     | 18 +++++++++----
 .../pages/g/[groupSlug]/r/create/html.vue     |  1 -
 frontend/pages/g/[groupSlug]/r/create/zip.vue |  1 -
 frontend/pages/register/index.vue             | 10 +++-----
 frontend/pages/user/profile/api-tokens.vue    | 25 +++++++++----------
 frontend/pages/user/profile/index.vue         |  4 +--
 20 files changed, 62 insertions(+), 52 deletions(-)

diff --git a/frontend/components/Domain/Cookbook/CookbookPage.vue b/frontend/components/Domain/Cookbook/CookbookPage.vue
index 36bceb9db..9638de5e6 100644
--- a/frontend/components/Domain/Cookbook/CookbookPage.vue
+++ b/frontend/components/Domain/Cookbook/CookbookPage.vue
@@ -24,8 +24,7 @@
 
     <v-container
       v-if="book"
-      fluid
-      class="py-0 my-0"
+      class="my-0"
     >
       <v-sheet
         color="transparent"
@@ -33,13 +32,12 @@
         elevation="0"
       >
         <div class="d-flex align-center w-100 mb-2">
+          <v-toolbar-title class="headline mb-0">
           <v-icon size="large" class="mr-3">
             {{ $globals.icons.pages }}
           </v-icon>
-          <v-toolbar-title class="headline mb-0">
             {{ book.name }}
           </v-toolbar-title>
-          <v-spacer />
           <BaseButton
             v-if="canEdit"
             class="mx-1"
diff --git a/frontend/components/Domain/Recipe/RecipeChips.vue b/frontend/components/Domain/Recipe/RecipeChips.vue
index 577e80fff..7649bc58c 100644
--- a/frontend/components/Domain/Recipe/RecipeChips.vue
+++ b/frontend/components/Domain/Recipe/RecipeChips.vue
@@ -10,7 +10,7 @@
       v-for="category in items.slice(0, limit)"
       :key="category.name"
       label
-      class="ma-1"
+      class="mr-1 mt-1"
       color="accent"
       variant="flat"
       :size="small ? 'small' : 'default'"
diff --git a/frontend/components/Domain/Recipe/RecipeExplorerPage.vue b/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
index caa06b1f1..e08d9ed59 100644
--- a/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container
     fluid
-    class="pa-0"
+    class="px-0"
   >
     <div class="search-container pb-8">
       <form
diff --git a/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue b/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
index 8470d577d..f07acaa84 100644
--- a/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
@@ -59,7 +59,7 @@
     <v-app-bar
       color="transparent"
       flat
-      class="mt-n1 rounded align-center px-4 position-relative w-100 left-0 top-0"
+      class="mt-n1 rounded align-center position-relative w-100 left-0 top-0"
     >
       <v-icon
         size="large"
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index 063cd83fb..379bb8cea 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-container v-show="!isCookMode" key="recipe-page" class="pt-0" :class="{ 'pa-0': $vuetify.display.smAndDown.value }">
+    <v-container v-show="!isCookMode" key="recipe-page" class="px-0" :class="{ 'pa-0': $vuetify.display.smAndDown.value }">
       <v-card :flat="$vuetify.display.smAndDown.value" class="d-print-none">
         <RecipePageHeader
           :recipe="recipe"
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
index 2621f1ed5..131ceb437 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex justify-start align-top py-2">
+  <div class="d-flex justify-start align-top flex-wrap py-2">
     <RecipeImageUploadBtn
       class="my-1"
       :slug="recipe.slug"
@@ -19,6 +19,7 @@
     >
       <v-select
         v-model="recipe.userId"
+        max-width="100"
         :items="allUsers"
         item-title="fullName"
         item-value="id"
@@ -43,8 +44,8 @@
         <v-icon>{{ $globals.icons.household }}</v-icon>
         <span class="pl-1">{{ ownerHousehold.name }}</span>
       </v-card-text>
-    </v-container>
-  </div>
+  </v-container>
+</div>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
index 905a276a0..962b2c6fa 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
@@ -11,15 +11,17 @@
         class="d-flex flex-column justify-center align-center"
       >
         <v-card-text class="w-100">
-          <v-card-title class="text-h5 font-weight-regular pa-0 d-flex flex-column align-center justify-center opacity-80">
+          <div class="d-flex flex-column align-center">
+          <v-card-title class="text-h5 font-weight-regular pa-0 text-wrap text-center opacity-80">
             {{ recipe.name }}
-            <RecipeRating
+          </v-card-title>
+          <RecipeRating
               :key="recipe.slug"
               :value="recipe.rating"
               :recipe-id="recipe.id"
               :slug="recipe.slug"
             />
-          </v-card-title>
+          </div>
           <v-divider class="my-2" />
           <SafeMarkdown :source="recipe.description" class="my-3" />
           <v-divider v-if="recipe.description" />
@@ -52,7 +54,7 @@
                 </v-col>
               </v-row>
             </div>
-            <div class="mx-6">
+            <div v-if="recipe.prepTime || recipe.totalTime || recipe.performTime" class="mx-6">
               <RecipeTimeCard
                 container-class="d-flex flex-wrap justify-center"
                 :prep-time="recipe.prepTime"
diff --git a/frontend/components/Domain/Recipe/RecipeTimeCard.vue b/frontend/components/Domain/Recipe/RecipeTimeCard.vue
index 04191fe6f..4d087bfbc 100644
--- a/frontend/components/Domain/Recipe/RecipeTimeCard.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimeCard.vue
@@ -141,6 +141,9 @@ export default defineNuxtComponent({
 </script>
 
 <style scoped>
+.text-center {
+  font-size: smaller;
+}
 .time-card-flex {
   width: fit-content;
 }
diff --git a/frontend/components/Domain/SearchFilter.vue b/frontend/components/Domain/SearchFilter.vue
index 863f25541..1b1cc9b1f 100644
--- a/frontend/components/Domain/SearchFilter.vue
+++ b/frontend/components/Domain/SearchFilter.vue
@@ -125,6 +125,7 @@
             <v-alert
               type="info"
               :text="$t('search.no-results')"
+              class="mb-0"
             />
           </div>
         </v-card-text>
diff --git a/frontend/components/Layout/DefaultLayout.vue b/frontend/components/Layout/DefaultLayout.vue
index c4db3a55f..73e883c27 100644
--- a/frontend/components/Layout/DefaultLayout.vue
+++ b/frontend/components/Layout/DefaultLayout.vue
@@ -105,7 +105,7 @@
         </v-list-item>
       </template>
     </AppSidebar>
-    <v-main class="pt-16">
+    <v-main class="pt-12">
       <v-scroll-x-transition>
         <div>
           <NuxtPage />
diff --git a/frontend/components/global/BaseCardSectionTitle.vue b/frontend/components/global/BaseCardSectionTitle.vue
index 031634819..9b9068891 100644
--- a/frontend/components/global/BaseCardSectionTitle.vue
+++ b/frontend/components/global/BaseCardSectionTitle.vue
@@ -10,6 +10,7 @@
     <v-card-title class="text-h5 pl-0 py-0" style="font-weight: normal;">
       <v-icon
         v-if="icon"
+        size="small"
         start
       >
         {{ icon }}
@@ -24,7 +25,7 @@
         <slot />
       </p>
     </v-card-text>
-    <v-divider class="mb-3" />
+    <v-divider class="mt-1 mb-3" />
   </v-card>
 </template>
 
diff --git a/frontend/components/global/BaseWizard.vue b/frontend/components/global/BaseWizard.vue
index b18d62e0a..102f068c8 100644
--- a/frontend/components/global/BaseWizard.vue
+++ b/frontend/components/global/BaseWizard.vue
@@ -10,7 +10,7 @@
           style="margin-bottom: 4rem"
           dark
         >
-          <v-toolbar-title class="headline text-h4">
+          <v-toolbar-title class="headline text-h4 text-center mx-0">
             Mealie
           </v-toolbar-title>
         </v-toolbar>
diff --git a/frontend/components/global/InputQuantity.vue b/frontend/components/global/InputQuantity.vue
index 741ab0caa..17b224ace 100644
--- a/frontend/components/global/InputQuantity.vue
+++ b/frontend/components/global/InputQuantity.vue
@@ -10,7 +10,6 @@
       :min="min"
       :max="max"
       type="number"
-      class="rounded-xl"
       size="small"
       variant="plain"
     />
diff --git a/frontend/pages/admin/maintenance/index.vue b/frontend/pages/admin/maintenance/index.vue
index d70301438..88fa134c2 100644
--- a/frontend/pages/admin/maintenance/index.vue
+++ b/frontend/pages/admin/maintenance/index.vue
@@ -26,7 +26,7 @@
 
     <section>
       <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.wrench" :title="$t('admin.maintenance.summary-title')" />
-      <div class="mb-6 ml-2 d-flex" style="gap: 0.3rem">
+      <div class="mb-6 d-flex" style="gap: 0.3rem">
         <BaseButton color="info" @click="getSummary">
           <template #icon>
             {{ $globals.icons.tools }}
@@ -40,7 +40,7 @@
           {{ $t("admin.maintenance.button-label-open-details") }}
         </BaseButton>
       </div>
-      <v-card class="ma-2" :loading="state.fetchingInfo">
+      <v-card class="" :loading="state.fetchingInfo">
         <template v-for="(value, idx) in info" :key="`item-${idx}`">
           <v-list-item>
             <v-list-item-title class="py-2">
@@ -67,21 +67,23 @@
           </template>
         </i18n-t>
       </BaseCardSectionTitle>
-      <v-card class="ma-2" :loading="state.actionLoading">
+      <v-card class="ma-0" flat :loading="state.actionLoading">
         <template v-for="(action, idx) in actions" :key="`item-${idx}`">
-          <v-list-item class="py-1">
+          <v-list-item class="py-2 px-0">
             <v-list-item-title>
               <div>{{ action.name }}</div>
               <v-list-item-subtitle class="wrap-word">
                 {{ action.subtitle }}
               </v-list-item-subtitle>
             </v-list-item-title>
-            <BaseButton color="info" @click="action.handler">
+            <template #append>
+              <BaseButton color="info" @click="action.handler">
               <template #icon>
                 {{ $globals.icons.robot }}
               </template>
               {{ $t("general.run") }}
             </BaseButton>
+            </template>
           </v-list-item>
           <v-divider class="mx-2" />
         </template>
diff --git a/frontend/pages/g/[groupSlug]/r/create/bulk.vue b/frontend/pages/g/[groupSlug]/r/create/bulk.vue
index 307a81fd6..4532674bc 100644
--- a/frontend/pages/g/[groupSlug]/r/create/bulk.vue
+++ b/frontend/pages/g/[groupSlug]/r/create/bulk.vue
@@ -7,7 +7,7 @@
       <v-card-text>
         {{ $t('recipe.recipe-bulk-importer-description') }}
       </v-card-text>
-    </div>
+    <div class="px-4">
     <section class="mt-2">
       <v-row
         v-for="(_, idx) in bulkUrls"
@@ -54,6 +54,7 @@
             cols="12"
             xs="12"
             sm="6"
+            class="py-0"
           >
             <RecipeOrganizerSelector
               v-model="bulkUrls[idx].categories"
@@ -73,6 +74,7 @@
             cols="12"
             xs="12"
             sm="6"
+            class="pt-0 pb-4"
           >
             <RecipeOrganizerSelector
               v-model="bulkUrls[idx].tags"
@@ -90,8 +92,9 @@
           </v-col>
         </template>
       </v-row>
-      <v-card-actions class="justify-end flex-wrap mb-1">
+      <v-card-actions class="justify-end flex-wrap mt-3 pa-0">
         <BaseButton
+          class="mt-1 pr-4"
           delete
           @click="
             bulkUrls = [];
@@ -117,23 +120,26 @@
           @bulk-data="assignUrls"
         />
       </v-card-actions>
-      <div class="px-1">
+      <div class="px-0">
         <v-checkbox
           v-model="showCatTags"
           hide-details
           :label="$t('recipe.set-categories-and-tags')"
         />
       </div>
-      <v-card-actions class="justify-end">
+      <v-card-actions class="justify-center">
+        <div style="width: 250px">
         <BaseButton
           :disabled="bulkUrls.length === 0 || lockBulkImport"
+          rounded
+          block
           @click="bulkCreate"
         >
           <template #icon>
             {{ $globals.icons.check }}
           </template>
-          {{ $t('general.submit') }}
         </BaseButton>
+        </div>
       </v-card-actions>
     </section>
     <section class="mt-12">
@@ -144,6 +150,8 @@
       />
     </section>
   </div>
+  </div>
+</div>
 </template>
 
 <script lang="ts">
diff --git a/frontend/pages/g/[groupSlug]/r/create/html.vue b/frontend/pages/g/[groupSlug]/r/create/html.vue
index ff5ec0279..9880f5204 100644
--- a/frontend/pages/g/[groupSlug]/r/create/html.vue
+++ b/frontend/pages/g/[groupSlug]/r/create/html.vue
@@ -61,7 +61,6 @@
         <div style="width: 250px">
           <BaseButton
             :disabled="!newRecipeData"
-            large
             rounded
             block
             type="submit"
diff --git a/frontend/pages/g/[groupSlug]/r/create/zip.vue b/frontend/pages/g/[groupSlug]/r/create/zip.vue
index 4745c574e..59240e748 100644
--- a/frontend/pages/g/[groupSlug]/r/create/zip.vue
+++ b/frontend/pages/g/[groupSlug]/r/create/zip.vue
@@ -25,7 +25,6 @@
         <div style="width: 250px">
           <BaseButton
             :disabled="newRecipeZip === null"
-            large
             rounded
             block
             :loading="loading"
diff --git a/frontend/pages/register/index.vue b/frontend/pages/register/index.vue
index aec390539..0518bcac4 100644
--- a/frontend/pages/register/index.vue
+++ b/frontend/pages/register/index.vue
@@ -47,7 +47,7 @@
       <!-- Form Container -->
       <div class="d-flex justify-center grow items-center my-4">
         <template v-if="state.ctx.state === States.Initial">
-          <div width="600px">
+          <v-container>
             <v-card-title class="text-h5 my-4 mb-5 pb-0 text-center">
               {{ $t("user-registration.user-registration") }}
             </v-card-title>
@@ -60,7 +60,7 @@
                 color="primary"
                 dark
                 hover
-                width="300px"
+                width="320px"
                 @click="initial.joinGroup"
               >
                 <v-card-title class="d-flex align-center justify-center py-3">
@@ -77,7 +77,7 @@
                 color="primary"
                 dark
                 hover
-                width="300px"
+                width="320px"
                 @click="initial.joinGroup"
               >
                 <v-card-title class="d-flex align-center justify-center py-3">
@@ -92,7 +92,7 @@
                 </v-card-title>
               </v-card>
             </div>
-          </div>
+          </v-container>
         </template>
 
         <template v-else-if="state.ctx.state === States.ProvideToken">
@@ -333,9 +333,7 @@ import type { VForm } from "~/types/auto-forms";
 
 const inputAttrs = {
   variant: "filled",
-  rounded: true,
   validateOnBlur: true,
-  class: "rounded-lg",
 };
 
 export default defineNuxtComponent({
diff --git a/frontend/pages/user/profile/api-tokens.vue b/frontend/pages/user/profile/api-tokens.vue
index 299a51dfc..35e16b418 100644
--- a/frontend/pages/user/profile/api-tokens.vue
+++ b/frontend/pages/user/profile/api-tokens.vue
@@ -17,9 +17,10 @@
     <section class="d-flex justify-center">
       <v-card
         class="mt-4"
-        width="500px"
+        width="100%"
+        flat
       >
-        <v-card-text>
+        <v-card-text class="px-0">
           <v-form
             ref="domNewTokenForm"
             @submit.prevent
@@ -38,16 +39,16 @@
               readonly
               rows="3"
             />
-            <v-list-subheader class="text-center">
+            <p>
               {{
                 $t(
                   "settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again",
                 )
               }}
-            </v-list-subheader>
+            </p>
           </template>
         </v-card-text>
-        <v-card-actions>
+        <v-card-actions class="px-0">
           <BaseButton
             v-if="createdToken"
             cancel
@@ -78,14 +79,11 @@
       :title="$t('settings.token.active-tokens')"
     />
     <section class="d-flex flex-column">
+      <v-list>
       <div
         v-for="(token, index) in user.tokens"
         :key="index"
       >
-        <v-card
-          variant="outlined"
-          class="mb-2"
-        >
           <v-list-item>
             <v-list-item-title>
               {{ token.name }}
@@ -93,16 +91,17 @@
             <v-list-item-subtitle>
               {{ $t('general.created-on-date', [$d(new Date(token.createdAt!))]) }}
             </v-list-item-subtitle>
-            <v-list-item-action>
+            <template #append>
               <BaseButton
                 delete
                 small
                 @click="deleteToken(token.id)"
               />
-            </v-list-item-action>
+            </template>
           </v-list-item>
-        </v-card>
-      </div>
+          <v-divider class="mx-2 my-2" />
+        </div>
+      </v-list>
     </section>
   </v-container>
 </template>
diff --git a/frontend/pages/user/profile/index.vue b/frontend/pages/user/profile/index.vue
index 32de46fa4..aed722073 100644
--- a/frontend/pages/user/profile/index.vue
+++ b/frontend/pages/user/profile/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container v-if="user">
+  <v-container v-if="user" class="mb-8">
     <section class="d-flex flex-column align-center mt-4">
       <UserAvatar
         :tooltip="false"
@@ -7,7 +7,7 @@
         :user-id="user.id"
       />
 
-      <h2 class="text-h4">
+      <h2 class="text-h4 text-center">
         {{ $t('profile.welcome-user', [user.fullName]) }}
       </h2>
       <p class="subtitle-1 mb-0 text-center">