From 743b8ca10f96acd73efb36fcae0634c96a80f741 Mon Sep 17 00:00:00 2001
From: Tom Searle <tom@cogstack.org>
Date: Fri, 15 May 2026 16:09:11 +0100
Subject: [PATCH] fix(medcat-trainer): CU-869danbhd: improve spacing and
 consistency across tabs

---
 .../src/components/admin/DatasetForm.vue      |  33 ++-
 .../src/components/admin/DatasetsList.vue     |   3 -
 .../src/components/admin/ModelPackForm.vue    |  15 +-
 .../src/components/admin/ModelPacksList.vue   |   3 -
 .../src/components/admin/ProjectsList.vue     |  84 +-----
 .../src/components/admin/UserForm.vue         |  15 +-
 .../src/components/admin/UsersList.vue        |   3 -
 .../webapp/frontend/src/styles/_admin.scss    |  50 ++--
 .../frontend/src/views/ProjectAdmin.vue       | 270 +++++-------------
 9 files changed, 161 insertions(+), 315 deletions(-)

diff --git a/medcat-trainer/webapp/frontend/src/components/admin/DatasetForm.vue b/medcat-trainer/webapp/frontend/src/components/admin/DatasetForm.vue
index f58624527..752c29101 100644
--- a/medcat-trainer/webapp/frontend/src/components/admin/DatasetForm.vue
+++ b/medcat-trainer/webapp/frontend/src/components/admin/DatasetForm.vue
@@ -1,14 +1,20 @@
 <template>
-  <div class="form-section">
+  <div class="form-section admin-form-panel">
     <div class="form-header">
       <button class="btn btn-back" @click="$emit('close')">
         <font-awesome-icon icon="arrow-left"></font-awesome-icon>
         <span>Back</span>
       </button>
       <h3>{{ editing ? 'Edit Dataset' : 'Add Dataset' }}</h3>
+      <div class="form-header-actions">
+        <button type="submit" form="dataset-form" class="btn btn-primary" :disabled="saving">
+          <font-awesome-icon v-if="saving" icon="spinner" spin></font-awesome-icon>
+          <span>{{ saving ? 'Saving...' : 'Save Dataset' }}</span>
+        </button>
+      </div>
     </div>
     <div class="form-content">
-      <form @submit.prevent="handleSubmit" class="admin-form">
+      <form id="dataset-form" @submit.prevent="handleSubmit" class="admin-form">
         <div class="form-sections-wrapper">
           <div class="form-section form-section-horizontal">
             <div class="form-group">
@@ -70,13 +76,6 @@
             </div>
           </div>
         </div>
-        <div class="form-actions">
-          <button type="button" class="btn btn-secondary" @click="$emit('close')">Cancel</button>
-          <button type="submit" class="btn btn-primary" :disabled="saving">
-            <font-awesome-icon v-if="saving" icon="spinner" spin></font-awesome-icon>
-            <span>{{ saving ? 'Saving...' : 'Save' }}</span>
-          </button>
-        </div>
       </form>
     </div>
   </div>
