From 22282d24805cfd904b4778613e2816a62c10f199 Mon Sep 17 00:00:00 2001
From: safavimohadeseh78 <safavimohadeseh78@gmail.com>
Date: Mon, 10 Aug 2026 18:54:02 +0200
Subject: [PATCH] Fix desktop shell scroll, product cards, and profile/order
 layouts.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/assets/styles/app-shell.css               |  58 +++++++
 src/assets/styles/desktop-pages.css           |  11 +-
 src/assets/styles/desktop.css                 |  23 +--
 src/components/layout/DesktopHeader.vue       |   6 +-
 src/components/layout/DesktopSidebar.vue      |  31 ++--
 src/components/orders/OrderStatusHero.vue     |  40 +++--
 src/views/cart/CartView.vue                   |   6 +
 src/views/cart/components/DesktopCartPage.vue |  14 +-
 src/views/orders/OrderDetailView.vue          | 112 +++++++++++--
 .../orders/components/DesktopOrdersPage.vue   |   4 -
 .../components/DesktopProductPage.vue         |  32 ++--
 src/views/profile/ProfileEditView.vue         | 148 ++++++++++++------
 .../components/ProfileSubpageLayout.vue       |  23 ++-
 13 files changed, 375 insertions(+), 133 deletions(-)

diff --git a/src/assets/styles/app-shell.css b/src/assets/styles/app-shell.css
index ca2ddcf..ad078b6 100644
--- a/src/assets/styles/app-shell.css
+++ b/src/assets/styles/app-shell.css
@@ -99,8 +99,47 @@
     background: var(--color-page-background);
   }
 
+  .app-shell--with-nav .app-layout {
+    position: relative;
+  }
+
+  /* One continuous divider under sidebar brand + top header */
+  .app-shell--with-nav .app-layout::after {
+    content: '';
+    position: absolute;
+    top: var(--header-height);
+    inset-inline: 0;
+    height: 1px;
+    background: var(--color-border);
+    z-index: 30;
+    pointer-events: none;
+  }
+
+  /*
+   * Scroll lives on app-main__content. Children must not shrink+clip
+   * (flex + overflow:hidden), or short viewports hide the bottom of pages.
+   */
   .app-shell--with-nav .app-main__content {
+    overflow-x: hidden;
     overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .app-shell--with-nav .app-content,
+  .app-shell--with-nav .page-transition {
+    flex: 1 0 auto;
+    min-height: min-content;
+    overflow: visible;
+  }
+
+  /* Let route roots grow with content so the shell scroll area can work */
+  .app-shell--with-nav .page-transition > * {
+    flex: 1 0 auto;
+    min-height: min-content;
+    height: auto;
+    max-height: none;
+    overflow: visible;
   }
 }
 
@@ -117,6 +156,8 @@
   width: 100%;
   height: auto;
   max-height: calc(100dvh - 32px);
