From 01e04020046728d17f1c7eb2b6aa4fe432681834 Mon Sep 17 00:00:00 2001
From: Dariush Komeili <dkomeili@proton.me>
Date: Wed, 18 Feb 2026 00:05:17 +0000
Subject: [PATCH 1/2] fix: enhance mobile compatibility by preventing keyboard
 popup and improving layout

---
 src/lib/components/TerminalInput.svelte  |  7 ++++++-
 src/lib/components/TerminalOutput.svelte |  2 +-
 src/routes/Terminal.svelte               | 20 +++++++++++++++-----
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/TerminalInput.svelte b/src/lib/components/TerminalInput.svelte
index 17ba5ff..bbd5270 100644
--- a/src/lib/components/TerminalInput.svelte
+++ b/src/lib/components/TerminalInput.svelte
@@ -29,7 +29,12 @@
 		}
 	}
 
+	function isMobile(): boolean {
+		return typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
+	}
+
 	function handleBlur(e: FocusEvent) {
+		if (isMobile()) return;
 		const target = e.target as HTMLInputElement;
 		target?.focus({ preventScroll: true });
 	}
@@ -67,7 +72,7 @@
 			onkeydown={handleKeyDown}
 			onblur={handleBlur}
 			type="text"
-			class="w-full border-none bg-transparent font-mono text-gray-900 outline-none dark:text-gray-100"
+			class="w-full border-none bg-transparent font-mono text-base text-gray-900 outline-none md:text-sm dark:text-gray-100"
 			style="caret-color: transparent;"
 			spellcheck="false"
 			autocomplete="off"
diff --git a/src/lib/components/TerminalOutput.svelte b/src/lib/components/TerminalOutput.svelte
index afbd4d9..2610915 100644
--- a/src/lib/components/TerminalOutput.svelte
+++ b/src/lib/components/TerminalOutput.svelte
@@ -20,7 +20,7 @@
 	{#each history as entry, i (i)}
 		{#if entry.type === 'greeting'}
 			<pre
-				class="m-0 font-mono leading-tight whitespace-pre text-blue-600 dark:text-blue-400">{entry.content}</pre>
+				class="m-0 max-w-full overflow-x-auto font-mono leading-tight whitespace-pre text-blue-600 dark:text-blue-400">{entry.content}</pre>
 			{#if entry.links && entry.links.length > 0}
 				<div class="mt-3 mb-5 flex flex-wrap gap-3 font-mono">
 					{#each entry.links as link, k (k)}
diff --git a/src/routes/Terminal.svelte b/src/routes/Terminal.svelte
index b9bc973..6f79445 100644
--- a/src/routes/Terminal.svelte
+++ b/src/routes/Terminal.svelte
@@ -32,8 +32,10 @@
 		// Apply theme to document
 		updateTheme();
 
-		// Focus input
-		inputElement?.focus();
+		// Focus input (skip on mobile to avoid keyboard popup)
+		if (!isMobile()) {
+			inputElement?.focus();
+		}
 	});
 
 	function updateTheme() {
@@ -108,6 +110,10 @@
 		}
 	}
 
+	function isMobile(): boolean {
+		return typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
+	}
+
 	function handleLinkClick(link: Link) {
 		if (link.type === 'command') {
 			input = link.target;
@@ -115,7 +121,9 @@
 		} else if (link.type === 'url') {
 			window.open(link.target, '_blank', 'noopener,noreferrer');
 		}
-		setTimeout(() => inputElement?.focus({ preventScroll: true }), 0);
+		if (!isMobile()) {
+			setTimeout(() => inputElement?.focus({ preventScroll: true }), 0);
+		}
 	}
 
 	function handleInput(value: string) {
@@ -127,12 +135,14 @@
 	}
 
 	function focusInput() {
-		inputElement?.focus({ preventScroll: true });
+		if (!isMobile()) {
+			inputElement?.focus({ preventScroll: true });
+		}
 	}
 </script>
 
 <div
-	class="flex h-screen w-screen flex-col bg-white font-mono text-sm transition-colors dark:bg-gray-900"
+	class="flex h-screen w-screen flex-col overflow-x-hidden bg-white font-mono text-sm transition-colors dark:bg-gray-900"
 >
 	<TerminalHeader {darkMode} onToggleTheme={toggleTheme} />
 

From f9478d52afe1ec254825f5e920b1f4f303acb68d Mon Sep 17 00:00:00 2001
From: Dariush Komeili <dkomeili@proton.me>
Date: Wed, 18 Feb 2026 00:33:20 +0000
Subject: [PATCH 2/2] fix: improve mobile compatibility by using
 hasOnScreenKeyboard to prevent keyboard popup

---
 src/lib/components/TerminalInput.svelte |  8 +++-----
 src/lib/device.ts                       | 13 +++++++++++++
 src/routes/Terminal.svelte              | 13 +++++--------
 3 files changed, 21 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/device.ts

diff --git a/src/lib/components/TerminalInput.svelte b/src/lib/components/TerminalInput.svelte
index bbd5270..0f090a2 100644
--- a/src/lib/components/TerminalInput.svelte
+++ b/src/lib/components/TerminalInput.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { hasOnScreenKeyboard } from '$lib/device';
+
 	interface Props {
 		value: string;
 		onSubmit: () => void;
@@ -29,12 +31,8 @@
 		}
 	}
 
