From 9c4e4d9b658f05167ce5ab33c82deae011286645 Mon Sep 17 00:00:00 2001
From: DuroCodes <davidwright13503@gmail.com>
Date: Mon, 19 Aug 2024 07:16:47 -0400
Subject: [PATCH] fix: fix navbar on mobile; make code box a little nicer

---
 src/components/CodeBlock.tsx  | 14 +++-----------
 src/components/Editor.tsx     |  6 ++++--
 src/components/MenuButton.tsx |  3 ++-
 3 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
index 12d41e6..53824de 100644
--- a/src/components/CodeBlock.tsx
+++ b/src/components/CodeBlock.tsx
@@ -24,23 +24,15 @@ export default function CodeBlock() {
   return (
     <div class="relative">
       <textarea
-        class="ml-4 w-full p-2 z-0 rounded absolute top-0 left-0 bg-transparent caret-transparent text-transparent resize-none"
+        class="ml-[3.25rem] w-[calc(100%-3.5rem)] z-0 rounded absolute top-0 left-0 bg-transparent text-transparent resize-none break-normal overflow-x-scroll"
         value={code}
         onInput={handleCodeChange}
-        rows={10}
+        rows={$codeStore.get().split("\n").length}
         spellCheck={false}
-        style={{
-          height: "100%",
-          width: "100%",
-        }}
       />
       <div
-        class="ml-4 shiki pointer-events-none"
+        class="ml-4 overflow-x-hidden shiki pointer-events-none"
         dangerouslySetInnerHTML={{ __html }}
-        style={{
-          whiteSpace: "pre-wrap",
-          fontFamily: "monospace",
-        }}
       />
     </div>
   );
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index a319eff..72f7c0a 100644
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@@ -10,7 +10,10 @@ export default function Editor() {
 
   return (
     <div style={{ backgroundColor: colors.background }} class="h-screen">
-      <div class="mb-4 p-2" style={{ backgroundColor: colors.navbar }}>
+      <div
+        class="mb-4 p-2 text-sm md:text-base"
+        style={{ backgroundColor: colors.navbar }}
+      >
         <nav
           class="flex justify-between mx-4"
           style={{ color: colors.primary }}
@@ -25,7 +28,6 @@ export default function Editor() {
           </div>
         </nav>
       </div>
-
       <CodeBlock />
     </div>
   );
diff --git a/src/components/MenuButton.tsx b/src/components/MenuButton.tsx
index bfba882..146014a 100644
--- a/src/components/MenuButton.tsx
+++ b/src/components/MenuButton.tsx
@@ -72,7 +72,8 @@ export default function MenuButton({
         <span class="hidden md:inline">
           [{label}: {$store.get()}]
         </span>
-        <span class="md:hidden">[{$store.get()}]</span>
+        <span class="hidden sm:inline md:hidden">[{$store.get()}]</span>
+        <span class="sm:hidden">[{label}]</span>
       </button>
       {open && (
         <div