+  min-height: 0;
+  overflow: hidden;
 }
 
 .app-shell--no-nav .app-frame {
@@ -124,9 +165,24 @@
   width: 100%;
   height: auto;
   max-height: calc(100dvh - 32px);
+  min-height: 0;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-frame);
   background: var(--color-surface);
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+.app-shell--no-nav .app-main,
+.app-shell--no-nav .app-main__content,
+.app-shell--no-nav .app-content,
+.app-shell--no-nav .page-transition {
+  flex: 1 0 auto;
+  min-height: min-content;
+  overflow: visible;
+  height: auto;
 }
 
 .app-shell--no-nav .app-content {
@@ -135,6 +191,8 @@
 
 .app-shell--no-nav .page {
   background: transparent;
+  overflow: visible;
+  min-height: auto;
 }
 
 .app-shell--no-nav.app-shell--wide .app-layout,
diff --git a/src/assets/styles/desktop-pages.css b/src/assets/styles/desktop-pages.css
index 4e67402..e56a833 100644
--- a/src/assets/styles/desktop-pages.css
+++ b/src/assets/styles/desktop-pages.css
@@ -2,10 +2,10 @@
 
 @media (min-width: 768px) {
   .desktop-page {
-    flex: 1;
+    flex: 1 0 auto;
     display: flex;
     flex-direction: column;
-    min-height: 0;
+    min-height: auto;
     width: 100%;
     max-width: var(--content-max-width);
     margin-inline: auto;
@@ -32,14 +32,13 @@
 
   .desktop-two-col {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) var(--summary-panel-width, 320px);
+    grid-template-columns: minmax(0, 1fr);
     gap: 24px;
     align-items: start;
   }
 
   .desktop-two-col__main {
     min-width: 0;
-    overflow: hidden;
   }
 
   .desktop-summary-panel {
@@ -218,6 +217,10 @@
     margin-bottom: 24px;
   }
 
+  .desktop-two-col:has(> .desktop-summary-panel) {
+    grid-template-columns: minmax(0, 1fr) var(--summary-panel-width, 320px);
+  }
+
   .desktop-grid-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 20px;
diff --git a/src/assets/styles/desktop.css b/src/assets/styles/desktop.css
index 57460f7..946f035 100644
--- a/src/assets/styles/desktop.css
+++ b/src/assets/styles/desktop.css
@@ -12,11 +12,15 @@
     max-width: var(--content-max-width);
     margin-inline: auto;
     width: 100%;
+    overflow: visible;
+    min-height: auto;
+    flex: 1 0 auto;
   }
 
   .page__scroll {
     overflow: visible;
     flex: none;
+    min-height: auto;
   }
 
   .page__scroll--with-nav {
@@ -201,25 +205,6 @@
     background: var(--color-primary-hover);
   }
 
-  .orders-toolbar__layout-btn {
-    width: 40px;
-    height: 40px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
-    background: var(--color-surface);
-    color: var(--color-text-muted);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-  }
-
-  .orders-toolbar__layout-btn:hover {
-    border-color: var(--color-primary);
-    color: var(--color-primary);
-  }
-
   .orders-toolbar__pills {
     display: flex;
     align-items: center;
diff --git a/src/components/layout/DesktopHeader.vue b/src/components/layout/DesktopHeader.vue
index d6c7689..08cbeca 100644
--- a/src/components/layout/DesktopHeader.vue
+++ b/src/components/layout/DesktopHeader.vue
@@ -99,12 +99,16 @@ function logout() {
   display: none;
   flex-shrink: 0;
   height: var(--header-height);
+  min-height: var(--header-height);
+  max-height: var(--header-height);
+  box-sizing: border-box;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 0 28px;
   background: var(--color-surface);
-  border-bottom: 1px solid var(--color-border);
+  /* Border drawn by shared shell rule so it aligns with the sidebar brand */
+  border-bottom: none;
 }
 
 @media (min-width: 768px) {
diff --git a/src/components/layout/DesktopSidebar.vue b/src/components/layout/DesktopSidebar.vue
index b894521..3253c20 100644
--- a/src/components/layout/DesktopSidebar.vue
+++ b/src/components/layout/DesktopSidebar.vue
@@ -80,7 +80,7 @@ function navigate(item: (typeof DESKTOP_NAV_ITEMS)[number]) {
   height: 100%;
   background: var(--color-surface);
   border-inline-start: 1px solid var(--color-border);
-  padding: 20px 12px;
+  padding: 0;
   overflow-y: auto;
 }
 
@@ -90,25 +90,24 @@ function navigate(item: (typeof DESKTOP_NAV_ITEMS)[number]) {
   }
 }
 
-@media (min-width: 1200px) {
-  .desktop-sidebar {
-    padding: 24px 16px;
-  }
-}
-
 .desktop-sidebar__brand {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
-  padding: 0 8px 20px;
-  margin-bottom: 8px;
-  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+  height: var(--header-height);
+  min-height: var(--header-height);
+  max-height: var(--header-height);
+  box-sizing: border-box;
+  padding: 0 20px;
+  /* Border drawn by shared shell rule so it aligns with the top header */
+  border-bottom: none;
 }
 
 @media (min-width: 1200px) {
   .desktop-sidebar__brand {
-    padding: 0 12px 24px;
+    padding: 0 28px;
   }
 }
 
@@ -138,6 +137,13 @@ function navigate(item: (typeof DESKTOP_NAV_ITEMS)[number]) {
   flex-direction: column;
   gap: 4px;
   flex: 1;
+  padding: 12px 12px 0;
+}
+
+@media (min-width: 1200px) {
+  .desktop-sidebar__nav {
+    padding: 16px 16px 0;
+  }
 }
 
 .desktop-sidebar__item {
@@ -222,7 +228,7 @@ function navigate(item: (typeof DESKTOP_NAV_ITEMS)[number]) {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  margin-top: auto;
+  margin: auto 12px 20px;
   padding: 14px;
   background: var(--color-primary-soft);
   border-radius: var(--radius-lg);
@@ -230,6 +236,7 @@ function navigate(item: (typeof DESKTOP_NAV_ITEMS)[number]) {
 
 @media (min-width: 1200px) {
   .desktop-sidebar__support {
+    margin: auto 16px 24px;
     padding: 16px;
   }
 }
diff --git a/src/components/orders/OrderStatusHero.vue b/src/components/orders/OrderStatusHero.vue
index 981d9fa..76f7041 100644
--- a/src/components/orders/OrderStatusHero.vue
+++ b/src/components/orders/OrderStatusHero.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import type { StatusHeroConfig } from '@/utils/orderTracking'
 
 defineProps<{
   config: StatusHeroConfig
 }>()
+
+const icons = {
+  waiting: 'vuesax-linear:timer-1',
+  success: 'vuesax-linear:tick-circle',
+  info: 'vuesax-linear:info-circle',
+  none: 'vuesax-linear:info-circle',
+} as const
 </script>
 
 <template>
-  <div class="status-hero" :class="`status-hero--${config.variant}`">
+  <div v-if="config.variant !== 'none'" class="status-hero" :class="`status-hero--${config.variant}`">
     <div class="status-hero__icon" aria-hidden="true">
-      <span v-if="config.variant === 'waiting'">⏳</span>
-      <span v-else-if="config.variant === 'success'">✓</span>
-      <span v-else>ℹ</span>
+      <BasicIcon :icon="icons[config.variant]" :size="28" :stroke-width="1.5" />
     </div>
     <h2 class="status-hero__title">{{ config.title }}</h2>
     <p v-if="config.description" class="status-hero__desc">{{ config.description }}</p>
@@ -34,8 +40,8 @@ defineProps<{
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.5rem;
   margin-bottom: 14px;
+  color: var(--color-primary);
 }
 
 .status-hero--waiting .status-hero__icon {
@@ -44,10 +50,8 @@ defineProps<{
 }
 
 .status-hero--success .status-hero__icon {
-  background: var(--color-success);
-  color: var(--color-text-on-primary, #fff);
-  font-size: 1.75rem;
-  font-weight: 700;
+  background: var(--color-primary-soft);
+  color: var(--color-success);
 }
 
 .status-hero--info .status-hero__icon {
@@ -73,4 +77,22 @@ defineProps<{
   color: var(--color-text-muted);
   line-height: 1.7;
 }
+
+@media (min-width: 768px) {
+  .status-hero {
+    align-items: flex-start;
+    text-align: start;
+    padding: 0;
+  }
+
+  .status-hero__icon {
+    width: 52px;
+    height: 52px;
+    margin-bottom: 12px;
+  }
+
+  .status-hero__desc {
+    max-width: none;
+  }
+}
 </style>
diff --git a/src/views/cart/CartView.vue b/src/views/cart/CartView.vue
index 9dbd0e0..e79132b 100644
--- a/src/views/cart/CartView.vue
+++ b/src/views/cart/CartView.vue
@@ -101,6 +101,12 @@ function goToOrdering() {
 }
 
 @media (min-width: 768px) {
+  .cart-view {
+    flex: 1 0 auto;
+    min-height: auto;
+    overflow: visible;
+  }
+
   .dialog-actions {
     flex-direction: row;
     justify-content: flex-end;
diff --git a/src/views/cart/components/DesktopCartPage.vue b/src/views/cart/components/DesktopCartPage.vue
index 78c39d2..e877ace 100644
--- a/src/views/cart/components/DesktopCartPage.vue
+++ b/src/views/cart/components/DesktopCartPage.vue
@@ -249,12 +249,18 @@ const quickLinks = [
 .cart-desktop-page__layout {
   direction: ltr;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 300px;
+  grid-template-columns: minmax(0, 1fr);
   gap: 20px;
   align-items: start;
   margin-bottom: 24px;
 }
 
+@media (min-width: 1100px) {
+  .cart-desktop-page__layout {
+    grid-template-columns: minmax(0, 1fr) 300px;
+  }
+}
+
 .cart-desktop-page__main,
 .cart-desktop-page__sidebar {
   direction: rtl;
@@ -400,13 +406,13 @@ const quickLinks = [
   font-size: 0.8125rem;
   font-weight: 600;
   color: var(--color-text-muted);
-  background: #f8fafc;
+  background: var(--color-bg);
   border-bottom: 1px solid var(--color-border);
 }
 
 .cart-items-table td {
   padding: 16px 18px;
-  border-bottom: 1px solid #f1f5f9;
+  border-bottom: 1px solid var(--color-border);
   color: var(--color-text);
   vertical-align: middle;
 }
@@ -423,7 +429,7 @@ const quickLinks = [
   border: none;
   background: none;
   cursor: pointer;
-  color: #64748b;
+  color: var(--color-text-muted);
   padding: 4px;
   display: inline-flex;
 }
diff --git a/src/views/orders/OrderDetailView.vue b/src/views/orders/OrderDetailView.vue
index b8b9e47..01611ad 100644
--- a/src/views/orders/OrderDetailView.vue
+++ b/src/views/orders/OrderDetailView.vue
@@ -57,6 +57,8 @@ watch(
   (wide) => {
     if (!wide) return
     showTracking.value = true
+    showTimeline.value = true
+    showOrderDetails.value = true
     if (route.query.track === '1' || route.query.receipt === '1') return
     void router.replace({
       query: { ...route.query, track: '1' },
@@ -296,6 +298,13 @@ async function submitReceipt() {
       </div>
 
       <div v-if="showTracking" class="order-detail-page__tracking">
+        <section class="order-detail-page__tracking-aside">
+          <div class="tracking-card tracking-card--hero">
+            <OrderStatusHero v-if="statusHero" :config="statusHero" />
+            <OrderTrackingSummary :order="order" />
+          </div>
+        </section>
+
         <section class="order-detail-page__tracking-main">
           <div v-if="nextAction" class="order-next-action">
             <span class="order-next-action__text">برای ادامه سفارش، این مرحله باقی مانده است.</span>
@@ -321,6 +330,7 @@ async function submitReceipt() {
             </button>
 
             <div v-show="showTimeline" class="tracking-collapse__body">
+              <h2 class="tracking-panel__title desktop-only">پیگیری وضعیت</h2>
               <div class="tracking-collapse__section tracking-collapse__section--flush">
                 <OrderTrackingTimeline :order="order" />
               </div>
@@ -344,6 +354,7 @@ async function submitReceipt() {
             </button>
 
             <div v-show="showOrderDetails" class="tracking-collapse__body">
+              <h2 class="tracking-panel__title desktop-only">{{ trackingFooterLabel }}</h2>
               <div class="tracking-collapse__section">
                 <h3 class="tracking-card__title">اقلام سفارش</h3>
                 <div v-for="item in order.items" :key="item.id" class="item-row">
@@ -423,13 +434,6 @@ async function submitReceipt() {
             </div>
           </div>
         </section>
-
-        <section class="order-detail-page__tracking-aside">
-          <div class="tracking-card tracking-card--hero">
-            <OrderStatusHero v-if="statusHero" :config="statusHero" />
-            <OrderTrackingSummary :order="order" />
-          </div>
-        </section>
       </div>
     </div>
 
@@ -508,12 +512,31 @@ async function submitReceipt() {
   .order-detail-page {
     padding: 20px 0 28px;
     background: transparent;
-    max-width: none;
-    margin-inline: 0;
+    max-width: var(--content-max-width);
+    margin-inline: auto;
     width: 100%;
   }
 }
 
+.order-detail-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--color-primary);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.order-detail-back:hover {
+  color: var(--color-primary-hover);
+}
+
 .order-detail-page__nav {
   display: grid;
   grid-template-columns: 40px 1fr 40px;
@@ -699,7 +722,7 @@ async function submitReceipt() {
   width: 100%;
 }
 
-/* Mobile: status first, then timeline */
+/* Mobile: status first (above content) */
 .order-detail-page__tracking-aside {
   order: -1;
 }
@@ -707,8 +730,8 @@ async function submitReceipt() {
 .tracking-card {
   padding: 16px;
   border: 1px solid var(--color-border);
-  border-radius: 16px;
-  background: var(--color-elevated);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
   box-shadow: var(--shadow-sm);
 }
 
@@ -718,6 +741,10 @@ async function submitReceipt() {
   gap: 12px;
 }
 
+.tracking-panel__title {
+  display: none;
+}
+
 .order-detail-page__tracking :deep(.status-hero) {
   padding: 4px 0 8px;
 }
@@ -806,9 +833,20 @@ async function submitReceipt() {
 }
 
 @media (min-width: 768px) {
+  .order-detail-page__desktop-head {
+    margin-bottom: 8px;
+  }
+
+  .order-detail-page__body {
+    overflow: visible;
+    min-height: auto;
+    padding-bottom: 8px;
+  }
+
   .order-detail-page__tracking {
     display: grid;
-    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.9fr);
+    /* RTL: first column (status) sits beside sidebar on the right */
+    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
     gap: 20px;
     align-items: start;
     margin-top: 8px;
@@ -820,6 +858,52 @@ async function submitReceipt() {
     top: 16px;
   }
 
+  .order-detail-page__tracking-main {
+    gap: 16px;
+  }
+
+  .tracking-card--hero {
+    padding: 20px;
+  }
+
+  .tracking-collapse {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
+  }
+
+  .tracking-collapse__trigger {
+    display: none;
+  }
+
+  .tracking-collapse__body {
+    display: flex !important;
+    padding: 20px;
+    border-top: none;
+    gap: 16px;
+  }
+
+  .tracking-panel__title {
+    display: block;
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--color-text);
+  }
+
+  .tracking-collapse__section {
+    padding-top: 0;
+  }
+
+  .tracking-collapse__section + .tracking-collapse__section,
+  .tracking-collapse__section + .tracking-alert,
+  .tracking-alert + .tracking-collapse__section {
+    padding-top: 16px;
+    border-top: 1px solid var(--color-border);
+  }
+
   .order-detail-page__footer {
     display: none;
   }
@@ -827,7 +911,7 @@ async function submitReceipt() {
 
 @media (min-width: 1200px) {
   .order-detail-page__tracking {
-    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.85fr);
+    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
     gap: 24px;
   }
 }
diff --git a/src/views/orders/components/DesktopOrdersPage.vue b/src/views/orders/components/DesktopOrdersPage.vue
index abfbab5..533e729 100644
--- a/src/views/orders/components/DesktopOrdersPage.vue
+++ b/src/views/orders/components/DesktopOrdersPage.vue
@@ -7,7 +7,6 @@ import IconHourglass from '@/components/icons/IconHourglass.vue'
 import IconProgressClock from '@/components/icons/IconProgressClock.vue'
 import IconCheckCircleOutline from '@/components/icons/IconCheckCircleOutline.vue'
 import IconFilter from '@/components/icons/IconFilter.vue'
-import IconLayoutGrid from '@/components/icons/IconLayoutGrid.vue'
 import IconMoreVertical from '@/components/icons/IconMoreVertical.vue'
 import IconChevronLeft from '@/components/icons/IconChevronLeft.vue'
 import { formatDateTime, formatNumber } from '@/utils/format'
@@ -106,9 +105,6 @@ const emit = defineEmits<{
           <IconFilter :size="18" />
           فیلترها
         </button>
-        <button type="button" class="orders-toolbar__layout-btn" aria-label="نمای جدول">
-          <IconLayoutGrid :size="18" />
-        </button>
       </div>
       <div class="orders-toolbar__pills" role="tablist" aria-label="فیلتر وضعیت">
         <button
diff --git a/src/views/products/components/DesktopProductPage.vue b/src/views/products/components/DesktopProductPage.vue
index 3737f19..3b20c6b 100644
--- a/src/views/products/components/DesktopProductPage.vue
+++ b/src/views/products/components/DesktopProductPage.vue
@@ -193,55 +193,65 @@ const emit = defineEmits<{
 
 .product-desktop-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
   gap: 16px;
 }
 
-@media (min-width: 1200px) {
-  .product-desktop-grid {
-    grid-template-columns: repeat(2, minmax(280px, 420px));
-  }
-}
-
 .product-desktop-card {
   display: flex;
-  gap: 14px;
+  flex-direction: column;
+  gap: 12px;
   padding: 16px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-surface);
   box-shadow: var(--shadow-sm);
-  max-width: 420px;
+  min-width: 0;
+}
+
+@media (min-width: 1200px) {
+  .product-desktop-card {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 14px;
+    max-width: 420px;
+  }
 }
 
 .product-desktop-card__preview {
   width: 72px;
   height: 72px;
   border-radius: var(--radius-sm);
-  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
+  background: linear-gradient(135deg, var(--color-border-light), var(--color-border));
   flex-shrink: 0;
 }
 
 .product-desktop-card__body {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .product-desktop-card__head {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  gap: 8px;
+  align-items: baseline;
+  gap: 4px 8px;
   margin-bottom: 4px;
 }
 
 .product-desktop-card__head h3 {
   margin: 0;
   font-size: 0.9375rem;
+  line-height: 1.35;
 }
 
 .product-desktop-card__head span {
   font-size: 0.75rem;
   color: var(--color-text-muted);
+  white-space: nowrap;
 }
 
 .product-desktop-card__meta {
diff --git a/src/views/profile/ProfileEditView.vue b/src/views/profile/ProfileEditView.vue
index 54ed08b..0da23c2 100644
--- a/src/views/profile/ProfileEditView.vue
+++ b/src/views/profile/ProfileEditView.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import BaseInput from '@/components/ui/BaseInput.vue'
 import FormErrorBanner from '@/components/ui/FormErrorBanner.vue'
 import BaseButton from '@/components/ui/BaseButton.vue'
-import IconChevronBack from '@/components/icons/IconChevronBack.vue'
+import ProfileSubpageLayout from '@/views/profile/components/ProfileSubpageLayout.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import {
   FORM_VALIDATION_SUMMARY,
   clearFieldError,
@@ -13,7 +13,6 @@ import {
   type FieldErrors,
 } from '@/utils/formErrors'
 
-const router = useRouter()
 const auth = useAuthStore()
 
 const firstName = ref(auth.user?.firstName ?? '')
@@ -63,21 +62,24 @@ async function save() {
 </script>
 
 <template>
-  <div class="page profile-edit-page">
-    <header class="profile-edit-page__nav">
-      <button type="button" class="nav-btn" aria-label="بازگشت" @click="router.push('/profile')">
-        <IconChevronBack :size="20" />
-      </button>
-      <h1 class="profile-edit-page__title">اطلاعات کاربری</h1>
-      <button type="button" class="nav-btn nav-btn--ghost" aria-hidden="true" tabindex="-1">
-        <IconChevronBack :size="18" class="nav-btn__flip" />
-      </button>
-    </header>
+  <ProfileSubpageLayout
+    title="اطلاعات کاربری"
+    subtitle="ویرایش نام و کد ملی حساب کاربری"
+  >
+    <FormErrorBanner :message="formError" />
 
-    <div class="page__scroll page__scroll--with-nav">
-      <div class="profile-form card">
-        <FormErrorBanner :message="formError" />
+    <div class="profile-edit">
+      <div class="profile-edit__intro">
+        <span class="profile-edit__intro-icon" aria-hidden="true">
+          <BasicIcon icon="vuesax-linear:profile-circle" :size="22" :stroke-width="1.5" />
+        </span>
+        <div class="profile-edit__intro-text">
+          <strong>مشخصات فردی</strong>
+          <p>این اطلاعات روی سفارش‌ها و چک‌های ثبت‌شده نمایش داده می‌شود.</p>
+        </div>
+      </div>
 
+      <div class="profile-edit__grid">
         <BaseInput
           v-model="firstName"
           label="نام"
@@ -92,65 +94,113 @@ async function save() {
         />
         <BaseInput
           v-model="nationalId"
+          class="profile-edit__full"
           label="کد ملی"
           maxlength="10"
+          inputmode="numeric"
           hint="برای ثبت چک الزامی است"
           :error="fieldErrors.nationalId"
           @update:model-value="clearField('nationalId')"
         />
-        <BaseButton block @click="save">ذخیره تغییرات</BaseButton>
-        <p v-if="saved" class="profile-form__saved">ذخیره شد ✓</p>
+      </div>
+
+      <div class="profile-edit__actions">
+        <BaseButton class="profile-edit__save" @click="save">ذخیره تغییرات</BaseButton>
+        <p v-if="saved" class="profile-edit__saved">ذخیره شد ✓</p>
       </div>
     </div>
-  </div>
+  </ProfileSubpageLayout>
 </template>
 
 <style scoped>
-.profile-edit-page {
-  overflow: hidden;
+.profile-edit {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
-.profile-edit-page__nav {
+.profile-edit__intro {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+}
+
+.profile-edit__intro-icon {
   flex-shrink: 0;
-  display: grid;
-  grid-template-columns: 40px 1fr 40px;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.profile-edit-page__title {
-  margin: 0;
-  font-size: 1.0625rem;
-  font-weight: 700;
-  text-align: center;
-}
-
-.nav-btn {
   width: 40px;
   height: 40px;
-  border: none;
-  background: none;
-  color: var(--color-text);
-  cursor: pointer;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
 }
 
-.nav-btn--ghost {
-  visibility: hidden;
-  pointer-events: none;
+.profile-edit__intro-text {
+  min-width: 0;
 }
 
-.nav-btn__flip {
-  transform: scaleX(-1);
+.profile-edit__intro-text strong {
+  display: block;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--color-text);
 }
 
-.profile-form__saved {
-  margin: 8px 0 0;
+.profile-edit__intro-text p {
+  margin: 4px 0 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--color-text-muted);
+}
+
+.profile-edit__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 14px;
+}
+
+@media (min-width: 768px) {
+  .profile-edit__grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+
+  .profile-edit__full {
+    grid-column: 1 / -1;
+  }
+}
+
+.profile-edit__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+  padding-top: 4px;
+}
+
+@media (min-width: 768px) {
+  .profile-edit__actions {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 14px;
+  }
+
+  .profile-edit__save {
+    width: auto;
+    min-width: 180px;
+  }
+}
+
+.profile-edit__saved {
+  margin: 0;
   font-size: 0.875rem;
-  text-align: center;
   color: var(--color-success);
 }
 </style>
diff --git a/src/views/profile/components/ProfileSubpageLayout.vue b/src/views/profile/components/ProfileSubpageLayout.vue
index a8a9ea3..99b1004 100644
--- a/src/views/profile/components/ProfileSubpageLayout.vue
+++ b/src/views/profile/components/ProfileSubpageLayout.vue
@@ -36,7 +36,7 @@ function goBack() {
 
   <!-- Desktop -->
   <div class="desktop-page profile-subpage-desktop desktop-only">
-    <header class="desktop-page__head">
+    <header class="desktop-page__head profile-subpage-desktop__head">
       <button type="button" class="profile-subpage-desktop__back" @click="goBack">
         <IconChevronBack :size="18" />
         بازگشت به پروفایل
@@ -45,9 +45,9 @@ function goBack() {
       <p v-if="subtitle" class="desktop-page__subtitle">{{ subtitle }}</p>
     </header>
 
-    <div class="profile-subpage-desktop__card card">
+    <section class="profile-subpage-desktop__panel card">
       <slot />
-    </div>
+    </section>
   </div>
 </template>
 
@@ -97,6 +97,10 @@ function goBack() {
   padding: 20px 16px;
 }
 
+.profile-subpage-desktop__head {
+  max-width: 720px;
+}
+
 .profile-subpage-desktop__back {
   display: inline-flex;
   align-items: center;
@@ -106,13 +110,20 @@ function goBack() {
   border: none;
   background: none;
   color: var(--color-primary);
+  font-family: inherit;
   font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
 }
 
-.profile-subpage-desktop__card {
-  max-width: 560px;
-  padding: 24px;
+.profile-subpage-desktop__back:hover {
+  color: var(--color-primary-hover);
+}
+
+.profile-subpage-desktop__panel {
+  width: 100%;
+  max-width: 720px;
+  padding: 28px;
+  box-shadow: var(--shadow-card);
 }
 </style>