From 3eaee58b6d48d2c1bd1de7bdf609404ea717cc53 Mon Sep 17 00:00:00 2001
From: Pratiyank Kumar <159152851+Pratiyankkumar@users.noreply.github.com>
Date: Mon, 24 Mar 2025 23:06:58 +0530
Subject: fix: Fixed overflowing content in add memory pop up (#347)

---
 apps/web/app/components/memories/AddMemory.tsx |  2 +-
 apps/web/app/tailwind.css                      | 71 +++++++++++++++++++++++++-
 2 files changed, 70 insertions(+), 3 deletions(-)

(limited to 'apps/web/app')

diff --git a/apps/web/app/components/memories/AddMemory.tsx b/apps/web/app/components/memories/AddMemory.tsx
index ef352dd5..e863d209 100644
--- a/apps/web/app/components/memories/AddMemory.tsx
+++ b/apps/web/app/components/memories/AddMemory.tsx
@@ -163,7 +163,7 @@ export function AddMemoryModal({
 							activeTab === "integrations" && "lg:col-span-3",
 						)}
 					>
-						<TabsList className="border md:flex-col md:h-full h-max md:justify-start md:space-y-2 bg-[#FAFBFC] dark:bg-zinc-800 md:col-span-1 p-2 flex flex-row justify-between overflow-x-auto md:overflow-visible shrink-0">
+						<TabsList className="border md:flex-col md:h-full h-max md:justify-start md:space-y-2 bg-[#FAFBFC] dark:bg-zinc-800 md:col-span-1 p-2 flex flex-row justify-between overflow-x-auto md:overflow-y-scroll shrink-0">
 							<TabsTrigger
 								className="w-full justify-start text-left px-4 py-3 rounded-lg border border-transparent data-[state=active]:border-indigo-500/20 data-[state=active]:bg-indigo-500/10 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex flex-col items-start gap-2 transition-all duration-200 hover:shadow-sm"
 								id="url-tab"
diff --git a/apps/web/app/tailwind.css b/apps/web/app/tailwind.css
index 4d0de20c..b6c362b0 100644
--- a/apps/web/app/tailwind.css
+++ b/apps/web/app/tailwind.css
@@ -106,7 +106,7 @@
 
 		--chart-5: 340 75% 55%;
 	}
-  [data-registry="plate"] {
+	[data-registry="plate"] {
 		--background: 0 0% 100%;
 		--foreground: 240 10% 3.9%;
 		--card: 0 0% 100%;
@@ -135,7 +135,7 @@
 		--brand: 217.2 91.2% 59.8%;
 		--highlight: 47.9 95.8% 53.1%;
 	}
-  [data-registry="plate"].dark {
+	[data-registry="plate"].dark {
 		--background: 240 10% 3.9%;
 		--foreground: 0 0% 98%;
 		--card: 240 10% 3.9%;
@@ -184,3 +184,70 @@
 		@apply absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-card to-transparent;
 	}
 }
+
+/* Base state - scrollbar always present but invisible */
+.md\:overflow-y-scroll::-webkit-scrollbar {
+	width: 4px; /* Thin scrollbar */
+	background-color: transparent;
+	opacity: 0;
+	transition: opacity 0.2s ease;
+}
+
+.md\:overflow-y-scroll::-webkit-scrollbar-track {
+	background-color: rgba(240, 240, 240, 0.1); /* Very subtle light track in light mode */
+}
+
+.md\:overflow-y-scroll::-webkit-scrollbar-thumb {
+	background-color: rgba(155, 155, 155, 0.5); /* Light gray thumb */
+	border-radius: 10px;
+	opacity: 0;
+	transition: opacity 0.2s ease;
+}
+
+/* Show scrollbar on hover */
+.md\:overflow-y-scroll:hover::-webkit-scrollbar,
+.md\:overflow-y-scroll:hover::-webkit-scrollbar-thumb {
+	opacity: 1;
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+	.md\:overflow-y-scroll::-webkit-scrollbar-track {
+		background-color: rgba(50, 50, 50, 0.1); /* Subtle dark track in dark mode */
+	}
+
+	.md\:overflow-y-scroll::-webkit-scrollbar-thumb {
+		background-color: rgba(180, 180, 180, 0.5); /* Slightly lighter thumb for dark mode */
+	}
+}
+
+/* For Firefox */
+.md\:overflow-y-scroll {
+	scrollbar-width: thin;
+	scrollbar-color: rgba(155, 155, 155, 0) transparent; /* Start with opacity 0 */
+	transition: scrollbar-color 0.2s ease;
+}
+
+.md\:overflow-y-scroll:hover {
+	scrollbar-color: rgba(155, 155, 155, 0.5) rgba(240, 240, 240, 0.1); /* Light mode colors */
+}
+
+/* Dark mode for Firefox */
+@media (prefers-color-scheme: dark) {
+	.md\:overflow-y-scroll:hover {
+		scrollbar-color: rgba(180, 180, 180, 0.5) rgba(50, 50, 50, 0.1); /* Dark mode colors */
+	}
+}
+
+/* For your specific dark mode class */
+.dark .md\:overflow-y-scroll::-webkit-scrollbar-track {
+	background-color: rgba(50, 50, 50, 0.1);
+}
+
+.dark .md\:overflow-y-scroll::-webkit-scrollbar-thumb {
+	background-color: rgba(180, 180, 180, 0.5);
+}
+
+.dark .md\:overflow-y-scroll:hover {
+	scrollbar-color: rgba(180, 180, 180, 0.5) rgba(50, 50, 50, 0.1);
+}
-- 
cgit v1.2.3