From a67e81ad55c24c97318b7956fa512d5b51fda7ae Mon Sep 17 00:00:00 2001
From: Arda Samadi <arda.samadi2010@gmail.com>
Date: Thu, 9 Jul 2026 11:53:28 +0330
Subject: [PATCH] fix(desktop): constrain profile sub-pages so they don't
 stretch on desktop

These pages are desktop-enabled (they get the DesktopHeader via the /profile
allowlist) but had no desktop layout, so their content stretched edge-to-edge on
wide screens. Add a centered max-width container + a desktop title to the main
profile sub-pages (bookmarks, following, orders, settings, wallet, addresses,
sets). Grids use a wider max-width; single-column lists a narrower one.
ProfilePagesHeader is already lg:hidden, so the mobile header still disappears.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/routes/profile.bookmarks.tsx       | 5 ++++-
 app/routes/profile.following.tsx       | 5 ++++-
 app/routes/profile.location._index.tsx | 5 ++++-
 app/routes/profile.orders.tsx          | 5 ++++-
 app/routes/profile.sets._index.tsx     | 5 ++++-
 app/routes/profile.setting.tsx         | 5 ++++-
 app/routes/profile.wallet._index.tsx   | 5 ++++-
 7 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/routes/profile.bookmarks.tsx b/app/routes/profile.bookmarks.tsx
index daa63d2..fcaff77 100644
--- a/app/routes/profile.bookmarks.tsx
+++ b/app/routes/profile.bookmarks.tsx
@@ -18,8 +18,11 @@ export default function Bookmarks() {
   const bookmarks = data?.pages.flatMap((page) => page.results) || [];
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-6 lg:max-w-[1320px] lg:mx-auto lg:w-full lg:px-8 lg:py-6">
       <ProfilePagesHeader title="ذخیره شده‌ها" />
+      <h1 className="hidden lg:block text-[28px] font-extrabold">
+        ذخیره شده‌ها
+      </h1>
 
       {/* Content */}
       <MondrianProductList
diff --git a/app/routes/profile.following.tsx b/app/routes/profile.following.tsx
index f3d7631..189e49b 100644
--- a/app/routes/profile.following.tsx
+++ b/app/routes/profile.following.tsx
@@ -15,8 +15,11 @@ export default function Following() {
   } = useServiceGetFollowedSellers();
 
   return (
-    <div className="flex flex-col gap-0 pb-20">
+    <div className="flex flex-col gap-0 pb-20 lg:max-w-[720px] lg:mx-auto lg:w-full lg:px-6 lg:py-6">
       <ProfilePagesHeader title="فروشگاه‌های دنبال شده" />
+      <h1 className="hidden lg:block text-[28px] font-extrabold mb-4">
+        فروشگاه‌های دنبال شده
+      </h1>
       <UiProvider
         isLoading={isLoading}
         isEmpty={!followedSellers || followedSellers.length === 0}
diff --git a/app/routes/profile.location._index.tsx b/app/routes/profile.location._index.tsx
index d92bbfe..c46ae27 100644
--- a/app/routes/profile.location._index.tsx
+++ b/app/routes/profile.location._index.tsx
@@ -47,8 +47,11 @@ export const meta: MetaFunction = () => {
 
 export default function Locaton() {
   return (
-    <div className="flex flex-col gap-4 w-full items-center">
+    <div className="flex flex-col gap-4 w-full items-center lg:max-w-[820px] lg:mx-auto lg:pt-6">
       <ProfilePagesHeader title="آدرس‌های من" />
+      <h1 className="hidden lg:block w-full text-[28px] font-extrabold px-4">
+        آدرس‌های من
+      </h1>
       <MainContent />
       <Link
         to={"/profile/location/add"}
diff --git a/app/routes/profile.orders.tsx b/app/routes/profile.orders.tsx
index 8ad87e9..5d1c86c 100644
--- a/app/routes/profile.orders.tsx
+++ b/app/routes/profile.orders.tsx
@@ -148,8 +148,11 @@ export default function Orders() {
           setActiveFactorId={setActiveFactorId}
         />
       ) : (
-        <div className="flex flex-col w-full items-center">
+        <div className="flex flex-col w-full items-center lg:max-w-[820px] lg:mx-auto lg:pt-4">
           <ProfilePagesHeader title="سفارش‌های من" />
+          <h1 className="hidden lg:block w-full text-[28px] font-extrabold px-6 mb-2">
+            سفارش‌های من
+          </h1>
           <div
             className={`pt-4 px-6 pb-[2px] flex w-full justify-between border-b`}
           >
diff --git a/app/routes/profile.sets._index.tsx b/app/routes/profile.sets._index.tsx
index 87918c1..9590c6a 100644
--- a/app/routes/profile.sets._index.tsx
+++ b/app/routes/profile.sets._index.tsx
@@ -30,9 +30,12 @@ export default function ProfileSets() {
   };
 
   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="ست‌های من" />
+      <h1 className="hidden lg:block text-[28px] font-extrabold px-4 mb-2">
+        ست‌های من
+      </h1>
 
       {/* Content */}
       <div className="flex-1 p-4">
diff --git a/app/routes/profile.setting.tsx b/app/routes/profile.setting.tsx
index 5f7a26a..f03363d 100644
--- a/app/routes/profile.setting.tsx
+++ b/app/routes/profile.setting.tsx
@@ -85,8 +85,11 @@ export default function Setting() {
   };
 
   return (
-    <div className="flex flex-col gap-2 w-full pb-[100px]">
+    <div className="flex flex-col gap-2 w-full pb-[100px] lg:max-w-[720px] lg:mx-auto lg:pt-6">
       <ProfilePagesHeader title="اطلاعات کاربری" />
+      <h1 className="hidden lg:block text-[28px] font-extrabold px-5">
+        اطلاعات کاربری
+      </h1>
       <div className="flex flex-col gap-12 pt-4 w-full px-5">
         <AppInput
           loading={isFetchingProfile}
diff --git a/app/routes/profile.wallet._index.tsx b/app/routes/profile.wallet._index.tsx
index 3ea4cb7..728a097 100644
--- a/app/routes/profile.wallet._index.tsx
+++ b/app/routes/profile.wallet._index.tsx
@@ -49,8 +49,11 @@ export default function Locaton() {
   const [amount, setAmount] = useState("");
 
   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-[820px] lg:mx-auto lg:pt-6">
       <ProfilePagesHeader title="کیف پول" />
+      <h1 className="hidden lg:block w-full text-[28px] font-extrabold px-4">
+        کیف پول
+      </h1>
       <MainContent />
       <Button
         className="fixed bottom-16 z-10 lg:static lg:bottom-auto lg:z-auto lg:mt-4"