feat(saas): Feedbacks and Profile settings mobile responsive

alifarooq9 · May 6, 2024 · 7cc05bd · 7cc05bd
1 parent 1906318
commit 7cc05bd
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}