From 9f7c162107af0ed43c7141414e9c4b4512b117f1 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Mon, 19 Jan 2026 22:02:02 -0800
Subject: [PATCH] make approvals placeholder more mobile friendly

---
 src/components/ApprovalsEmptyState.tsx | 48 +++++++++++++-------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/ApprovalsEmptyState.tsx b/src/components/ApprovalsEmptyState.tsx
index 421af2f0..fadb7b38 100644
--- a/src/components/ApprovalsEmptyState.tsx
+++ b/src/components/ApprovalsEmptyState.tsx
@@ -23,32 +23,32 @@ export function ApprovalsEmptyState({ orgId }: ApprovalsEmptyStateProps) {
     return (
         <div className="flex flex-col gap-6">
             <Card>
-                <CardContent className="p-12">
-                    <div className="flex flex-col items-center text-center gap-6 max-w-2xl mx-auto">
-                        <div className="rounded-full bg-primary/10 p-4">
-                            <ShieldCheck className="w-12 h-12 text-primary" />
+                <CardContent className="p-6 md:p-12">
+                    <div className="flex flex-col items-center text-center gap-4 md:gap-6 max-w-2xl mx-auto">
+                        <div className="rounded-full bg-primary/10 p-3 md:p-4">
+                            <ShieldCheck className="w-8 h-8 md:w-12 md:h-12 text-primary" />
                         </div>
 
                         <div className="space-y-2">
-                            <h3 className="text-2xl font-semibold">
+                            <h3 className="text-xl md:text-2xl font-semibold">
                                 {t("approvalsEmptyStateTitle")}
                             </h3>
-                            <p className="text-muted-foreground text-lg">
+                            <p className="text-muted-foreground text-sm md:text-lg">
                                 {t("approvalsEmptyStateDescription")}
                             </p>
                         </div>
 
-                        <div className="w-full space-y-4 mt-4">
-                            <div className="bg-muted/50 rounded-lg p-6 space-y-4 border">
-                                <div className="flex items-start gap-4">
-                                    <div className="rounded-lg bg-background p-3 border">
-                                        <Settings className="w-5 h-5 text-primary" />
+                        <div className="w-full space-y-3 md:space-y-4 mt-2 md:mt-4">
+                            <div className="bg-muted/50 rounded-lg p-4 md:p-6 space-y-3 md:space-y-4 border">
+                                <div className="flex items-start gap-3 md:gap-4">
+                                    <div className="rounded-lg bg-background p-2 md:p-3 border shrink-0">
+                                        <Settings className="w-4 h-4 md:w-5 md:h-5 text-primary" />
                                     </div>
-                                    <div className="flex-1 text-left">
-                                        <h4 className="font-semibold mb-1">
+                                    <div className="flex-1 text-left min-w-0">
+                                        <h4 className="font-semibold mb-1 text-sm md:text-base">
                                             {t("approvalsEmptyStateStep1Title")}
                                         </h4>
-                                        <p className="text-sm text-muted-foreground">
+                                        <p className="text-xs md:text-sm text-muted-foreground">
                                             {t(
                                                 "approvalsEmptyStateStep1Description"
                                             )}
@@ -56,15 +56,15 @@ export function ApprovalsEmptyState({ orgId }: ApprovalsEmptyStateProps) {
                                     </div>
                                 </div>
 
-                                <div className="flex items-start gap-4">
-                                    <div className="rounded-lg bg-background p-3 border">
-                                        <User className="w-5 h-5 text-primary" />
+                                <div className="flex items-start gap-3 md:gap-4">
+                                    <div className="rounded-lg bg-background p-2 md:p-3 border shrink-0">
+                                        <User className="w-4 h-4 md:w-5 md:h-5 text-primary" />
                                     </div>
-                                    <div className="flex-1 text-left">
-                                        <h4 className="font-semibold mb-1">
+                                    <div className="flex-1 text-left min-w-0">
+                                        <h4 className="font-semibold mb-1 text-sm md:text-base">
                                             {t("approvalsEmptyStateStep2Title")}
                                         </h4>
-                                        <p className="text-sm text-muted-foreground">
+                                        <p className="text-xs md:text-sm text-muted-foreground">
                                             {t(
                                                 "approvalsEmptyStateStep2Description"
                                             )}
@@ -73,8 +73,8 @@ export function ApprovalsEmptyState({ orgId }: ApprovalsEmptyStateProps) {
                                 </div>
                             </div>
 
-                            {/* Abstract UI Preview */}
-                            <div className="bg-muted/50 rounded-lg p-6 border">
+                            {/* Abstract UI Preview - Hidden on mobile */}
+                            <div className="hidden md:block bg-muted/50 rounded-lg p-6 border">
                                 <div className="space-y-3">
                                     <div className="flex items-center justify-between p-3 bg-background rounded border">
                                         <div className="flex items-center gap-3">
@@ -112,8 +112,8 @@ export function ApprovalsEmptyState({ orgId }: ApprovalsEmptyStateProps) {
                             </div>
                         </div>
 
-                        <Link href={`/${orgId}/settings/access/roles`}>
-                            <Button className="gap-2 mt-2">
+                        <Link href={`/${orgId}/settings/access/roles`} className="w-full md:w-auto">
+                            <Button className="gap-2 mt-2 w-full md:w-auto">
                                 {t("approvalsEmptyStateButtonText")}
                                 <ArrowRight className="w-4 h-4" />
                             </Button>