@@ -215,10 +214,20 @@ export default {
 @import '@/styles/admin.scss';
 
 // Component-specific styles
-.form-section {
-  max-height: calc(100vh - 270px);
-}
+.admin-form-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: none;
 
+  > .form-content {
+    padding: 0;
+    flex: 1;
+    min-height: 0;
+  }
+}
 
 .form-group {
   textarea.form-control {
diff --git a/medcat-trainer/webapp/frontend/src/components/admin/DatasetsList.vue b/medcat-trainer/webapp/frontend/src/components/admin/DatasetsList.vue
index 165346750..5dbd6e982 100644
--- a/medcat-trainer/webapp/frontend/src/components/admin/DatasetsList.vue
+++ b/medcat-trainer/webapp/frontend/src/components/admin/DatasetsList.vue
@@ -1,8 +1,5 @@
 <template>
   <div class="list-section">
-    <div class="section-header">
-      <h3>Datasets <span class="item-count">({{ datasets.length }})</span></h3>
-    </div>
     <div v-if="datasets.length > 0" class="table-container">
       <v-data-table
         :items="datasets"
diff --git a/medcat-trainer/webapp/frontend/src/components/admin/ModelPackForm.vue b/medcat-trainer/webapp/frontend/src/components/admin/ModelPackForm.vue
index 4a566df1d..d9bdde329 100644
--- a/medcat-trainer/webapp/frontend/src/components/admin/ModelPackForm.vue
+++ b/medcat-trainer/webapp/frontend/src/components/admin/ModelPackForm.vue
@@ -6,9 +6,15 @@
         <span>Back</span>
       </button>
       <h3>{{ editing ? 'Edit Model Pack' : 'Add Model Pack' }}</h3>
+      <div class="form-header-actions">
+        <button type="submit" form="model-pack-form" class="btn btn-primary" :disabled="saving">
+          <font-awesome-icon v-if="saving" icon="spinner" spin></font-awesome-icon>
+          <span>{{ saving ? 'Saving...' : 'Save Model Pack' }}</span>
+        </button>
+      </div>
     </div>
     <div class="form-content">
-      <form @submit.prevent="handleSubmit" class="admin-form">
+      <form id="model-pack-form" @submit.prevent="handleSubmit" class="admin-form">
         <div class="form-sections-wrapper">
           <div class="form-section form-section-horizontal">
             <div class="form-group">
@@ -86,13 +92,6 @@
             </div>
           </div>
         </div>
-        <div class="form-actions">
-          <button type="button" class="btn btn-secondary" @click="$emit('close')">Cancel</button>
-          <button type="submit" class="btn btn-primary" :disabled="saving">
-            <font-awesome-icon v-if="saving" icon="spinner" spin></font-awesome-icon>
-            <span>{{ saving ? 'Saving...' : 'Save' }}</span>
-          </button>
-        </div>
       </form>
     </div>
   </div>
diff --git a/medcat-trainer/webapp/frontend/src/components/admin/ModelPacksList.vue b/medcat-trainer/webapp/frontend/src/components/admin/ModelPacksList.vue
index 9e349c7c5..b91593fd6 100644
--- a/medcat-trainer/webapp/frontend/src/components/admin/ModelPacksList.vue
+++ b/medcat-trainer/webapp/frontend/src/components/admin/ModelPacksList.vue
@@ -1,8 +1,5 @@
 <template>
   <div class="list-section">
-    <div class="section-header">
-      <h3>Model Packs <span class="item-count">({{ modelPacks.length }})</span></h3>
-    </div>
     <div v-if="modelPacks.length > 0" class="table-container">
       <v-data-table
         :items="modelPacks"
diff --git a/medcat-trainer/webapp/frontend/src/components/admin/ProjectsList.vue b/medcat-trainer/webapp/frontend/src/components/admin/ProjectsList.vue
index e77e499da..bf41d3c79 100644
--- a/medcat-trainer/webapp/frontend/src/components/admin/ProjectsList.vue
+++ b/medcat-trainer/webapp/frontend/src/components/admin/ProjectsList.vue
@@ -1,13 +1,6 @@
 <template>
-  <div class="project-list-section">
-    <div class="section-header">
-      <h3>
-        Your Projects
-        <span class="project-count">({{ projects.length }})</span>
-      </h3>
-    </div>
-
-    <div v-if="projects.length > 0" class="projects-table-container">
+  <div class="list-section">
+    <div v-if="projects.length > 0" class="table-container">
       <v-data-table
         :items="projects"
         :headers="tableHeaders"
@@ -15,8 +8,7 @@
         @click:row="handleRowClick"
         hide-default-footer
         :items-per-page="-1"
-        class="projects-table"
-        item-class="project-row"
+        class="admin-table"
         dense>
         <template #item.name="{ item }">
           <div class="project-name-cell">
@@ -29,7 +21,7 @@
           </span>
         </template>
         <template #item.dataset="{ item }">
-          <span class="dataset-name">{{ getDatasetName(item.dataset) }}</span>
+          <span>{{ getDatasetName(item.dataset) }}</span>
         </template>
         <template #item.actions="{ item }">
           <div class="action-buttons" @click.stop>
@@ -56,15 +48,13 @@
       </v-data-table>
     </div>
 
-    <div v-else class="no-projects">
-      <div class="empty-state">
-        <h4>No Projects Yet</h4>
-        <p>You don't have any projects yet. Create one to get started!</p>
-        <button class="btn btn-primary btn-create-empty" @click="$emit('create-project')">
-          <font-awesome-icon icon="plus"></font-awesome-icon>
-          <span>Create Your First Project</span>
-        </button>
-      </div>
+    <div v-else class="empty-state">
+      <h4>No Projects Yet</h4>
+      <p>You don't have any projects yet. Create one to get started!</p>
+      <button class="btn btn-primary btn-create-empty" @click="$emit('create-project')">
+        <font-awesome-icon icon="plus"></font-awesome-icon>
+        <span>Create Your First Project</span>
+      </button>
     </div>
   </div>
 </template>
@@ -126,62 +116,16 @@ export default {
 <style scoped lang="scss">
 @import '@/styles/admin.scss';
 
-// Component-specific styles
-.project-list-section {
-  background: white;
-  border-radius: 8px;
-  padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-
-  .section-header {
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--color-border);
-
-    h3 {
-      font-size: 1.3rem;
-    }
-  }
-
-  .projects-table-container {
-    overflow-x: auto;
-  }
-
-  .projects-table {
-    :deep(.project-row) {
+.list-section {
+  .admin-table {
+    :deep(tbody tr) {
       cursor: pointer;
-      transition: background-color 0.2s ease;
-
-      &:hover {
-        background-color: #f8f9fa;
-      }
     }
   }
 
-  .project-name-cell {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
   .project-name {
     font-size: 0.95rem;
     color: var(--color-heading);
   }
-
-  .project-description {
-    font-size: 0.85rem;
-    color: var(--color-text-secondary);
-    opacity: 0.8;
-  }
-
-  .dataset-name {
-    font-size: 0.9rem;
-    color: var(--color-text);
-  }
-
-  .no-projects {
-    padding: 60px 20px;
-    text-align: center;
-  }
 }
 </style>
diff --git a/medcat-trainer/webapp/frontend/src/components/admin/UserForm.vue b/medcat-trainer/webapp/frontend/src/components/admin/UserForm.vue
index ad1aed5c3..eca97f4b8 100644
--- a/medcat-trainer/webapp/frontend/src/components/admin/UserForm.vue
+++ b/medcat-trainer/webapp/frontend/src/components/admin/UserForm.vue
@@ -6,9 +6,15 @@
         <span>Back</span>
       </button>
       <h3>{{ editing ? 'Edit User' : 'Add User' }}</h3>
+      <div class="form-header-actions">
+        <button type="submit" form="user-form" class="btn btn-primary" :disabled="saving">
+          <font-awesome-icon v-if="saving" icon="spinner" spin></font-awesome-icon>
+          <span>{{ saving ? 'Saving...' : 'Save User' }}</span>
+        </button>
+      </div>
     </div>
     <div class="form-content">
-      <form @submit.prevent="handleSubmit" class="admin-form">
+      <form id="user-form" @submit.prevent="handleSubmit" class="admin-form">
         <div class="form-sections-wrapper">
           <div class="form-section form-section-horizontal">
             <div class="form-group">
@@ -53,13 +59,6 @@
             </div>
           </div>
         </div>
-        <div class="form-actions">
-          <button type="button" class="btn btn-secondary" @click="$emit('close')">Cancel</button>
-          <button type="submit" class="btn btn-primary" :disabled="saving">
-            <font-awesome-icon v-if="saving" icon="spinner" spin></font-awesome-icon>
-            <span>{{ saving ? 'Saving...' : 'Save' }}</span>
-          </button>
-        </div>
       </form>
     </div>
   </div>
diff --git a/medcat-trainer/webapp/frontend/src/components/admin/UsersList.vue b/medcat-trainer/webapp/frontend/src/components/admin/UsersList.vue
index 5f74b8ca1..a5f42401b 100644
--- a/medcat-trainer/webapp/frontend/src/components/admin/UsersList.vue
+++ b/medcat-trainer/webapp/frontend/src/components/admin/UsersList.vue
@@ -1,8 +1,5 @@
 <template>
   <div class="list-section">
-    <div class="section-header">
-      <h3>Users <span class="item-count">({{ users.length }})</span></h3>
-    </div>
     <div v-if="users.length > 0" class="table-container">
       <v-data-table
         :items="users"
diff --git a/medcat-trainer/webapp/frontend/src/styles/_admin.scss b/medcat-trainer/webapp/frontend/src/styles/_admin.scss
index e9272cc00..ff6001726 100644
--- a/medcat-trainer/webapp/frontend/src/styles/_admin.scss
+++ b/medcat-trainer/webapp/frontend/src/styles/_admin.scss
@@ -12,8 +12,9 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 270px);
-  min-height: auto;
+  flex: 1;
+  min-height: 0;
+  max-height: none;
 }
 
 .form-header {
@@ -45,18 +46,48 @@
   }
 
   h3 {
+    flex: 1;
+    min-width: 0;
     margin: 0;
     font-size: 1.1rem;
     font-weight: 600;
+    color: white;
+  }
+
+  .form-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+
+    .btn {
+      padding: 6px 14px;
+      font-size: 0.875rem;
+      font-weight: 500;
+      border-radius: 6px;
+      white-space: nowrap;
+    }
+
+    .btn-primary {
+      background: white;
+      color: $primary;
+      border: none;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+
+      &:hover:not(:disabled) {
+        background: #f0f7ff;
+      }
+    }
   }
 }
 
 .form-content {
   flex: 1;
   overflow: hidden;
-  padding: 16px 20px;
+  padding: 0;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
 
 .admin-form {
@@ -73,24 +104,12 @@
     padding: 20px;
     background: #f8f9fa;
   }
-
-  .form-actions {
-    margin-top: auto;
-    flex-shrink: 0;
-    padding: 20px;
-    border-top: 1px solid var(--color-border);
-    display: flex;
-    gap: 12px;
-    justify-content: flex-end;
-    background: var(--color-background-light);
-  }
 }
 
 // ============================================
 // Form and modal action buttons (consistent styling)
 // ============================================
 
-.admin-form .form-actions,
 .project-form .form-actions,
 .confirm-modal .form-actions {
   .btn {
@@ -547,7 +566,6 @@ input[type="file"].form-control,
 
 // Action buttons styles - apply to all list sections
 .list-section .action-buttons,
-.project-list-section .action-buttons,
 .action-buttons {
   display: flex;
   gap: 6px;
diff --git a/medcat-trainer/webapp/frontend/src/views/ProjectAdmin.vue b/medcat-trainer/webapp/frontend/src/views/ProjectAdmin.vue
index acc165389..7ae148c57 100644
--- a/medcat-trainer/webapp/frontend/src/views/ProjectAdmin.vue
+++ b/medcat-trainer/webapp/frontend/src/views/ProjectAdmin.vue
@@ -66,7 +66,7 @@
 
     <div v-else class="project-admin-content">
       <!-- Projects Tab -->
-      <div v-if="activeTab === 'projects'" class="tab-content">
+      <div v-if="activeTab === 'projects'" class="tab-content admin-section">
       <!-- Project List View -->
       <projects-list
         v-if="!showCreateForm && !editingProject"
@@ -87,9 +87,15 @@
             <span>Back</span>
           </button>
           <h3>{{ editingProject ? 'Edit Project' : 'Create New Project' }}</h3>
+          <div class="form-header-actions">
+            <button type="submit" form="project-admin-form" class="btn btn-primary" :disabled="saving">
+              <font-awesome-icon v-if="saving" icon="spinner" spin></font-awesome-icon>
+              <span>{{ saving ? 'Saving...' : 'Save Project' }}</span>
+            </button>
+          </div>
         </div>
         <div class="form-content">
-          <form @submit.prevent="saveProject" class="project-form">
+          <form id="project-admin-form" @submit.prevent="saveProject" class="project-form">
             <div class="form-sections-wrapper">
             <div class="form-section form-section-horizontal">
               <h4>Basic Information</h4>
@@ -373,13 +379,6 @@
               </div>
             </div>
             </div>
-            <div class="form-actions">
-              <button type="button" class="btn btn-secondary" @click="closeForm">Cancel</button>
-              <button type="submit" class="btn btn-primary" :disabled="saving">
-                <font-awesome-icon v-if="saving" icon="spinner" spin></font-awesome-icon>
-                <span>{{ saving ? 'Saving...' : 'Save Project' }}</span>
-              </button>
-            </div>
           </form>
         </div>
       </div>
@@ -1340,7 +1339,7 @@ export default {
 @import '@/styles/admin.scss';
 
 .project-admin-view {
-  padding: 30px;
+  padding: 16px 20px;
   max-width: 1400px;
   margin: 0 auto;
   background: var(--color-background);
@@ -1349,6 +1348,10 @@ export default {
   max-height: calc(100vh - 100px);
   height: calc(100vh - 100px);
   overflow: hidden;
+
+  .admin-tabs {
+    margin: 8px 0 4px;
+  }
 }
 
 .project-admin-header {
@@ -1371,8 +1374,8 @@ export default {
     flex: 1;
 
     h2 {
-      margin-bottom: 8px;
-      font-size: 2rem;
+      margin-bottom: 4px;
+      font-size: 1.75rem;
       font-weight: 600;
       color: var(--color-heading);
       display: flex;
@@ -1409,137 +1412,6 @@ export default {
   }
 }
 
-.project-list-section {
-  background: white;
-  border-radius: 8px;
-  padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-
-  .section-header {
-    margin-bottom: 20px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--color-border);
-
-    h3 {
-      margin: 0;
-      font-size: 1.3rem;
-      font-weight: 600;
-      color: var(--color-heading);
-
-      .project-count {
-        font-size: 0.9rem;
-        font-weight: 400;
-        color: var(--color-text);
-        opacity: 0.6;
-        margin-left: 8px;
-      }
-    }
-  }
-}
-
-.projects-table-container {
-  overflow-x: auto;
-  border-radius: 6px;
-  border: 1px solid var(--color-border);
-
-  .projects-table {
-    :deep(.project-row) {
-      cursor: pointer;
-      transition: background-color 0.2s ease;
-
-      &:hover {
-        background-color: rgba(0, 114, 206, 0.05);
-      }
-    }
-
-    :deep(th) {
-      background-color: #f8f9fa;
-      font-weight: 600;
-      color: var(--color-heading);
-      text-transform: uppercase;
-      font-size: 0.7rem;
-      letter-spacing: 0.5px;
-      padding: 8px 12px;
-    }
-
-    :deep(td) {
-      padding: 8px 12px;
-      vertical-align: middle;
-    }
-  }
-}
-
-.project-name-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-
-  .project-name {
-    font-size: 0.95rem;
-    color: var(--color-heading);
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .project-description {
-    font-size: 0.8rem;
-    color: var(--color-text);
-    opacity: 0.6;
-    max-width: 400px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.dataset-name {
-  color: var(--color-text);
-  font-size: 0.9rem;
-}
-
-.no-projects {
-  padding: 60px 40px;
-  text-align: center;
-
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20px;
-
-    h4 {
-      font-size: 1.5rem;
-      color: var(--color-heading);
-      margin: 0;
-    }
-
-    p {
-      color: var(--color-text);
-      opacity: 0.7;
-      font-size: 1rem;
-      margin: 0;
-      max-width: 400px;
-    }
-
-    .btn-create-empty {
-      margin-top: 10px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 12px 24px;
-      font-weight: 500;
-      border-radius: 6px;
-      transition: all 0.2s ease;
-      box-shadow: 0 2px 4px rgba(0, 114, 206, 0.2);
-
-      &:hover {
-        transform: translateY(-1px);
-        box-shadow: 0 4px 8px rgba(0, 114, 206, 0.3);
-      }
-    }
-  }
-}
-
 // Project Form Section (Full Screen)
 .project-form-section {
   background: white;
@@ -1553,7 +1425,7 @@ export default {
   overflow: hidden;
 
   .form-header {
-    padding: 8px 20px;
+    padding: 6px 16px;
     border-bottom: 1px solid var(--color-border);
     background: linear-gradient(135deg, $primary 0%, darken($primary, 10%) 100%);
     color: white;
@@ -1563,6 +1435,41 @@ export default {
     border-radius: 12px 12px 0 0;
     flex-shrink: 0;
 
+    h3 {
+      flex: 1;
+      min-width: 0;
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: white;
+    }
+
+    .form-header-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+
+      .btn {
+        padding: 6px 14px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        border-radius: 6px;
+        white-space: nowrap;
+      }
+
+      .btn-primary {
+        background: white;
+        color: $primary;
+        border: none;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+
+        &:hover:not(:disabled) {
+          background: #f0f7ff;
+        }
+      }
+    }
+
     .btn-back {
       background: rgba(255, 255, 255, 0.2);
       border: 1px solid rgba(255, 255, 255, 0.3);
@@ -1586,13 +1493,6 @@ export default {
         font-size: 0.9rem;
       }
     }
-
-    h3 {
-      margin: 0;
-      font-size: 1.1rem;
-      font-weight: 600;
-      color: white;
-    }
   }
 
   .form-content {
@@ -1621,13 +1521,13 @@ export default {
     overflow-y: auto;
     overflow-x: hidden;
     min-height: 0;
-    padding: 20px;
+    padding: 12px;
     background: #f8f9fa;
   }
 
   .form-section {
-    margin-bottom: 24px;
-    padding: 20px;
+    margin-bottom: 12px;
+    padding: 12px 14px;
     background: white;
     border: 1px solid #e0e0e0;
     border-radius: 12px;
@@ -1639,19 +1539,19 @@ export default {
     }
 
     h4 {
-      margin-bottom: 16px;
+      margin-bottom: 10px;
       margin-top: 0;
       color: var(--color-heading);
-      font-size: 1.05rem;
+      font-size: 1rem;
       font-weight: 600;
-      padding-bottom: 12px;
+      padding-bottom: 6px;
       border-bottom: 1px solid #f0f0f0;
     }
 
     &.form-section-horizontal {
       .form-row {
         display: flex;
-        gap: 20px;
+        gap: 12px;
         align-items: flex-end;
         flex-wrap: wrap;
 
@@ -1670,19 +1570,19 @@ export default {
       }
 
       .backup-options {
-        margin-top: 16px;
-        padding-top: 16px;
+        margin-top: 10px;
+        padding-top: 10px;
         border-top: 1px solid #f0f0f0;
       }
     }
   }
 
   .form-group {
-    margin-bottom: 16px;
+    margin-bottom: 10px;
 
     label {
       display: block;
-      margin-bottom: 6px;
+      margin-bottom: 4px;
       font-weight: 500;
       color: var(--color-heading);
       font-size: 0.9rem;
@@ -1852,17 +1752,6 @@ export default {
     gap: 8px;
   }
 
-  .form-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-    margin-top: auto;
-    padding: 16px 20px;
-    border-top: 1px solid var(--color-border);
-    flex-shrink: 0;
-    background: white;
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
-  }
 }
 
 // Responsive design
@@ -1883,26 +1772,23 @@ export default {
     }
   }
 
-  .projects-table-container {
-    :deep(table) {
-      font-size: 0.85rem;
-    }
-
-    :deep(th),
-    :deep(td) {
-      padding: 6px 8px;
-    }
-  }
-
   .project-form-section {
     height: calc(100vh - 150px);
     max-height: calc(100vh - 150px);
 
     .form-header {
-      padding: 10px 16px;
+      flex-wrap: wrap;
+      padding: 8px 12px;
+      gap: 8px;
 
       h3 {
         font-size: 1rem;
+        flex: 1 1 auto;
+      }
+
+      .form-header-actions {
+        flex: 1 1 100%;
+        justify-content: flex-end;
       }
 
       .btn-back {
@@ -1916,22 +1802,22 @@ export default {
     }
 
     .form-sections-wrapper {
-      padding: 16px;
+      padding: 10px;
     }
 
     .form-section {
-      margin-bottom: 20px;
-      padding: 16px;
+      margin-bottom: 10px;
+      padding: 10px 12px;
 
       h4 {
-        font-size: 1rem;
-        margin-bottom: 12px;
-        padding-bottom: 10px;
+        font-size: 0.95rem;
+        margin-bottom: 8px;
+        padding-bottom: 6px;
       }
 
       .form-row {
         flex-direction: column;
-        gap: 16px;
+        gap: 10px;
 
         .form-group-inline {
           min-width: 100%;