From 33a822432d894f1fbb3084031229713173e19b5c Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 8 Mar 2026 20:48:21 +0530
Subject: [PATCH] refactor: improve styling of CreateInviteDialog footer for
 better layout consistency

---
 .../dashboard/[search_space_id]/team/page.tsx | 30 +++++++++----------
 surfsense_web/app/globals.css                 | 12 ++++++++
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index 4b4a702c8..cd413f57e 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -833,21 +833,21 @@ function CreateInviteDialog({
 								</div>
 							</div>
 						</div>
-						<DialogFooter>
-							<Button variant="secondary" onClick={handleClose}>
-								Cancel
-							</Button>
-							<Button onClick={handleCreate} disabled={creating}>
-								{creating ? (
-									<>
-										<Spinner size="sm" className="mr-2" />
-										Creating
-									</>
-								) : (
-									"Create Invite"
-								)}
-							</Button>
-						</DialogFooter>
+					<DialogFooter className="gap-3 sm:gap-2">
+						<Button variant="secondary" onClick={handleClose}>
+							Cancel
+						</Button>
+						<Button onClick={handleCreate} disabled={creating}>
+							{creating ? (
+								<>
+									<Spinner size="sm" className="mr-2" />
+									Creating
+								</>
+							) : (
+								"Create Invite"
+							)}
+						</Button>
+					</DialogFooter>
 					</>
 				)}
 			</DialogContent>
diff --git a/surfsense_web/app/globals.css b/surfsense_web/app/globals.css
index 9dffa8a03..1f44ead92 100644
--- a/surfsense_web/app/globals.css
+++ b/surfsense_web/app/globals.css
@@ -195,6 +195,18 @@ button {
 	background-color: hsl(var(--muted-foreground) / 0.4);
 }
 
+/* Hide scrollbar on mobile, only visible while scrolling */
+@media (max-width: 767px) {
+	.scrollbar-thin {
+		scrollbar-width: none;
+	}
+
+	.scrollbar-thin::-webkit-scrollbar {
+		width: 0;
+		display: none;
+	}
+}
+
 /* Human-in-the-loop approval card animations */
 @keyframes pulse-subtle {
 	0%,