aboutsummaryrefslogtreecommitdiff
path: root/apps/web
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web')
-rw-r--r--apps/web/app/components/Navbar.tsx8
-rw-r--r--apps/web/app/components/memories/AddMemory.tsx4
-rw-r--r--apps/web/app/tailwind.css71
3 files changed, 76 insertions, 7 deletions
diff --git a/apps/web/app/components/Navbar.tsx b/apps/web/app/components/Navbar.tsx
index 1a365ffb..dc5b8485 100644
--- a/apps/web/app/components/Navbar.tsx
+++ b/apps/web/app/components/Navbar.tsx
@@ -91,11 +91,13 @@ function Navbar({ user }: { user?: User }) {
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
+ {/* TODO: Add profile modal */}
+ {/* <ProfileModal>
<DropdownMenuItem>
<UserIcon className="mr-2 h-4 w-4" />
<span>Profile</span>
- <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
+ </ProfileModal> */}
<DropdownMenuItem onSelect={toggleTheme}>
{theme === Theme.LIGHT ? (
<Sun className="mr-2 h-4 w-4" />
@@ -105,13 +107,13 @@ function Navbar({ user }: { user?: User }) {
<span>{theme === Theme.LIGHT ? "Dark mode" : "Light mode"}</span>
</DropdownMenuItem>
<DropdownMenuItem asChild>
- <a href="https://portal.productboard.com/8rhspck6pdelv78mptczaena" target="_blank">
+ <a href="https://portal.productboard.com/8rhspck6pdelv78mptczaena" target="_blank" rel="noreferrer">
<LifeBuoy className="mr-2 h-4 w-4" />
<span>Support</span>
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
- <a href="https://api.supermemory.ai" target="_blank">
+ <a href="https://api.supermemory.ai" target="_blank" rel="noreferrer">
<Cloud className="mr-2 h-4 w-4" />
<span>API</span>
</a>
diff --git a/apps/web/app/components/memories/AddMemory.tsx b/apps/web/app/components/memories/AddMemory.tsx
index 65da1f01..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"
@@ -458,7 +458,7 @@ export function AddMemoryModal({
)}
</CredenzaBody>
<CredenzaFooter className="border-t">
- <div className="flex justify-between w-full">
+ <div className="flex justify-between w-full pt-2">
<CredenzaClose asChild>
<Button id="close-memory-modal" variant="outline">
Cancel
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);
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-12 11:36:18 +0000