feat: update PurchaseSubscriptionSidebar for mobile visibility and styling adjustments

assets/admin/components/layout/PurchaseSubscriptionSidebar.test.tsx

@@ -19,4 +19,12 @@ describe('PurchaseSubscriptionSidebar — settings menu', () => {
     expect(screen.getByRole('link', { name: 'پرسنل' })).toHaveAttribute('aria-current', 'page');
     expect(screen.getByRole('link', { name: 'مدیریت منشی' })).not.toHaveAttribute('aria-current');
   });
+
+  // regression: the settings menu must stay visible on mobile (was `hidden lg:block`,
+  // which dropped the whole menu below the lg breakpoint → no settings nav on phones).
+  it('is not hidden on mobile', () => {
+    renderWithProviders(<PurchaseSubscriptionSidebar active="staff" />, { route: '/admin/staff' });
+    const nav = screen.getByRole('complementary', { name: 'منوی تنظیمات' });
+    expect(nav.className).not.toMatch(/\bhidden\b/);
+  });
 });

assets/admin/components/layout/PurchaseSubscriptionSidebar.tsx

@@ -46,8 +46,8 @@ export default function PurchaseSubscriptionSidebar({ active }: { active: string
     <aside
       dir="rtl"
       aria-label="منوی تنظیمات"
-      className="hidden lg:block"
-      style={{ alignSelf: 'start', position: 'sticky', top: 'calc(var(--topbar-h) + 16px)' }}
+      className="settings-subnav lg:sticky"
+      style={{ alignSelf: 'start', top: 'calc(var(--topbar-h) + 16px)' }}
     >
       <div style={{
         fontSize: 16, fontWeight: 800, color: 'var(--text-2)', textAlign: 'right',

assets/admin/styles.css

@@ -907,8 +907,8 @@ html, body { max-width: 100%; overflow-x: hidden; }
 .save-bar.ok { border-color: var(--success); border-color: color-mix(in oklch, var(--success) 45%, var(--border)); }
 
 @media (max-width: 900px) {
-  .settings-layout { grid-template-columns: 1fr; }
-  .settings-nav { position: static; }
+  .settings-layout { grid-template-columns: minmax(0, 1fr); }
+  .settings-nav { position: static; min-width: 0; }
   .settings-nav-list { flex-direction: row; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
   .settings-nav-item { flex-shrink: 0; width: auto; }
   .settings-nav-item .dot { display: none; }