From cb692c972da40ae75dda2eb8f44f7c54d82866fd Mon Sep 17 00:00:00 2001
From: Faiz <faiz@Faizs-MacBook-Pro.local>
Date: Sun, 9 Aug 2026 01:28:32 +0530
Subject: [PATCH 1/3] UI pixel perfection: Project creation steps, Project
 details screen

---
 components/AppConfirmationDialog.vue          | 44 ++++++++-------
 components/AppIcon.vue                        |  2 +-
 components/project-wizard/StatusDialog.vue    | 38 +++++++------
 .../steps/AreaOfInterestStep.vue              | 28 +++++-----
 .../project-wizard/steps/ReviewStep.vue       |  1 -
 .../project-wizard/steps/SettingsStep.vue     |  6 +-
 .../AddContributorDialog.vue                  |  4 +-
 .../ContributorsTab.vue                       | 55 +++++++++----------
 .../SelectedTaskBar.vue                       | 21 ++++---
 .../TaskLockControl.vue                       | 12 ++--
 .../TaskSetupPanel.vue                        | 24 ++++----
 .../[id]/projects/[projectId]/edit.vue        |  1 -
 .../[id]/projects/[projectId]/index.vue       | 11 ++--
 pages/workspace/[id]/projects/create.vue      | 37 +++++++------
 14 files changed, 150 insertions(+), 134 deletions(-)

diff --git a/components/AppConfirmationDialog.vue b/components/AppConfirmationDialog.vue
index dbef62a..8417589 100644
--- a/components/AppConfirmationDialog.vue
+++ b/components/AppConfirmationDialog.vue
@@ -37,16 +37,18 @@
         </span>
       </div>
 
-      <h2
-        :id="titleId"
-        class="app-confirmation-dialog-title"
-      >
-        {{ title }}
-      </h2>
+      <div class="app-confirmation-dialog-body">
+        <h2
+          :id="titleId"
+          class="app-confirmation-dialog-title"
+        >
+          {{ title }}
+        </h2>
 
-      <p class="app-confirmation-dialog-message">
-        {{ message }}
-      </p>
+        <p class="app-confirmation-dialog-message">
+          {{ message }}
+        </p>
+      </div>
 
       <div class="app-confirmation-dialog-actions">
         <button
