From 7cc05bd4f34059c2ee54c651e8329620ab1e7399 Mon Sep 17 00:00:00 2001
From: Ali Farooq <Alimuhammadfc5@gmail.com>
Date: Mon, 6 May 2024 20:25:45 +0500
Subject: [PATCH] feat(saas): Feedbacks and Profile settings mobile responsive

---
 .../saas/src/app/(app)/(user)/feedback/page.tsx        | 10 +++++++---
 .../src/app/(app)/(user)/profile/settings/loading.tsx  |  2 +-
 .../src/app/(app)/(user)/profile/settings/page.tsx     |  2 +-
 .../saas/src/app/(app)/_components/layout-shell.tsx    |  2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/starterkits/saas/src/app/(app)/(user)/feedback/page.tsx b/starterkits/saas/src/app/(app)/(user)/feedback/page.tsx
index d12ec19..4929114 100644
--- a/starterkits/saas/src/app/(app)/(user)/feedback/page.tsx
+++ b/starterkits/saas/src/app/(app)/(user)/feedback/page.tsx
@@ -11,6 +11,7 @@ import {
 import { format } from "date-fns";
 import { Badge } from "@/components/ui/badge";
 import { FeedbackDropdown } from "@/app/(app)/(user)/feedback/_components/feedback-dropdown";
+import Balancer from "react-wrap-balancer";
 
 export default async function UserFeedbackPage() {
     const feedbacks = await getUserFeedbacksQuery();
@@ -21,7 +22,7 @@ export default async function UserFeedbackPage() {
             description={userFeedbackPageConfig.description}
         >
             <div className="flex w-full items-start justify-between">
-                <h2 className="text-lg font-medium">
+                <h2 className="text-base font-medium sm:text-lg">
                     {feedbacks.length} feedbacks you have created.
                 </h2>
 
@@ -68,10 +69,13 @@ export default async function UserFeedbackPage() {
                         <p className="font-medium text-muted-foreground">
                             No feedbacks found.
                         </p>
-                        <p className="text-muted-foreground">
+                        <Balancer
+                            as="p"
+                            className="text-center text-muted-foreground"
+                        >
                             Create a feedback using the form above, your
                             feedback is important to us. 🚀
-                        </p>
+                        </Balancer>
                     </div>
                 )}
             </div>
diff --git a/starterkits/saas/src/app/(app)/(user)/profile/settings/loading.tsx b/starterkits/saas/src/app/(app)/(user)/profile/settings/loading.tsx
index dc3830e..932408f 100644
--- a/starterkits/saas/src/app/(app)/(user)/profile/settings/loading.tsx
+++ b/starterkits/saas/src/app/(app)/(user)/profile/settings/loading.tsx
@@ -8,7 +8,7 @@ export default function ProfileSettingsLoading() {
             title={profileSettingsPageConfig.title}
             description={profileSettingsPageConfig.description}
         >
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <Skeleton className="h-60 w-full" />
                 <Skeleton className="h-60 w-full" />
                 <Skeleton className="h-60 w-full" />
diff --git a/starterkits/saas/src/app/(app)/(user)/profile/settings/page.tsx b/starterkits/saas/src/app/(app)/(user)/profile/settings/page.tsx
index 3f7b177..61a1d65 100644
--- a/starterkits/saas/src/app/(app)/(user)/profile/settings/page.tsx
+++ b/starterkits/saas/src/app/(app)/(user)/profile/settings/page.tsx
@@ -20,7 +20,7 @@ export default async function SettingsPage() {
             title={profileSettingsPageConfig.title}
             description={profileSettingsPageConfig.description}
         >
-            <div className="mt-10 grid w-full grid-cols-2 gap-4">
+            <div className="mt-10 grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
                 <UserImageForm user={user as User} />
 
                 <UserNameForm user={user as User} />
diff --git a/starterkits/saas/src/app/(app)/_components/layout-shell.tsx b/starterkits/saas/src/app/(app)/_components/layout-shell.tsx
index 921644d..8a01f3c 100644
--- a/starterkits/saas/src/app/(app)/_components/layout-shell.tsx
+++ b/starterkits/saas/src/app/(app)/_components/layout-shell.tsx
@@ -37,7 +37,7 @@ export function AppLayoutShell({
                 </Suspense>
             </div>
             <section className="min-h-screen w-full flex-grow">
-                <div className="block lg:hidden">
+                <div className="sticky left-0 right-0 top-0 block lg:hidden">
                     <AppHeader
                         showOrgSwitcher={showOrgSwitcher}
                         sidebarNavIncludeIds={sideNavIncludedIds}