fix(desktop): lay out dashboard sub-pages + form pages for wide screens

- HeaderWithSupport is now lg:hidden (all its callers are desktop-full-width
  store/profile pages), removing the stray mobile back+support bar on desktop.
- Constrain + title the previously mobile-only pages so their content doesn't
  stretch edge-to-edge on desktop: store edit/create form (StoreForm), add
  product, shipping method, financial sub-pages (cash-funds/reports/
  transactions), order detail, instagram auth; and profile add/edit address,
  set detail, and payment result. Forms use a narrow centered column, lists/
  details a wider one. Transactions keeps its filter button (header restyled,
  not hidden).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app/components/HeaderWithSupport.tsx

@@ -39,7 +39,9 @@ const HeaderWithSupport = memo(function HeaderWithSupport({
 
   return (
     <>
-      <div className="sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+      {/* Mobile only — on desktop the dashboard sidebar / desktop header stands
+          in for this back+support bar. */}
+      <div className="lg:hidden sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
         <div className="relative flex flex-row h-[65px] bg-WHITE w-full items-center justify-center border-b border-inner-border">
           <ArrowRight
             onClick={onBack}

app/components/store/StoreForm.tsx

@@ -826,12 +826,15 @@ export default function StoreForm({ mode, storeId }: StoreFormProps) {
 
   const contentClass =
     mode === "create"
-      ? "flex flex-col gap-6 w-full px-4 pt-6"
-      : "flex flex-col gap-6 p-4 bg-WHITE";
+      ? "flex flex-col gap-6 w-full px-4 pt-6 lg:max-w-[640px] lg:mx-auto lg:pt-8"
+      : "flex flex-col gap-6 p-4 bg-WHITE lg:max-w-[640px] lg:mx-auto lg:pt-8";
 
   return (
     <div className={containerClass}>
       {renderHeader()}
+      <h1 className="hidden lg:block text-[28px] font-extrabold px-4 lg:max-w-[640px] lg:mx-auto lg:w-full lg:px-0 lg:pt-8">
+        {mode === "create" ? "ایجاد فروشگاه" : "ویرایش اطلاعات فروشگاه"}
+      </h1>
 
       <div className={contentClass}>
         {renderLogoSection()}

app/routes/profile.location.add.tsx

@@ -19,8 +19,11 @@ export default function AddLocation() {
   const [showMap, setShowMap] = useState(false);
 
   return (
-    <div className="flex flex-col gap-2 w-full">
+    <div className="flex flex-col gap-2 w-full lg:max-w-[820px] lg:mx-auto lg:pt-6">
       <ProfilePagesHeader title="افزودن آدرس" />
+      <h1 className="hidden lg:block text-[28px] font-extrabold px-4 mb-2">
+        افزودن آدرس
+      </h1>
 
       {!showMap ? (
         // Show form first with option to use map

app/routes/profile.location.edit.$id.tsx

@@ -62,8 +62,11 @@ export default function EditLocation() {
     };
   }, []);
   return (
-    <div className="flex flex-col gap-2 w-full">
+    <div className="flex flex-col gap-2 w-full lg:max-w-[820px] lg:mx-auto lg:pt-6">
       <ProfilePagesHeader title="ویرایش آدرس" />
+      <h1 className="hidden lg:block text-[28px] font-extrabold px-4 mb-2">
+        ویرایش آدرس
+      </h1>
       <UiProvider
         isLoading={isLoading}
         isEmpty={!addressData}

app/routes/profile.sets.$id.tsx

@@ -61,7 +61,7 @@ export default function SetDetail() {
   }
 
   return (
-    <div className="flex flex-col min-h-screen bg-WHITE2">
+    <div className="flex flex-col min-h-screen bg-WHITE2 lg:bg-transparent lg:max-w-[1100px] lg:mx-auto lg:w-full lg:pt-6">
       {/* Header */}
       <ProfilePagesHeader
         title={collection?.title || "جزئیات ست"}

app/routes/profile.wallet.payment.tsx

@@ -27,7 +27,7 @@ export default function PaymentResult() {
   const navigate = useNavigate();
 
   return (
-    <div className="flex flex-col gap-6 w-full items-center">
+    <div className="flex flex-col gap-6 w-full items-center lg:max-w-[640px] lg:mx-auto lg:pt-6">
       <ProfilePagesHeader title="نتیجه پرداخت" />
       <div className="flex flex-col gap-6 items-center mt-[100px] px-4">
         {status === "success" ? (

app/routes/store.$storeId.financial-dashboard.cash-funds.tsx

@@ -75,8 +75,11 @@ export default function CashingFunds() {
     useServiceGetBankAccounts();
   const [cashDrawerIsOpen, setCashDrawerIsOpen] = useState(false);
   return (
-    <div className="bg-WHITE pb-32">
+    <div className="bg-WHITE pb-32 lg:max-w-[900px] lg:mx-auto lg:w-full lg:pt-6">
       <HeaderWithSupport title="برداشت وجه" onBack={handleBack} />
+      <h1 className="hidden lg:block text-[28px] font-extrabold px-4 mb-2">
+        برداشت وجه
+      </h1>
       <div className="p-4 w-full flex flex-col gap-4 items-center">
         <div className="flex w-full justify-between items-center">
           <p className="text-B16 font-bold">کارت‌های بانکی شما:</p>

app/routes/store.$storeId.financial-dashboard.reports.tsx

@@ -62,8 +62,11 @@ export default function Reports() {
   }, [fromDate, toDate, setSearchParams]);
 
   return (
-    <div className="bg-WHITE">
+    <div className="bg-WHITE lg:max-w-[900px] lg:mx-auto lg:w-full lg:pt-6">
       <HeaderWithSupport title="گزارش مالی" onBack={handleBack} />
+      <h1 className="hidden lg:block text-[28px] font-extrabold px-4 mb-2">
+        گزارش مالی
+      </h1>
       <div className="bg-WHITE p-4 w-full flex gap-2 items-center">
         <div className="w-full">
           <PersianDatePicker

app/routes/store.$storeId.financial-dashboard.transactions.tsx

@@ -134,11 +134,11 @@ export default function Transactions() {
     setIsFilterDrawerOpen(true);
   };
   return (
-    <div className="bg-WHITE">
-      {/* Header */}
-      <div className="flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
-        <ArrowRight onClick={handleBack} className="absolute top-5 right-5" />
-        <p className={"text-B16 font-bold"}>لیست تراکنش‌ها</p>
+    <div className="bg-WHITE lg:max-w-[900px] lg:mx-auto lg:w-full lg:pt-6">
+      {/* Header (keeps the filter button; just constrained on desktop) */}
+      <div className="flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border lg:static lg:justify-start lg:gap-3">
+        <ArrowRight onClick={handleBack} className="absolute top-5 right-5 lg:hidden" />
+        <p className={"text-B16 lg:text-[28px] font-bold lg:font-extrabold"}>لیست تراکنش‌ها</p>
         <div
           onClick={() => {
             filterIconClicked();

app/routes/store.$storeId.orders.$orderId.tsx

@@ -168,8 +168,11 @@ export default function OrderDetail() {
   }
   return (
     <>
-      <div className="bg-WHITE">
+      <div className="bg-WHITE lg:max-w-[900px] lg:mx-auto lg:w-full lg:pt-6">
         <HeaderWithSupport title="سفارش جدید" onBack={handleBack} />
+        <h1 className="hidden lg:block text-[28px] font-extrabold px-4 mb-2">
+          جزئیات سفارش
+        </h1>
         <div className="w-full flex flex-col gap-2">
           <div className="flex w-full items-center justify-around p-4">
             <p className="text-R12 text-GRAY">

app/routes/store.$storeId.shipping-method.tsx

@@ -313,8 +313,11 @@ export default function ShippingMethod() {
   }
 
   return (
-    <div className="flex flex-col bg-WHITE">
+    <div className="flex flex-col bg-WHITE lg:max-w-[820px] lg:mx-auto lg:w-full lg:pt-6">
       <HeaderWithSupport title="نحوه ارسال" onBack={handleBack} />
+      <h1 className="hidden lg:block text-[28px] font-extrabold px-4 mb-2">
+        نحوه ارسال
+      </h1>
 
       <UiProvider
         isLoading={isLoading}

app/routes/store.add.manual.$storeId.tsx

@@ -754,7 +754,7 @@ export default function AddProduct() {
   }
 
   return (
-    <div className="flex flex-col gap-0 w-full">
+    <div className="flex flex-col gap-0 w-full lg:max-w-[760px] lg:mx-auto lg:pt-6">
       <HeaderWithSupport
         title={
           isEditMode

app/routes/store.authenticate.instagram.$storeId.tsx

@@ -99,7 +99,7 @@ export default function AddInstagram() {
   }
 
   return (
-    <div className="flex flex-col gap-0 w-full pb-20">
+    <div className="flex flex-col gap-0 w-full pb-20 lg:max-w-[760px] lg:mx-auto lg:pt-6">
       <HeaderWithSupport
         title="احراز اکانت اینستاگرام"
         onBack={() => safeGoBack(navigate)}