From 593257a3e9dae10a9c69842fd254fc93020f37c6 Mon Sep 17 00:00:00 2001
From: Aidan Bleser <aidanbleser35@gmail.com>
Date: Mon, 16 Jun 2025 07:07:37 -0500
Subject: [PATCH] mobile stuff

---
 .prettierignore                   |  3 +++
 src/app.css                       | 10 ++++++++++
 src/routes/account/+layout.svelte |  8 ++++----
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 6562bcb..53da76a 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -4,3 +4,6 @@ pnpm-lock.yaml
 yarn.lock
 bun.lock
 bun.lockb
+
+# Convex formats this
+convex.json
\ No newline at end of file
diff --git a/src/app.css b/src/app.css
index 1687c6e..c3380bd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -156,3 +156,13 @@
 		@apply bg-background text-foreground;
 	}
 }
+
+/* For components that need horizontal scrolling */
+.scrollbar-hide {
+	-ms-overflow-style: none; /* Internet Explorer and Edge */
+	scrollbar-width: none; /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+	display: none; /* Chrome, Safari, and Opera */
+}
diff --git a/src/routes/account/+layout.svelte b/src/routes/account/+layout.svelte
index d00d09c..88b1ab8 100644
--- a/src/routes/account/+layout.svelte
+++ b/src/routes/account/+layout.svelte
@@ -72,7 +72,7 @@
 					<span class="text-sm font-medium">Keyboard Shortcuts</span>
 					<div class="flex flex-col gap-1">
 						<div class="flex place-items-center justify-between">
-							<span>Toggle Sidebar </span>
+							<span class="text-muted-foreground text-sm">Toggle Sidebar </span>
 
 							<div>
 								<Kbd>{isMac.current ? '⌘' : 'Ctrl'}</Kbd>
@@ -83,15 +83,15 @@
 				</div>
 			</div>
 		</div>
-		<div class="pl-12 md:col-start-2">
+		<div class="md:col-start-2 md:pl-12">
 			<div
-				class="bg-card text-muted-foreground flex w-fit place-items-center gap-2 rounded-lg p-1 text-sm"
+				class="bg-card scrollbar-hide text-muted-foreground flex w-fit max-w-full place-items-center gap-2 overflow-x-auto rounded-lg p-1 text-sm"
 			>
 				{#each navigation as tab (tab)}
 					<a
 						href={tab.href}
 						use:active={{ activeForSubdirectories: false }}
-						class="data-[active=true]:bg-background data-[active=true]:text-foreground rounded-md px-2 py-1"
+						class="data-[active=true]:bg-background data-[active=true]:text-foreground rounded-md px-2 py-1 text-nowrap"
 					>
 						{tab.title}
 					</a>