Replace Anon Aadhaar with coming soon placeholder and fix input for non login

app/api/contributions/route.ts

@@ -1,4 +1,5 @@
 import { processNewContribution } from "@/lib/directus";
+import { revalidatePath } from "next/cache";
 import { type NextRequest, NextResponse } from "next/server";
 
 export async function POST(req: NextRequest) {
@@ -17,6 +18,7 @@ export async function POST(req: NextRequest) {
 			amount,
 			comment,
 		);
+		revalidatePath("/reports/[slug]");
 		return NextResponse.json(result);
 	} catch (error) {
 		let errorMessage = "An unknown error occurred";

app/globals.css

@@ -3,105 +3,185 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 20 48% 94%;
-    --foreground: 228 40% 24%;
-
-    --card: 20 48% 94%;
-    --card-foreground: 228 40% 24%;
-
-    --popover: 20 48% 94%;
-    --popover-foreground: 228 40% 24%;
-
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 228 40% 24%;
-
-    --radius: 0.5rem;
-
-    --vd-beige-600: 198 139 109;
-    --vd-beige-400: 231 201 186;
-    --vd-beige-300: 241 224 215;
-    --vd-beige-200: 247 237 232;
-    --vd-beige-100: 251 247 245;
-
-    --vd-blue-900: 37 47 86;
-    --vd-blue-700: 58 82 100;
-    --vd-blue-600: 65 98 121;
-    --vd-blue-500: 75 119 143;
-    --vd-blue-400: 102 146 169;
-    --vd-blue-300: 152 184 200;
-    --vd-blue-200: 194 214 223;
-    --vd-blue-100: 223 234 238;
-    --vd-blue-50: 242 247 249;
-
-    --vd-orange-900: 60 23 19;
-    --vd-orange-800: 135 54 45;
-    --vd-orange-700: 159 61 50;
-    --vd-orange-600: 193 78 65;
-    --vd-orange-500: 214 105 93;
-    --vd-orange-400: 228 143 133;
-    --vd-orange-300: 239 184 178;
-    --vd-orange-200: 246 214 210;
-
-    --vd-gray-600: 66 66 74;
-    --vd-gray-500: 95 95 106;
-    --vd-gray-400: 146 147 158;
-    --vd-gray-300: 185 186 192;
-    --vd-gray-200: 218 218 221;
-  }
-
-  .dark {
-    --background: 228 40% 24%;
-    --foreground: 60 9.1% 97.8%;
-
-    --card: 228 40% 24%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --popover: 228 40% 24%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
-  }
+    :root {
+        --background: 20 48% 94%;
+        --foreground: 228 40% 24%;
+
+        --card: 20 48% 94%;
+        --card-foreground: 228 40% 24%;
+
+        --popover: 20 48% 94%;
+        --popover-foreground: 228 40% 24%;
+
+        --primary: 24 9.8% 10%;
+        --primary-foreground: 60 9.1% 97.8%;
+
+        --secondary: 60 4.8% 95.9%;
+        --secondary-foreground: 24 9.8% 10%;
+
+        --muted: 60 4.8% 95.9%;
+        --muted-foreground: 25 5.3% 44.7%;
+
+        --accent: 60 4.8% 95.9%;
+        --accent-foreground: 24 9.8% 10%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 60 9.1% 97.8%;
+
+        --border: 20 5.9% 90%;
+        --input: 20 5.9% 90%;
+        --ring: 228 40% 24%;
+
+        --radius: 0.5rem;
+
+        --vd-beige-600: 198 139 109;
+        --vd-beige-400: 231 201 186;
+        --vd-beige-300: 241 224 215;
+        --vd-beige-200: 247 237 232;
+        --vd-beige-100: 251 247 245;
+
+        --vd-blue-900: 37 47 86;
+        --vd-blue-700: 58 82 100;
+        --vd-blue-600: 65 98 121;
+        --vd-blue-500: 75 119 143;
+        --vd-blue-400: 102 146 169;
+        --vd-blue-300: 152 184 200;
+        --vd-blue-200: 194 214 223;
+        --vd-blue-100: 223 234 238;
+        --vd-blue-50: 242 247 249;
+
+        --vd-orange-900: 60 23 19;
+        --vd-orange-800: 135 54 45;
+        --vd-orange-700: 159 61 50;
+        --vd-orange-600: 193 78 65;
+        --vd-orange-500: 214 105 93;
+        --vd-orange-400: 228 143 133;
+        --vd-orange-300: 239 184 178;
+        --vd-orange-200: 246 214 210;
+
+        --vd-gray-600: 66 66 74;
+        --vd-gray-500: 95 95 106;
+        --vd-gray-400: 146 147 158;
+        --vd-gray-300: 185 186 192;
+        --vd-gray-200: 218 218 221;
+    }
+
+    .dark {
+        --background: 228 40% 24%;
+        --foreground: 60 9.1% 97.8%;
+
+        --card: 228 40% 24%;
+        --card-foreground: 60 9.1% 97.8%;
+
+        --popover: 228 40% 24%;
+        --popover-foreground: 60 9.1% 97.8%;
+
+        --primary: 60 9.1% 97.8%;
+        --primary-foreground: 24 9.8% 10%;
+
+        --secondary: 12 6.5% 15.1%;
+        --secondary-foreground: 60 9.1% 97.8%;
+
+        --muted: 12 6.5% 15.1%;
+        --muted-foreground: 24 5.4% 63.9%;
+
+        --accent: 12 6.5% 15.1%;
+        --accent-foreground: 60 9.1% 97.8%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 60 9.1% 97.8%;
+
+        --border: 12 6.5% 15.1%;
+        --input: 12 6.5% 15.1%;
+        --ring: 24 5.7% 82.9%;
+    }
 }
 
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer utilities {
+
+    /* Mobile-specific scrolling improvements */
+    .scrollbar-hide {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+
+    .scrollbar-hide::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Touch-friendly interactions */
+    .touch-manipulation {
+        touch-action: manipulation;
+    }
+
+    /* Smooth scrolling behavior for mobile */
+    .touch-auto {
+        touch-action: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* Prevent zoom on input focus on mobile */
+    @media screen and (max-width: 768px) {
+
+        input[type="email"],
+        input[type="number"],
+        input[type="text"],
+        textarea {
+            font-size: 16px !important;
+        }
+
+        /* Prevent horizontal overflow on mobile */
+        * {
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+            hyphens: auto;
+        }
+
+        /* Force long text and URLs to wrap */
+        a,
+        p,
+        div,
+        span,
+        li {
+            word-break: break-word;
+            overflow-wrap: break-word;
+        }
+
+        /* Ensure containers don't overflow */
+        .drawer-content,
+        .dialog-content {
+            overflow-x: hidden;
+        }
+
+        /* Specifically handle long URLs and text */
+        a[href] {
+            word-break: break-all;
+            display: inline-block;
+            max-width: 100%;
+        }
+    }
+
+    /* Improve mobile drawer content scrolling */
+    .mobile-drawer-content {
+        overscroll-behavior: contain;
+        -webkit-overflow-scrolling: touch;
+        scroll-behavior: smooth;
+    }
+
+    /* Prevent body scroll when drawer is open on mobile */
+    .drawer-open {
+        overflow: hidden;
+        position: fixed;
+        width: 100%;
+    }
 }

components/profile/sidebar.tsx

@@ -68,6 +68,7 @@ const AnonAadhaarCard = () => {
 const SideBar = () => {
 	return (
 		<section className="flex flex-col gap-4 md:col-span-1 md:row-span-2">
+			{/* Commented out existing UI
 			<AnonAadhaarProvider _useTestAadhaar={true}>
 				<AnonAadhaarCard />
 			</AnonAadhaarProvider>
@@ -95,6 +96,22 @@ const SideBar = () => {
 					</Link>
 				</CardContent>
 			</Card>
+			*/}
+
+			{/* Local Advocate Program Coming Soon */}
+			<Card className="bg-vd-beige-100 rounded-3xl shadow-none border-none">
+				<CardHeader>
+					<CardTitle className="text-center text-lg md:text-xl text-vd-blue-900">
+						Local Advocate Program
+					</CardTitle>
+					<CardDescription className="text-center text-base text-vd-blue-700">
+						Coming Soon
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="flex justify-center">
+					<div className="w-12 h-1 bg-vd-orange-500 rounded-full" />
+				</CardContent>
+			</Card>
 		</section>
 	);
 };

components/report-details/support/dialog.tsx

@@ -105,7 +105,7 @@ const ReportSupportUI = ({
 		),
 		header: "Support this report",
 		content: (
-			<div className="flex flex-col gap-4">
+			<div className="flex flex-col gap-4 w-full overflow-hidden">
 				{reportImage && reportTitle && (
 					<Card className="bg-gradient-to-r from-gray-50 to-vd-beige-100 border-vd-beige-300">
 						<div className="flex items-center gap-4 p-4">
@@ -187,8 +187,20 @@ const SupportReport = ({
 			ContentComponent={(props) => (
 				<DrawerContent
 					{...props}
-					className="bg-white p-4 max-h-[90vh] overflow-y-auto"
-				/>
+					className="bg-white max-h-[85vh] overflow-hidden"
+				>
+					<div
+						className="overflow-y-auto overflow-x-hidden px-4 pb-4 w-full"
+						style={{
+							WebkitOverflowScrolling: "touch",
+							maxHeight: "calc(85vh - 60px)",
+							wordWrap: "break-word",
+							overflowWrap: "break-word",
+						}}
+					>
+						{props.children}
+					</div>
+				</DrawerContent>
 			)}
 			HeaderComponent={DrawerHeader}
 		/>