@@ -202,9 +204,9 @@ function handleWindowKeydown(event: KeyboardEvent) {
 
 .app-confirmation-dialog {
   position: relative;
-  width: min(44rem, 100%);
+  width: min(40rem, 100%);
   display: grid;
-  gap: 1rem;
+  gap: 30px;
   padding: 2rem 2.15rem 2.05rem;
   background: #ffffff;
   border-radius: 1.15rem;
@@ -224,8 +226,8 @@ function handleWindowKeydown(event: KeyboardEvent) {
 }
 
 .app-confirmation-dialog-icon {
-  width: 4rem;
-  height: 4rem;
+  width: 50px;
+  height: 50px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -245,16 +247,20 @@ function handleWindowKeydown(event: KeyboardEvent) {
 .app-confirmation-dialog-title {
   margin: 0;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
-  font-size: clamp(1.9rem, 2.4vw, 2.3rem);
+  font-size: 20px;
   font-weight: 700;
   line-height: 1.12;
   letter-spacing: -0.03em;
 }
 
+.app-confirmation-dialog-body {
+    display: grid;
+    gap: 15px;
+}
+
 .app-confirmation-dialog-message {
   margin: 0;
-  color: rgba($secondary, 0.98);
+  color: $text-secondary;
   font-size: 1rem;
   line-height: 1.55;
 }
@@ -268,11 +274,9 @@ function handleWindowKeydown(event: KeyboardEvent) {
 
 .app-confirmation-dialog-secondary,
 .app-confirmation-dialog-primary {
-  min-width: 10.5rem;
-  min-height: 3.25rem;
+  min-height: 40px;
   font-size: 1rem;
-  font-weight: 700;
-  border-radius: 0.5rem;
+  font-weight: 600;
 }
 
 .app-confirmation-dialog-primary-default {
diff --git a/components/AppIcon.vue b/components/AppIcon.vue
index 0273716..c98e1de 100644
--- a/components/AppIcon.vue
+++ b/components/AppIcon.vue
@@ -29,7 +29,7 @@ const classes = computed(() => ([
 <style lang="scss">
 .material-icons {
   vertical-align: middle;
-  margin-top: -3px;
+  //margin-top: -3px;
 
   &.me-2 {
     margin-right: 0.33em !important;
diff --git a/components/project-wizard/StatusDialog.vue b/components/project-wizard/StatusDialog.vue
index c0f1524..713d266 100644
--- a/components/project-wizard/StatusDialog.vue
+++ b/components/project-wizard/StatusDialog.vue
@@ -28,29 +28,31 @@
       <div class="project-wizard-status-dialog-icon-shell">
         <span class="project-wizard-status-dialog-icon">
           <app-icon
-            :variant="variant === 'success' ? 'check_circle' : 'error'"
+            :variant="variant === 'success' ? 'check_circle' : 'info'"
             size="22"
             no-margin
           />
         </span>
       </div>
 
-      <h2
-        :id="titleId"
-        class="project-wizard-status-dialog-title"
-      >
-        {{ title }}
-      </h2>
+      <div class="project-wizard-body">
+        <h2
+          :id="titleId"
+          class="project-wizard-status-dialog-title"
+        >
+          {{ title }}
+        </h2>
 
-      <p class="project-wizard-status-dialog-message">
-        {{ message }}
-      </p>
+        <p class="project-wizard-status-dialog-message">
+          {{ message }}
+        </p>
+      </div>
 
       <div class="project-wizard-status-dialog-actions">
         <button
           v-if="secondaryActionLabel"
           ref="secondaryActionRef"
-          class="btn btn-outline-secondary project-wizard-status-dialog-secondary"
+          class="btn btn-outline-secondary"
           type="button"
           @click="emit('secondary-action')"
         >
@@ -59,7 +61,7 @@
 
         <button
           ref="primaryActionRef"
-          class="btn btn-primary project-wizard-status-dialog-primary"
+          class="btn btn-primary"
           type="button"
           @click="emit('primary-action')"
         >
@@ -151,7 +153,7 @@ function handleWindowKeydown(event: KeyboardEvent) {
   position: relative;
   width: min(35.5rem, 100%);
   display: grid;
-  gap: 1rem;
+  gap: 1.5rem;
   padding: 1.7rem 1.95rem 1.95rem;
   background-color: #fff;
   border-radius: 1rem;
@@ -192,15 +194,19 @@ function handleWindowKeydown(event: KeyboardEvent) {
 .project-wizard-status-dialog-title {
   margin: 0;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
-  font-size: 2rem;
+  font-size: 24px;
   font-weight: 700;
   line-height: 1.1;
 }
 
+.project-wizard-body {
+    display: grid;
+    gap: 15px;
+}
+
 .project-wizard-status-dialog-message {
   margin: 0;
-  color: rgba($secondary, 0.98);
+  color: $text-secondary;
   font-size: 1rem;
   line-height: 1.55;
   overflow-wrap: anywhere;
diff --git a/components/project-wizard/steps/AreaOfInterestStep.vue b/components/project-wizard/steps/AreaOfInterestStep.vue
index 4ddf1d3..18e8e55 100644
--- a/components/project-wizard/steps/AreaOfInterestStep.vue
+++ b/components/project-wizard/steps/AreaOfInterestStep.vue
@@ -352,18 +352,19 @@ function onFileDrop(event: DragEvent) {
 .project-wizard-area-captured {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1.2rem;
   padding: 0.95rem 1rem;
-  background: #f3fcf8;
-  border: 1px solid #bcebdd;
+  background: #f6fcfa;
+  border: 1px solid #d4e4dd;
   border-radius: 0.55rem;
+  border-left: 4px solid #349377;
 }
 
 .project-wizard-area-measurement {
   display: inline-flex;
   align-items: center;
   gap: 0.65rem;
-  color: #195747;
+  color: $text-navy;
   font-size: 0.88rem;
 }
 
@@ -372,7 +373,7 @@ function onFileDrop(event: DragEvent) {
   display: inline-flex;
   align-items: flex-start;
   gap: 0.65rem;
-  color: #195747;
+  color: $text-navy;
 }
 
 .project-wizard-area-captured-copy strong,
@@ -401,12 +402,13 @@ function onFileDrop(event: DragEvent) {
   color: $text-navy;
   background: #ffffff;
   border: 1px solid rgba($text-navy, 0.14);
-  width: fit-content;
+  width: stretch;
+  justify-content: center;
 }
 
 .project-wizard-area-dropzone-shell {
-  border: 1px dashed rgba($text-navy, 0.28);
-  border-radius: 0.35rem;
+  border: 1px dashed #8A8FAD;
+  border-radius: 6px;
   transition: border-color 0.2s ease, background-color 0.2s ease;
 }
 
@@ -419,12 +421,13 @@ function onFileDrop(event: DragEvent) {
   width: 100%;
   display: grid;
   justify-items: center;
-  gap: 0.55rem;
+  gap: 10px;
   padding: 1.7rem 1rem;
   text-align: center;
   color: $text-navy;
-  background: transparent;
+  background: #fafafc;
   border: 0;
+  border-radius: 6px;
 }
 
 .project-wizard-area-dropzone-icon {
@@ -434,13 +437,12 @@ function onFileDrop(event: DragEvent) {
 }
 
 .project-wizard-area-upload-icon {
-  width: 1.2rem;
-  height: 1.2rem;
+  width: 35px;
+  height: 35px;
   display: block;
 }
 
 .project-wizard-area-dropzone-copy {
-  font-family: var(--secondary-font-family);
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.3;
diff --git a/components/project-wizard/steps/ReviewStep.vue b/components/project-wizard/steps/ReviewStep.vue
index af6d238..9f65502 100644
--- a/components/project-wizard/steps/ReviewStep.vue
+++ b/components/project-wizard/steps/ReviewStep.vue
@@ -212,7 +212,6 @@ function formatRole(role: WorkspaceRole): string {
   gap: 0.55rem;
   color: $text-secondary;
   font-family: var(--primary-font-family);
-  font-size: 1.125rem;
   font-style: normal;
   font-weight: 400;
   line-height: 1.625rem;
diff --git a/components/project-wizard/steps/SettingsStep.vue b/components/project-wizard/steps/SettingsStep.vue
index 00f976c..8bcdf92 100644
--- a/components/project-wizard/steps/SettingsStep.vue
+++ b/components/project-wizard/steps/SettingsStep.vue
@@ -166,8 +166,8 @@ function onReviewRequiredChange(event: Event) {
 .project-wizard-step-copy,
 .project-wizard-settings-text {
   margin: 0;
-  color: rgba($secondary, 0.95);
-  font-size: 0.95rem;
+  color: $text-secondary;
+  font-size: 14px;
   line-height: 1.45;
 }
 
@@ -186,7 +186,7 @@ function onReviewRequiredChange(event: Event) {
 .project-wizard-settings-heading {
   margin: 0;
   color: $text-navy;
-  font-size: 0.98rem;
+  font-size: 16px;
   font-weight: 700;
   line-height: 1.3;
 }
diff --git a/components/workspace-project-details/AddContributorDialog.vue b/components/workspace-project-details/AddContributorDialog.vue
index 0825949..5917ada 100644
--- a/components/workspace-project-details/AddContributorDialog.vue
+++ b/components/workspace-project-details/AddContributorDialog.vue
@@ -342,8 +342,8 @@ function selectUser(userId: string) {
 
 .project-detail-add-contributor-user-copy strong {
   color: $text-navy;
-  font-size: 0.96rem;
-  font-weight: 700;
+  font-size: 1rem;
+  font-weight: 600;
   line-height: 1.25;
 }
 
diff --git a/components/workspace-project-details/ContributorsTab.vue b/components/workspace-project-details/ContributorsTab.vue
index 1e4bccb..a901729 100644
--- a/components/workspace-project-details/ContributorsTab.vue
+++ b/components/workspace-project-details/ContributorsTab.vue
@@ -405,8 +405,7 @@ function openAddContributorDialog() {
 
 .project-detail-contributors-card {
   display: grid;
-  gap: 1.25rem;
-  padding: 1rem 1rem 0.85rem;
+  gap: 25px;
   background: linear-gradient(180deg, rgba(#ffffff, 0.98) 0%, rgba(#fbfbff, 0.96) 100%);
 }
 
@@ -418,25 +417,23 @@ function openAddContributorDialog() {
 }
 
 .project-detail-contributors-add {
-  min-height: 3rem;
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
-  padding-inline: 1rem;
+  padding: 8px 10px;
   flex-shrink: 0;
 }
 
 .project-detail-contributors-copy h2 {
   margin: 0;
-  color: #1a1e3d;
-  font-size: 1.9rem;
-  font-family: var(--secondary-font-family);
+  color: $text-navy;
+  font-size: 18px;
   font-weight: 700;
 }
 
 .project-detail-contributors-copy p {
   margin: 0.35rem 0 0;
-  color: #66708f;
+  color: $text-secondary;
   font-size: 1rem;
 }
 
@@ -454,10 +451,10 @@ function openAddContributorDialog() {
 .project-detail-contributors-search .form-control {
   min-height: 3.1rem;
   padding-left: 2.75rem;
-  color: #3f4763;
+  color: $text-navy;
   background: #ffffff;
   border-color: rgba($text-navy, 0.1);
-  border-radius: 0.85rem;
+  border-radius: 0.35rem;
   box-shadow: inset 0 1px 2px rgba($text-navy, 0.02);
 }
 
@@ -476,10 +473,10 @@ function openAddContributorDialog() {
 .project-detail-contributors-card :deep(.tdei-select-toggle) {
   min-height: 3.1rem;
   padding: 0.75rem 0.9rem;
-  color: #4f5672;
+  color: $text-navy;
   background: #ffffff;
   border: 1px solid rgba($text-navy, 0.1);
-  border-radius: 0.85rem;
+  border-radius: 0.35rem;
   box-shadow: inset 0 1px 2px rgba($text-navy, 0.02);
 }
 
@@ -491,7 +488,7 @@ function openAddContributorDialog() {
 
 .project-detail-contributors-list-wrap {
   border: 1px solid rgba($text-navy, 0.08);
-  border-radius: 1rem;
+  border-radius: 10px;
   background: #ffffff;
   overflow: visible;
 }
@@ -511,7 +508,7 @@ function openAddContributorDialog() {
 }
 
 .project-detail-contributors-item {
-  padding: 1rem 1.25rem;
+  padding: 20px 20px;
   border-top: 1px solid rgba($text-navy, 0.08);
 }
 
@@ -551,16 +548,15 @@ function openAddContributorDialog() {
 
 .project-detail-contributors-person h3 {
   margin: 0;
-  color: #1a1e3d;
+  color: $text-navy;
   font-size: 1rem;
-  font-family: var(--secondary-font-family);
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .project-detail-contributors-person p {
   margin: 0.22rem 0 0;
-  color: #66708f;
-  font-size: 0.93rem;
+  color: $text-secondary;
+  font-size: 14px;
 }
 
 .project-detail-contributors-role-cell {
@@ -583,23 +579,24 @@ function openAddContributorDialog() {
 }
 
 .project-detail-contributors-role-cell :deep(.tdei-select-toggle) {
-  min-height: 2.75rem;
-  padding: 0.7rem 0.9rem;
-  font-weight: 600;
-  border-radius: 0.8rem;
+    min-height: 40px;
+    padding: 8px 12px;
+    font-weight: 600;
+    border-radius: 0.35rem;
+    font-size: 14px;
 }
 
 .project-detail-contributors-role-readonly {
   min-width: 12.5rem;
-  min-height: 2.75rem;
+  min-height: 40px;
   display: inline-flex;
   align-items: center;
-  padding: 0.7rem 0.9rem;
+  padding: 8px 12px;
   color: $text-secondary;
   font-weight: 600;
   background: $surface-card;
   border: 1px solid $border-subtle;
-  border-radius: 0.8rem;
+  border-radius: 0.35rem;
 }
 
 .project-detail-contributors-role-cell :deep(.tdei-select-menu) {
@@ -609,13 +606,13 @@ function openAddContributorDialog() {
 }
 
 .project-detail-contributors-delete {
-  width: 2.75rem;
-  height: 2.75rem;
+  width: 40px;
+  height: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
-  border-radius: 0.8rem;
+  border-radius: 0.35rem;
   flex: 0 0 auto;
 }
 
diff --git a/components/workspace-project-details/SelectedTaskBar.vue b/components/workspace-project-details/SelectedTaskBar.vue
index f2a1174..33f7a6e 100644
--- a/components/workspace-project-details/SelectedTaskBar.vue
+++ b/components/workspace-project-details/SelectedTaskBar.vue
@@ -201,20 +201,23 @@ defineEmits<{
   .project-detail-task-action-bar {
     flex-wrap: wrap;
     padding: 1rem 1.75rem;
+    position: fixed;
+    bottom: 0px;
+    width: 100%
   }
 
-  .project-detail-task-action-summary {
-    justify-content: flex-start;
-  }
+  // .project-detail-task-action-summary {
+  //   justify-content: flex-start;
+  // }
 }
 
 @include media-breakpoint-down(md) {
-  .project-detail-task-action-summary {
-    width: 100%;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
+  // .project-detail-task-action-summary {
+  //   width: 100%;
+  //   flex-direction: column;
+  //   align-items: flex-start;
+  //   gap: 1rem;
+  // }
 
   .project-detail-task-action-status {
     padding-left: 0;
diff --git a/components/workspace-project-details/TaskLockControl.vue b/components/workspace-project-details/TaskLockControl.vue
index 5912716..a503d21 100644
--- a/components/workspace-project-details/TaskLockControl.vue
+++ b/components/workspace-project-details/TaskLockControl.vue
@@ -16,6 +16,7 @@
         variant="lock"
         size="16"
         no-margin
+        class="task-lock-icon-size"
       />
       <app-icon
         :variant="menuOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
@@ -140,22 +141,25 @@ function handleWindowPointerDown(event: PointerEvent) {
 
 .project-detail-task-lock-button,
 .project-detail-task-lock-indicator {
-  min-width: 2.15rem;
-  height: 2rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.05rem;
+  gap: 2px;
   color: #d94f4f;
   background: #ffffff;
   border: 1px solid rgba($text-navy, 0.14);
-  border-radius: 0.45rem;
+  border-radius: 5px;
+  padding: 2px 5px;
 }
 
 .project-detail-task-lock-button:disabled {
   opacity: 0.55;
 }
 
+.task-lock-icon-size {
+  font-size: 18px;
+}
+
 .project-detail-task-lock-menu {
   position: absolute;
   left: 0;
diff --git a/components/workspace-project-details/TaskSetupPanel.vue b/components/workspace-project-details/TaskSetupPanel.vue
index ab68f4f..ab758e0 100644
--- a/components/workspace-project-details/TaskSetupPanel.vue
+++ b/components/workspace-project-details/TaskSetupPanel.vue
@@ -289,11 +289,11 @@ function onTaskAreaInput(event: Event) {
 .project-task-setup-card {
   display: grid;
   gap: 1.55rem;
-  padding: 1.55rem 1.65rem 1.7rem;
+  padding: 30px;
   background: #ffffff;
-  border: 1px solid rgba(172, 184, 215, 0.28);
+  border: 1px solid #dfe2ef;
   border-radius: 1rem;
-  box-shadow: 0 1rem 2.2rem rgba($text-navy, 0.04);
+  // box-shadow: 0 1rem 2.2rem rgba($text-navy, 0.04);
 }
 
 .project-task-setup-hero {
@@ -304,18 +304,15 @@ function onTaskAreaInput(event: Event) {
 .project-task-setup-hero h2 {
   margin: 0;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
-  font-size: 1.95rem;
+  font-size: 18px;
   font-weight: 700;
   line-height: 1.04;
-  letter-spacing: 0.01em;
-  text-transform: uppercase;
 }
 
 .project-task-setup-hero p {
   margin: 0;
-  color: #667091;
-  font-size: 1.05rem;
+  color: $text-secondary;
+  font-size: 16px;
   line-height: 1.45;
 }
 
@@ -327,6 +324,7 @@ function onTaskAreaInput(event: Event) {
   border: 1px solid rgba(204, 214, 239, 0.8);
   border-left-width: 0.35rem;
   border-radius: 0.75rem;
+  align-items: center;
 }
 
 .project-task-setup-callout strong,
@@ -371,7 +369,7 @@ function onTaskAreaInput(event: Event) {
 
 .project-task-setup-range-block {
   display: grid;
-  gap: 0.95rem;
+  gap: 15px;
 }
 
 .project-task-setup-range-header {
@@ -383,8 +381,8 @@ function onTaskAreaInput(event: Event) {
 
 .project-task-setup-label {
   color: $text-navy;
-  font-size: 1.05rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 600;
 }
 
 .project-task-setup-range-value {
@@ -548,7 +546,7 @@ function onTaskAreaInput(event: Event) {
 
 .project-task-setup-save-copy p {
   margin: 0;
-  color: #667091;
+  color: $text-secondary;
   line-height: 1.45;
 }
 
diff --git a/pages/workspace/[id]/projects/[projectId]/edit.vue b/pages/workspace/[id]/projects/[projectId]/edit.vue
index 7ceaff6..56a83ad 100644
--- a/pages/workspace/[id]/projects/[projectId]/edit.vue
+++ b/pages/workspace/[id]/projects/[projectId]/edit.vue
@@ -947,7 +947,6 @@ $project-edit-action-spacing: 1.5rem;
 .project-edit-title {
   margin: 0;
   color: #1a1e3d;
-  font-family: var(--secondary-font-family);
   font-size: $project-edit-title-font-size;
   font-weight: 600;
   line-height: 1.15;
diff --git a/pages/workspace/[id]/projects/[projectId]/index.vue b/pages/workspace/[id]/projects/[projectId]/index.vue
index da1adab..f4351cd 100644
--- a/pages/workspace/[id]/projects/[projectId]/index.vue
+++ b/pages/workspace/[id]/projects/[projectId]/index.vue
@@ -113,7 +113,9 @@
               <div class="project-detail-summary-grid">
                 <div class="project-detail-summary-item">
                   <span>Status</span>
-                  <workspace-projects-status-badge :status="project.status" />
+                  <div>
+                    <workspace-projects-status-badge :status="project.status" />
+                  </div>
                 </div>
 
                 <div class="project-detail-summary-item">
@@ -1156,6 +1158,7 @@ function escapeHtml(value: string) {
   flex-direction: column;
   height: calc(100vh - #{$navbar-height});
   overflow: hidden;
+  padding: 0px 0px;
 }
 
 .project-detail-layout {
@@ -1366,18 +1369,18 @@ function escapeHtml(value: string) {
 .project-detail-summary-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1.4rem 2rem;
+  gap: 20px 0px;
 }
 
 .project-detail-summary-item {
   display: flex;
-  gap: 0.9375rem;
   min-width: 0;
 }
 
-.project-detail-summary-item span {
+.project-detail-summary-item > span {
   font-size: 1rem;
   font-weight: 600;
+  color: $text-navy;
   min-width: 7.5rem;
 }
 
diff --git a/pages/workspace/[id]/projects/create.vue b/pages/workspace/[id]/projects/create.vue
index 7dff7f2..2b51d20 100644
--- a/pages/workspace/[id]/projects/create.vue
+++ b/pages/workspace/[id]/projects/create.vue
@@ -714,7 +714,7 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
 
 .project-create-page {
   height: 100%;
-  position: relative;
+  padding: 0px 0px;
   overflow: hidden;
 }
 
@@ -726,7 +726,8 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   background: $surface-card;
   overflow: hidden;
   width: 100%;
-  top: 0;
+  top: 0px;
+  z-index: 9999;
 }
 
 .project-create-header {
@@ -736,7 +737,7 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 0.9375rem 2.5rem;
+  padding: 15px 20px;
   background-color: $surface-card;
   box-shadow: $header-shadow;
 }
@@ -745,6 +746,7 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   display: flex;
   align-items: center;
   gap: 1.55rem;
+  flex-wrap: wrap;
 }
 
 .project-create-title {
@@ -785,9 +787,9 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
 
 .project-create-panel {
   position: absolute;
-  top: 2rem;
-  left: 2rem;
-  bottom: 2rem;
+  top: 1.2rem;
+  left: 1.2rem;
+  bottom: 1.2rem;
   z-index: 2;
   width: min(30.5rem, calc(100% - 4rem));
 }
@@ -896,22 +898,10 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   }
 
   .project-create-shell {
-    position: relative;
     height: auto;
     min-height: calc(100vh - #{$navbar-height} - 2rem);
   }
 
-  .project-create-header-copy {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.8rem;
-  }
-
-  .project-create-title {
-    padding-right: 0;
-    border-right: 0;
-  }
-
   .project-create-body {
     display: grid;
     grid-template-rows: auto 26rem;
@@ -941,6 +931,17 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
     padding: 1rem 1.1rem;
   }
 
+  .project-create-header-copy {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.8rem;
+  }
+
+  .project-create-title {
+    padding-right: 0;
+    border-right: 0;
+  }
+
   .project-create-footer {
     flex-direction: column-reverse;
     align-items: stretch;

From 336e92908d36314a321bf1ba0830b22f27cdfcb5 Mon Sep 17 00:00:00 2001
From: Faiz <faiz@Faizs-MacBook-Pro.local>
Date: Sun, 9 Aug 2026 02:03:09 +0530
Subject: [PATCH 2/3] Icon size and hover css

---
 .../workspace-project-details/AddContributorDialog.vue      | 3 ++-
 components/workspace-project-details/ContributorsTab.vue    | 6 +++++-
 components/workspace-project-details/SelectedTaskBar.vue    | 2 +-
 components/workspace-project-details/TaskLockControl.vue    | 1 +
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/workspace-project-details/AddContributorDialog.vue b/components/workspace-project-details/AddContributorDialog.vue
index 5917ada..da35737 100644
--- a/components/workspace-project-details/AddContributorDialog.vue
+++ b/components/workspace-project-details/AddContributorDialog.vue
@@ -269,12 +269,13 @@ function selectUser(userId: string) {
 
 .project-detail-add-contributor-search-input {
   padding-right: 2.5rem;
+  border-radius: 4px;
 }
 
 .project-detail-add-contributor-results {
   min-height: 8rem;
   border: 1px solid rgba($text-navy, 0.12);
-  border-radius: 0.75rem;
+  border-radius: 8px;
   background: #ffffff;
   overflow: hidden;
 }
diff --git a/components/workspace-project-details/ContributorsTab.vue b/components/workspace-project-details/ContributorsTab.vue
index a901729..5bdb232 100644
--- a/components/workspace-project-details/ContributorsTab.vue
+++ b/components/workspace-project-details/ContributorsTab.vue
@@ -475,7 +475,7 @@ function openAddContributorDialog() {
   padding: 0.75rem 0.9rem;
   color: $text-navy;
   background: #ffffff;
-  border: 1px solid rgba($text-navy, 0.1);
+  border: 1px solid #dee2e6;
   border-radius: 0.35rem;
   box-shadow: inset 0 1px 2px rgba($text-navy, 0.02);
 }
@@ -614,6 +614,10 @@ function openAddContributorDialog() {
   padding: 0;
   border-radius: 0.35rem;
   flex: 0 0 auto;
+  border: 1px solid #dee2e6;
+}
+.project-detail-contributors-delete:hover {
+  border: 1px solid #dc3545;
 }
 
 .project-detail-contributors-empty {
diff --git a/components/workspace-project-details/SelectedTaskBar.vue b/components/workspace-project-details/SelectedTaskBar.vue
index 33f7a6e..89e618b 100644
--- a/components/workspace-project-details/SelectedTaskBar.vue
+++ b/components/workspace-project-details/SelectedTaskBar.vue
@@ -97,7 +97,7 @@ defineEmits<{
   padding: 0;
   color: #db4b4b;
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 700;
   text-decoration: none;
 }
 
diff --git a/components/workspace-project-details/TaskLockControl.vue b/components/workspace-project-details/TaskLockControl.vue
index a503d21..2bdb64a 100644
--- a/components/workspace-project-details/TaskLockControl.vue
+++ b/components/workspace-project-details/TaskLockControl.vue
@@ -34,6 +34,7 @@
         variant="lock"
         size="16"
         no-margin
+        class="task-lock-icon-size"
       />
     </span>
 

From da6e5e9d0fb98b97de0dd38a42a7c19bf649c0e2 Mon Sep 17 00:00:00 2001
From: Faiz <faiz@Faizs-MacBook-Pro.local>
Date: Sun, 9 Aug 2026 23:57:08 +0530
Subject: [PATCH 3/3] Project edit page mobile responsive, pixel perfection

---
 components/AppConfirmationDialog.vue          |  4 +-
 components/project-wizard/StatusDialog.vue    | 11 ++--
 .../ContributorsTab.vue                       |  1 +
 composables/useProjectEditMembers.ts          |  2 +-
 .../[id]/projects/[projectId]/edit.vue        | 56 +++++++++++--------
 .../[id]/projects/[projectId]/index.vue       |  2 +-
 6 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/components/AppConfirmationDialog.vue b/components/AppConfirmationDialog.vue
index 8417589..31b49cd 100644
--- a/components/AppConfirmationDialog.vue
+++ b/components/AppConfirmationDialog.vue
@@ -207,7 +207,7 @@ function handleWindowKeydown(event: KeyboardEvent) {
   width: min(40rem, 100%);
   display: grid;
   gap: 30px;
-  padding: 2rem 2.15rem 2.05rem;
+  padding: 30px;
   background: #ffffff;
   border-radius: 1.15rem;
   box-shadow: 0 1.25rem 3rem rgba($text-navy, 0.18);
@@ -311,7 +311,7 @@ function handleWindowKeydown(event: KeyboardEvent) {
   }
 
   .app-confirmation-dialog-title {
-    font-size: 1.75rem;
+    font-size: 20px;
   }
 
   .app-confirmation-dialog-actions {
diff --git a/components/project-wizard/StatusDialog.vue b/components/project-wizard/StatusDialog.vue
index 713d266..33405ff 100644
--- a/components/project-wizard/StatusDialog.vue
+++ b/components/project-wizard/StatusDialog.vue
@@ -153,8 +153,8 @@ function handleWindowKeydown(event: KeyboardEvent) {
   position: relative;
   width: min(35.5rem, 100%);
   display: grid;
-  gap: 1.5rem;
-  padding: 1.7rem 1.95rem 1.95rem;
+  gap: 30px;
+  padding: 30px;
   background-color: #fff;
   border-radius: 1rem;
   box-shadow: 0 1rem 2.5rem rgba($text-navy, 0.18);
@@ -173,8 +173,8 @@ function handleWindowKeydown(event: KeyboardEvent) {
 }
 
 .project-wizard-status-dialog-icon {
-  width: 3.6rem;
-  height: 3.6rem;
+  width: 50px;
+  height: 50px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -194,7 +194,7 @@ function handleWindowKeydown(event: KeyboardEvent) {
 .project-wizard-status-dialog-title {
   margin: 0;
   color: $text-navy;
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 700;
   line-height: 1.1;
 }
@@ -217,6 +217,7 @@ function handleWindowKeydown(event: KeyboardEvent) {
   align-items: center;
   gap: 0.9rem;
   padding-top: 0.35rem;
+  justify-content: flex-end;
 }
 
 .project-wizard-status-dialog-secondary,
diff --git a/components/workspace-project-details/ContributorsTab.vue b/components/workspace-project-details/ContributorsTab.vue
index 5bdb232..e11aae6 100644
--- a/components/workspace-project-details/ContributorsTab.vue
+++ b/components/workspace-project-details/ContributorsTab.vue
@@ -422,6 +422,7 @@ function openAddContributorDialog() {
   gap: 0.45rem;
   padding: 8px 10px;
   flex-shrink: 0;
+  border-radius: 4px;
 }
 
 .project-detail-contributors-copy h2 {
diff --git a/composables/useProjectEditMembers.ts b/composables/useProjectEditMembers.ts
index 71ebf60..31349b9 100644
--- a/composables/useProjectEditMembers.ts
+++ b/composables/useProjectEditMembers.ts
@@ -243,7 +243,7 @@ export function useProjectEditMembers(options: {
       okTitle: 'Remove',
       okVariant: 'danger',
       cancelTitle: 'Cancel',
-      cancelClass: 'btn-link p-0',
+      cancelClass: 'btn-link',
       cancelVariant: null,
     }).show();
     if (!value?.ok) return;
diff --git a/pages/workspace/[id]/projects/[projectId]/edit.vue b/pages/workspace/[id]/projects/[projectId]/edit.vue
index 56a83ad..3ae9373 100644
--- a/pages/workspace/[id]/projects/[projectId]/edit.vue
+++ b/pages/workspace/[id]/projects/[projectId]/edit.vue
@@ -749,7 +749,7 @@ async function confirmDiscardProjectEdits() {
     okTitle: 'Discard',
     okVariant: 'danger',
     cancelTitle: 'Continue Editing',
-    cancelClass: 'btn-link p-0',
+    cancelClass: 'btn-link',
     cancelVariant: null,
   }).show();
 
@@ -877,7 +877,7 @@ function getInitial(value: string) {
 <style lang="scss" scoped>
 @import "~/assets/scss/theme.scss";
 
-$project-edit-header-padding: 1.25rem 1.75rem 1.2rem;
+$project-edit-header-padding: 25px 30px;
 $project-edit-header-padding-mobile: 1.25rem 1rem;
 $project-edit-breadcrumb-gap: 0.45rem;
 $project-edit-breadcrumb-spacing: 0.75rem;
@@ -904,24 +904,25 @@ $project-edit-control-font-size: 0.95rem;
 $project-edit-small-font-size: 0.9rem;
 $project-edit-nav-radius: 0.7rem;
 $project-edit-card-radius: 0.75rem;
-$project-edit-panel-gap: 1.25rem;
+$project-edit-panel-gap: 25px;
 $project-edit-field-gap: 0.55rem;
 $project-edit-row-gap: 0.75rem;
-$project-edit-action-gap: 0.9rem;
-$project-edit-action-spacing: 1.5rem;
+$project-edit-action-gap: 20px;
+$project-edit-action-spacing: 30px;
 
 .project-edit-page {
   height: calc(100vh - #{$navbar-height});
   overflow: hidden;
+  padding: 0px 0px !important;
 }
 
 .project-edit-shell {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: #ffffff;
-  border: 1px solid rgba($text-navy, 0.1);
-  border-radius: 1rem;
+  // background: #ffffff;
+  // border: 1px solid rgba($text-navy, 0.1);
+  // border-radius: 1rem;
   overflow: hidden;
 }
 
@@ -935,8 +936,9 @@ $project-edit-action-spacing: 1.5rem;
   flex-wrap: wrap;
   gap: $project-edit-breadcrumb-gap;
   margin-bottom: $project-edit-breadcrumb-spacing;
-  color: #757d98;
-  font-size: $project-edit-small-font-size;
+  color: $text-secondary;
+  font-size: 14px;
+  font-weight: 500;
 }
 
 .project-edit-breadcrumbs a {
@@ -1161,6 +1163,7 @@ $project-edit-action-spacing: 1.5rem;
 .project-edit-search-input {
   min-height: 3rem;
   padding-right: 3rem;
+  border-radius: 6px;
 }
 
 .project-edit-search-result-actions :deep(.tdei-select-toggle),
@@ -1184,7 +1187,7 @@ $project-edit-action-spacing: 1.5rem;
 .project-edit-search-results,
 .project-edit-members-list {
   border: 1px solid rgba($text-navy, 0.1);
-  border-radius: 1rem;
+  border-radius: 8px;
   background: #ffffff;
 }
 
@@ -1202,8 +1205,7 @@ $project-edit-action-spacing: 1.5rem;
   display: grid;
   align-items: center;
   gap: $project-edit-row-gap;
-  padding: $project-edit-row-padding;
-  background: #ffffff;
+  padding: 18px 15px;
 }
 
 .project-edit-search-result {
@@ -1275,16 +1277,16 @@ $project-edit-action-spacing: 1.5rem;
 }
 
 .project-edit-member-role-readonly {
-  min-width: 11rem;
-  min-height: 3rem;
+  min-width: 8rem;
+  min-height: 2.9rem;
   display: inline-flex;
   align-items: center;
-  padding: 0.75rem 0.9rem;
+  padding: 5px 10px;
   color: $text-secondary;
-  font-weight: 600;
+  font-weight: 500;
   background: $surface-card;
   border: 1px solid $border-subtle;
-  border-radius: 0.8rem;
+  border-radius: 8px;
 }
 
 .project-edit-member-copy {
@@ -1294,7 +1296,7 @@ $project-edit-action-spacing: 1.5rem;
 }
 
 .project-edit-member-copy strong {
-  color: #273156;
+  color: $text-navy;
   font-size: 1rem;
   font-weight: 700;
 }
@@ -1328,7 +1330,7 @@ $project-edit-action-spacing: 1.5rem;
   font-weight: 700;
   background: rgba($primary, 0.08);
   border: 1px solid rgba($primary, 0.18);
-  border-radius: 0.8rem;
+  border-radius: 8px;
 }
 
 .project-edit-search-add:hover,
@@ -1346,8 +1348,8 @@ $project-edit-action-spacing: 1.5rem;
   justify-content: center;
   color: #e14646;
   background: #ffffff;
-  border: 1px solid rgba(225, 70, 70, 0.24);
-  border-radius: 0.65rem;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
 }
 
 .project-edit-member-remove:hover:not(:disabled),
@@ -1543,7 +1545,7 @@ $project-edit-action-spacing: 1.5rem;
 .project-edit-content :deep(.tdei-select-toggle) {
   min-width: 8rem;
   min-height: 2.9rem;
-  border-radius: 0.65rem;
+  border-radius: 8px;
 }
 
 @include media-breakpoint-down(lg) {
@@ -1578,6 +1580,7 @@ $project-edit-action-spacing: 1.5rem;
 
   .project-edit-nav {
     padding-bottom: 1rem;
+    display: block;
   }
 
   .project-edit-nav-item {
@@ -1586,6 +1589,11 @@ $project-edit-action-spacing: 1.5rem;
 
   .project-edit-sidebar-footer {
     padding-top: 1rem;
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+    background: #ffffff;
+    z-index: 10;
   }
 
   .project-edit-content {
@@ -1595,6 +1603,7 @@ $project-edit-action-spacing: 1.5rem;
   .project-edit-content-inner {
     max-width: none;
     padding: 1.5rem;
+    margin-bottom: 80px;
   }
 
   .project-edit-settings-row {
@@ -1626,6 +1635,7 @@ $project-edit-action-spacing: 1.5rem;
 
   .project-edit-member-item {
     display: grid;
+    gap: 25px;
   }
 
   .project-edit-member-actions {
diff --git a/pages/workspace/[id]/projects/[projectId]/index.vue b/pages/workspace/[id]/projects/[projectId]/index.vue
index f4351cd..6443e42 100644
--- a/pages/workspace/[id]/projects/[projectId]/index.vue
+++ b/pages/workspace/[id]/projects/[projectId]/index.vue
@@ -896,7 +896,7 @@ async function confirmRemoveContributor(contributor: WorkspaceProjectContributor
     okTitle: 'Remove',
     okVariant: 'danger',
     cancelTitle: 'Cancel',
-    cancelClass: 'btn-link p-0',
+    cancelClass: 'btn-link',
     cancelVariant: null,
   }).show();