From 06f4f01f1a2f83359bd99e5605a5c72abc692e7f Mon Sep 17 00:00:00 2001
From: DuroCodes <davidwright13503@gmail.com>
Date: Mon, 21 Apr 2025 11:05:29 -0400
Subject: [PATCH] feat: make mobile experience better

---
 bun.lock                         |  3 +++
 package.json                     |  1 +
 src/components/header.tsx        | 23 ++++++++++++++++-------
 src/components/monaco-editor.tsx |  4 ++--
 src/components/save-button.tsx   | 10 ++++++++--
 5 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/bun.lock b/bun.lock
index b0be65f..2559140 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,6 +6,7 @@
       "dependencies": {
         "@monaco-editor/react": "^4.7.0",
         "@neondatabase/serverless": "^1.0.0",
+        "@radix-ui/react-collapsible": "^1.1.7",
         "@radix-ui/react-dialog": "^1.1.10",
         "@radix-ui/react-dropdown-menu": "^2.1.7",
         "@radix-ui/react-popover": "^1.1.10",
@@ -179,6 +180,8 @@
 
     "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.4", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-qz+fxrqgNxG0dYew5l7qR3c7wdgRu1XVUHGnGYX7rg5HM4p9SWaRmJwfgR3J0SgyUKayLmzQIun+N6rWRgiRKw=="],
 
+    "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.3", "@radix-ui/react-primitive": "2.1.0", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zGFsPcFJNdQa/UNd6MOgF40BS054FIGj32oOWBllixz42f+AkQg3QJ1YT9pw7vs+Ai+EgWkh839h69GEK8oH2A=="],
+
     "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.0", "@radix-ui/react-slot": "1.2.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg=="],
 
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
diff --git a/package.json b/package.json
index 7ce9456..b16c130 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "@neondatabase/serverless": "^1.0.0",
+    "@radix-ui/react-collapsible": "^1.1.7",
     "@radix-ui/react-dialog": "^1.1.10",
     "@radix-ui/react-dropdown-menu": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.10",
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 3d8897f..5929632 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -11,20 +11,29 @@ export function Header() {
   const { language, theme, content, setLanguage, setTheme } = useEditor();
 
   return (
-    <div className="flex justify-between items-center px-4 py-2">
-      <div className="flex gap-2">
-        <Button variant="outline" onClick={() => (location.href = "/")}>
+    <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 px-4 py-2">
+      <div className="grid grid-cols-2 gap-2 w-full sm:flex sm:w-auto">
+        <Button
+          variant="outline"
+          onClick={() => (location.href = "/")}
+          className="w-full sm:w-auto"
+        >
           new
         </Button>
-        <SaveButton content={content} language={language} theme={theme} />
+        <SaveButton
+          content={content}
+          language={language}
+          theme={theme}
+          className="w-full sm:w-auto"
+        />
       </div>
-      <div className="flex gap-2">
+      <div className="grid grid-cols-2 gap-2 w-full sm:flex sm:flex-row sm:w-auto">
         <SearchableSelect
           options={LANGUAGES.map((l) => ({ value: l, label: l }))}
           placeholder="language"
           value={language}
           onValueChange={setLanguage}
-          className="w-40"
+          className="w-full sm:w-40"
         />
         <SearchableSelect
           options={Object.keys(THEME_MAP).map((t) => ({
@@ -34,7 +43,7 @@ export function Header() {
           placeholder="theme"
           value={theme}
           onValueChange={setTheme}
-          className="w-53"
+          className="w-full sm:w-52"
         />
       </div>
     </div>
diff --git a/src/components/monaco-editor.tsx b/src/components/monaco-editor.tsx
index 9ad6084..ef77cda 100644
--- a/src/components/monaco-editor.tsx
+++ b/src/components/monaco-editor.tsx
@@ -50,7 +50,7 @@ export function MonacoEditor() {
   };
 
   return (
-    <div className="relative w-full h-100vh">
+    <div className="relative w-full h-[calc(100vh-6rem)] sm:h-[calc(100vh-3.25rem)]">
       {isLoading && (
         <div className="absolute inset-0 flex items-center justify-center bg-background z-10">
           <div className="flex flex-col items-center gap-2">
@@ -61,7 +61,7 @@ export function MonacoEditor() {
       )}
 
       <Editor
-        height="100vh"
+        className="h-[calc(100vh-6rem)] sm:h-calc(100vh-3.25rem)]"
         theme={theme}
         language={language}
         value={content}
diff --git a/src/components/save-button.tsx b/src/components/save-button.tsx
index dbb04db..8b8bf54 100644
--- a/src/components/save-button.tsx
+++ b/src/components/save-button.tsx
@@ -9,9 +9,15 @@ interface SaveButtonProps {
   content: string;
   language: string;
   theme: string;
+  className?: string;
 }
 
-export function SaveButton({ content, language, theme }: SaveButtonProps) {
+export function SaveButton({
+  content,
+  language,
+  theme,
+  className,
+}: SaveButtonProps) {
   const router = useRouter();
 
   const handleSave = async () => {
@@ -33,7 +39,7 @@ export function SaveButton({ content, language, theme }: SaveButtonProps) {
   };
 
   return (
-    <Button variant="outline" onClick={handleSave}>
+    <Button variant="outline" onClick={handleSave} className={className}>
       save
     </Button>
   );