From 952fcf3634ff7d9a2b9e6fbc2ade0c66a39ff278 Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Wed, 15 Jul 2026 17:35:24 +0330
Subject: [PATCH] style: enhance SettingsLayout and AppointmentSettingsPage for
 improved layout and spacing

---
 assets/admin/components/layout/SettingsLayout.tsx | 7 ++-----
 assets/admin/pages/AppointmentSettingsPage.tsx    | 5 ++++-
 assets/admin/styles.css                           | 3 +++
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/assets/admin/components/layout/SettingsLayout.tsx b/assets/admin/components/layout/SettingsLayout.tsx
index cdcbc3b9..c7c26f61 100644
--- a/assets/admin/components/layout/SettingsLayout.tsx
+++ b/assets/admin/components/layout/SettingsLayout.tsx
@@ -49,11 +49,8 @@ export function menuForRole(role: string | null | undefined): SettingsMenuItem[]
  */
 export default function SettingsLayout({ active, children }: { active: string; children: React.ReactNode }) {
   return (
-    <div className="fade-in" dir="rtl" style={{ width: '100%' }}>
-      <div
-        className="grid grid-cols-1 lg:grid-cols-[248px_minmax(0,1fr)] gap-5"
-        style={{ marginInlineStart: 'calc(-1 * var(--gap))' }}
-      >
+    <div className="fade-in settings-shell" dir="rtl" style={{ width: '100%' }}>
+      <div className="grid grid-cols-1 lg:grid-cols-[248px_minmax(0,1fr)] gap-5">
         <PurchaseSubscriptionSidebar active={active} />
         <div style={{ minWidth: 0 }}>{children}</div>
       </div>
diff --git a/assets/admin/pages/AppointmentSettingsPage.tsx b/assets/admin/pages/AppointmentSettingsPage.tsx
index f1d4be08..70584f99 100644
--- a/assets/admin/pages/AppointmentSettingsPage.tsx
+++ b/assets/admin/pages/AppointmentSettingsPage.tsx
@@ -27,7 +27,10 @@ export default function AppointmentSettingsPage() {
 
   return (
     <SettingsLayout active="appointment">
-      <div style={{ background: 'var(--surface)', minWidth: 0 }}>
+      <div
+        style={{ background: 'var(--surface)', minWidth: 0 }}
+        className="px-4 py-4 md:px-6 md:py-6 rounded-[var(--r-lg)]"
+      >
         <h1 className="section-title" style={{ marginBottom: 16 }}>مدیریت نوبت دهی</h1>
 
         <FreeVisitPrice />
diff --git a/assets/admin/styles.css b/assets/admin/styles.css
index c1bdc6e2..d8ffd5cc 100644
--- a/assets/admin/styles.css
+++ b/assets/admin/styles.css
@@ -317,6 +317,9 @@ body {
 }
 .app[data-collapsed="true"] .main { margin-right: var(--collapsed-w); }
 .content { padding: var(--gap); max-width: 1480px; width: 100%; margin: 0 auto; }
+/* Settings pages go full-bleed: no max-width centering, and the settings menu
+   sits flush against the main nav (drop the inline-start / right padding). */
+.content:has(> .settings-shell) { max-width: none; padding-inline-start: 0; }
 
 /* ── Sidebar ─────────────────────────────────────────────────── */
 .sidebar {