From b468afdc8c3730805007a7a0fcad813329ed23d9 Mon Sep 17 00:00:00 2001 From: "Thomas G. Lopes" <26071571+TGlide@users.noreply.github.com> Date: Thu, 19 Jun 2025 17:18:04 +0100 Subject: [PATCH] improve mobile --- package.json | 1 + src/app.css | 29 +++++++++- src/app.html | 5 +- .../ui/sidebar/sidebar-inset.svelte | 2 +- .../ui/sidebar/sidebar-sidebar.svelte | 2 +- src/routes/chat/+layout.svelte | 57 ++++++++++++------- src/routes/chat/model-picker.svelte | 2 +- src/routes/chat/search-modal.svelte | 4 +- src/routes/share/[id]/+page.svelte | 2 +- vite.config.ts | 5 ++ 10 files changed, 78 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 1411a31..58e9bd5 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "type": "module", "scripts": { "dev": "concurrently -n \"convex,vite\" -c \"blue.bold,green.bold\" \"convex dev\" \"vite dev\"", + "dev:host": "concurrently -n \"convex,vite\" -c \"blue.bold,green.bold\" \"convex dev\" \"vite dev --host\"", "build": "vite build", "preview": "vite preview", "prepare": "svelte-kit sync || echo ''", diff --git a/src/app.css b/src/app.css index 24ab0a0..fabdf61 100644 --- a/src/app.css +++ b/src/app.css @@ -54,7 +54,7 @@ } .dark { - --background: oklch(0.2409 0.0201 307.5346); + --background: oklch(0.2409 0.0201 267.5346); --foreground: oklch(0.8398 0.0387 309.5391); --card: oklch(0.2803 0.0232 307.5413); --card-foreground: oklch(0.8456 0.0302 341.4597); @@ -211,13 +211,38 @@ --shadow-2xl: var(--shadow-2xl); } +@utility fill-device { + height: 100vh; + height: 100dvh; /* Dynamic viewport height - newer browsers */ + + /* Alternative: Use env() for safe areas */ + min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); + + /* Ensure full width */ + width: 100vw; + width: 100dvw; /* Dynamic viewport width */ + + /* Remove default margins/padding */ + margin: 0; + padding: 0; + overflow-x: hidden; +} + +@utility fill-device-height { + height: 100svh; + + /* min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); */ +} + @layer base { * { @apply border-border; } body { - @apply bg-background text-foreground bg-noise; + @apply bg-background text-foreground bg-noise fill-device; + position: fixed; + overflow: clip; } } diff --git a/src/app.html b/src/app.html index fc6715b..824b419 100644 --- a/src/app.html +++ b/src/app.html @@ -3,7 +3,10 @@ - + thom.chat %sveltekit.head% diff --git a/src/lib/components/ui/sidebar/sidebar-inset.svelte b/src/lib/components/ui/sidebar/sidebar-inset.svelte index 0a648b7..93a39b9 100644 --- a/src/lib/components/ui/sidebar/sidebar-inset.svelte +++ b/src/lib/components/ui/sidebar/sidebar-inset.svelte @@ -5,6 +5,6 @@ let { class: className, children, ...rest }: HTMLAttributes = $props(); -
+
{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-sidebar.svelte b/src/lib/components/ui/sidebar/sidebar-sidebar.svelte index 37691cc..d24f83a 100644 --- a/src/lib/components/ui/sidebar/sidebar-sidebar.svelte +++ b/src/lib/components/ui/sidebar/sidebar-sidebar.svelte @@ -12,7 +12,7 @@
diff --git a/src/routes/chat/+layout.svelte b/src/routes/chat/+layout.svelte index 8afdb11..d7c44a6 100644 --- a/src/routes/chat/+layout.svelte +++ b/src/routes/chat/+layout.svelte @@ -40,6 +40,8 @@ import { callGenerateMessage } from '../api/generate-message/call.js'; import ModelPicker from './model-picker.svelte'; import SearchModal from './search-modal.svelte'; + import { shortcut } from '$lib/actions/shortcut.svelte.js'; + import { mergeAttrs } from 'melt'; const client = useConvexClient(); @@ -378,9 +380,13 @@ Chat | thom.chat + scrollState.scrollToBottom() }]} +/> + @@ -443,7 +449,7 @@
-
+
{@render children()}
- + + {#snippet trigger(tooltip)} + + {/snippet} + {cmdOrCtrl} + D +
{ if (e.key === 'Enter' && !e.shiftKey && !popover.open) { @@ -634,23 +647,23 @@ {isGenerating ? 'Stop generation' : 'Send message'}
-
+
0} /> {#if currentModelSupportsImages} {/if}
diff --git a/src/routes/chat/model-picker.svelte b/src/routes/chat/model-picker.svelte index 37702ca..ef44d06 100644 --- a/src/routes/chat/model-picker.svelte +++ b/src/routes/chat/model-picker.svelte @@ -214,7 +214,7 @@