fix: fix navbar on mobile; make code box a little nicer

This commit is contained in:
DuroCodes
2024-08-19 07:16:47 -04:00
parent b00f6f6253
commit 9c4e4d9b65
3 changed files with 9 additions and 14 deletions

View File

@@ -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>
);

View File

@@ -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>
);

View File

@@ -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