-	function isMobile(): boolean {
-		return typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
-	}
-
 	function handleBlur(e: FocusEvent) {
-		if (isMobile()) return;
+		if (hasOnScreenKeyboard()) return;
 		const target = e.target as HTMLInputElement;
 		target?.focus({ preventScroll: true });
 	}
diff --git a/src/lib/device.ts b/src/lib/device.ts
new file mode 100644
index 0000000..27436b0
--- /dev/null
+++ b/src/lib/device.ts
@@ -0,0 +1,13 @@
+/**
+ * Returns true on devices likely to show an on-screen keyboard:
+ * coarse primary pointer (touch) combined with a narrow viewport.
+ * This intentionally excludes large touch-enabled desktops/tablets that
+ * don't pop up a software keyboard on focus.
+ */
+export function hasOnScreenKeyboard(): boolean {
+	return (
+		typeof window !== 'undefined' &&
+		window.matchMedia('(pointer: coarse)').matches &&
+		window.matchMedia('(max-width: 1024px)').matches
+	);
+}
diff --git a/src/routes/Terminal.svelte b/src/routes/Terminal.svelte
index 6f79445..df87852 100644
--- a/src/routes/Terminal.svelte
+++ b/src/routes/Terminal.svelte
@@ -4,6 +4,7 @@
 	import TerminalOutput from '$lib/components/TerminalOutput.svelte';
 	import TerminalInput from '$lib/components/TerminalInput.svelte';
 	import { executeCommand, config } from '$lib/commands-utils';
+	import { hasOnScreenKeyboard } from '$lib/device';
 	import type { HistoryEntry, Link } from '$lib/types/terminal';
 
 	interface Props {
@@ -32,8 +33,8 @@
 		// Apply theme to document
 		updateTheme();
 
-		// Focus input (skip on mobile to avoid keyboard popup)
-		if (!isMobile()) {
+		// Focus input (skip on devices with on-screen keyboards to avoid keyboard popup)
+		if (!hasOnScreenKeyboard()) {
 			inputElement?.focus();
 		}
 	});
@@ -110,10 +111,6 @@
 		}
 	}
 
-	function isMobile(): boolean {
-		return typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
-	}
-
 	function handleLinkClick(link: Link) {
 		if (link.type === 'command') {
 			input = link.target;
@@ -121,7 +118,7 @@
 		} else if (link.type === 'url') {
 			window.open(link.target, '_blank', 'noopener,noreferrer');
 		}
-		if (!isMobile()) {
+		if (!hasOnScreenKeyboard()) {
 			setTimeout(() => inputElement?.focus({ preventScroll: true }), 0);
 		}
 	}
@@ -135,7 +132,7 @@
 	}
 
 	function focusInput() {
-		if (!isMobile()) {
+		if (!hasOnScreenKeyboard()) {
 			inputElement?.focus({ preventScroll: true });
 		}
 	}