From 157fe317776c4f22a0b250903ebd83af8acf9c8f Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Fri, 27 Feb 2026 12:24:12 +0300
Subject: [PATCH 1/5] Fix #54: Make UI responsive for mobile phones

- Add responsive breakpoints at 768px for all major components
- Convert main page grid from 3 columns to single column on mobile
- Add flex-wrap to manipulation components to prevent overflow
- Update TextArea with min-height and box-sizing for better mobile UX
- Improve docs page container with max-width and centered layout
---
 src/lib/components/TextArea.svelte              | 11 ++++++++++-
 .../components/Manipulation.svelte              |  8 ++++++++
 src/routes/+page.svelte                         | 12 ++++++++++++
 src/routes/docs/+page.svelte                    | 17 ++++++++++++++---
 src/routes/docs/ManipulationBlock.svelte        |  8 ++++++++
 5 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/TextArea.svelte b/src/lib/components/TextArea.svelte
index ba4a5a8..7eabe6f 100644
--- a/src/lib/components/TextArea.svelte
+++ b/src/lib/components/TextArea.svelte
@@ -21,16 +21,25 @@
 <style>
 	textarea {
 		width: 100%;
+		min-height: 120px;
 		color: var(--text-color);
 		border-radius: 10px;
 		border: 2px solid var(--border-color-100);
 		padding: 10px;
-
 		font-family: monospace;
+		resize: vertical;
+		box-sizing: border-box;
 	}
 
 	textarea:focus {
 		outline: none;
 		/* background-color: var(--bg-color-120); */
 	}
+
+	@media (max-width: 768px) {
+		textarea {
+			min-height: 100px;
+			padding: 8px;
+		}
+	}
 </style>
diff --git a/src/lib/manipulations/components/Manipulation.svelte b/src/lib/manipulations/components/Manipulation.svelte
index 8bb37da..4376f62 100644
--- a/src/lib/manipulations/components/Manipulation.svelte
+++ b/src/lib/manipulations/components/Manipulation.svelte
@@ -70,6 +70,7 @@
 		flex-direction: row;
 		gap: 10px;
 		align-items: center;
+		flex-wrap: wrap;
 
 		padding: 10px;
 		background-color: #fff;
@@ -103,4 +104,11 @@
 		min-width: 20px;
 		height: 20px;
 	}
+
+	@media (max-width: 768px) {
+		div {
+			gap: 8px;
+			padding: 8px;
+		}
+	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2a8f2e3..19ea39d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -89,6 +89,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: 10px;
+		min-width: 0;
 	}
 
 	.header-with-link {
@@ -97,4 +98,15 @@
 		gap: 10px;
 		align-items: end;
 	}
+
+	@media (max-width: 768px) {
+		.panels {
+			grid-template-columns: 1fr;
+			gap: 20px;
+		}
+
+		.panel {
+			gap: 8px;
+		}
+	}
 </style>
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index f7cafef..d8ebec9 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -121,19 +121,30 @@
 		justify-content: center;
 		gap: 10px;
 
-		padding-top: 10px;
-		padding-bottom: 10px;
+		padding: 10px;
+		max-width: 1200px;
+		margin: 0 auto;
 	}
 
 	.docs-row {
 		display: flex;
 		flex-direction: row;
-		margin: auto;
 		align-items: end;
 		gap: 10px;
+		flex-wrap: wrap;
 	}
 
 	h2 {
 		margin-top: 20px;
 	}
+
+	@media (max-width: 768px) {
+		.container {
+			padding: 8px;
+		}
+
+		.docs-row {
+			gap: 8px;
+		}
+	}
 </style>
diff --git a/src/routes/docs/ManipulationBlock.svelte b/src/routes/docs/ManipulationBlock.svelte
index 12466da..88d4e2c 100644
--- a/src/routes/docs/ManipulationBlock.svelte
+++ b/src/routes/docs/ManipulationBlock.svelte
@@ -26,5 +26,13 @@
 		display: flex;
 		flex-direction: row;
 		gap: 10px;
+		flex-wrap: wrap;
+	}
+
+	@media (max-width: 768px) {
+		div {
+			flex-direction: column;
+			gap: 8px;
+		}
 	}
 </style>

From e23f562062647cfd405f768be5a1aff851374da0 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Thu, 5 Mar 2026 17:22:38 +0300
Subject: [PATCH 2/5] fix docs responsiveness

---
 src/routes/docs/ManipulationBlock.svelte | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/routes/docs/ManipulationBlock.svelte b/src/routes/docs/ManipulationBlock.svelte
index 88d4e2c..225859c 100644
--- a/src/routes/docs/ManipulationBlock.svelte
+++ b/src/routes/docs/ManipulationBlock.svelte
@@ -23,15 +23,14 @@
 
 <style>
 	div {
-		display: flex;
-		flex-direction: row;
+		display: grid;
+		grid-template-columns: 1fr auto 1fr;
 		gap: 10px;
-		flex-wrap: wrap;
 	}
 
 	@media (max-width: 768px) {
 		div {
-			flex-direction: column;
+			grid-template-columns: 1fr;
 			gap: 8px;
 		}
 	}

From 3e49b0c99ea46a88a0a76147c5ec91e62d0d5014 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Thu, 5 Mar 2026 20:43:41 +0300
Subject: [PATCH 3/5] fix bad docs

---
 .gitignore                               |  1 +
 src/lib/components/TextArea.svelte       |  4 ++--
 src/routes/docs/+page.svelte             | 16 ++++++++++++++--
 src/routes/docs/ManipulationBlock.svelte | 22 +++++++++++++++++-----
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6635cf5..328ae5a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+dev-dist/
diff --git a/src/lib/components/TextArea.svelte b/src/lib/components/TextArea.svelte
index 7eabe6f..df8454e 100644
--- a/src/lib/components/TextArea.svelte
+++ b/src/lib/components/TextArea.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	let {
 		value = $bindable(''),
-		id = 'ta',
+		id,
 		labelText = '',
 		spellcheck = false
 	}: {
@@ -16,7 +16,7 @@
 	<label for={id}>{labelText}</label>
 {/if}
 
-<textarea {id} bind:value {spellcheck}></textarea>
+<textarea id={id ?? undefined} bind:value {spellcheck}></textarea>
 
 <style>
 	textarea {
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index d8ebec9..bef7338 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { type TManipulation } from '$lib/manipulations';
 	import Link from '$lib/components/Link.svelte';
 	import ManipulationBlock from './ManipulationBlock.svelte';
@@ -10,7 +11,7 @@
 		manipulation: TManipulation;
 	}
 
-	const manipulationsDocs: ManipulationDoc[] = [
+	const docsTemplate: ManipulationDoc[] = [
 		{
 			name: 'Replace',
 			description: 'Replaces all occurencies of a string in input',
@@ -94,6 +95,17 @@
 			}
 		}
 	];
+
+	function cloneDocsTemplate(): ManipulationDoc[] {
+		return JSON.parse(JSON.stringify(docsTemplate)) as ManipulationDoc[];
+	}
+
+	let docsState = $state(cloneDocsTemplate());
+
+	onMount(() => {
+		// Ensure route always starts from canonical examples after refresh.
+		docsState = cloneDocsTemplate();
+	});
 </script>
 
 <div class="container">
@@ -102,7 +114,7 @@
 		<Link link="/">Go to app</Link>
 	</div>
 
-	{#each manipulationsDocs as doc (doc.name)}
+	{#each docsState as doc (doc.name)}
 		<div class="docs-row"><h2>{doc.name}</h2></div>
 		<div class="docs-row">
 			<p>{doc.description}</p>
diff --git a/src/routes/docs/ManipulationBlock.svelte b/src/routes/docs/ManipulationBlock.svelte
index 225859c..6b42dbf 100644
--- a/src/routes/docs/ManipulationBlock.svelte
+++ b/src/routes/docs/ManipulationBlock.svelte
@@ -5,19 +5,31 @@
 	import { type TManipulation, applyManipulations } from '$lib/manipulations';
 
 	let {
-		manipulation = $bindable(),
-		source = $bindable()
+		manipulation,
+		source
 	}: {
 		manipulation: TManipulation;
 		source: string;
 	} = $props();
 
-	let result = $derived(applyManipulations(source, [manipulation]));
+	function cloneManipulation(value: TManipulation): TManipulation {
+		return JSON.parse(JSON.stringify(value)) as TManipulation;
+	}
+
+	let localSource = $state(source);
+	let localManipulation = $state(cloneManipulation(manipulation));
+
+	$effect(() => {
+		localSource = source;
+		localManipulation = cloneManipulation(manipulation);
+	});
+
+	let result = $derived(applyManipulations(localSource, [localManipulation]));
 </script>
 
 <div>
-	<TextArea bind:value={source} />
-	<Manipulation bind:manipulation />
+	<TextArea bind:value={localSource} />
+	<Manipulation bind:manipulation={localManipulation} />
 	<TextArea bind:value={result} />
 </div>
 

From c9f6cdd883f1a41a2d1b9f2f00c234ca9aac46b8 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Fri, 6 Mar 2026 08:34:27 +0300
Subject: [PATCH 4/5] Fix docs Svelte review issues

---
 src/lib/components/TextArea.svelte       |  2 +-
 src/routes/docs/+page.svelte             |  6 ------
 src/routes/docs/ManipulationBlock.svelte | 12 ++++++++----
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/TextArea.svelte b/src/lib/components/TextArea.svelte
index df8454e..270ab34 100644
--- a/src/lib/components/TextArea.svelte
+++ b/src/lib/components/TextArea.svelte
@@ -16,7 +16,7 @@
 	<label for={id}>{labelText}</label>
 {/if}
 
-<textarea id={id ?? undefined} bind:value {spellcheck}></textarea>
+<textarea id={id} bind:value {spellcheck}></textarea>
 
 <style>
 	textarea {
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index bef7338..469a338 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { type TManipulation } from '$lib/manipulations';
 	import Link from '$lib/components/Link.svelte';
 	import ManipulationBlock from './ManipulationBlock.svelte';
@@ -101,11 +100,6 @@
 	}
 
 	let docsState = $state(cloneDocsTemplate());
-
-	onMount(() => {
-		// Ensure route always starts from canonical examples after refresh.
-		docsState = cloneDocsTemplate();
-	});
 </script>
 
 <div class="container">
diff --git a/src/routes/docs/ManipulationBlock.svelte b/src/routes/docs/ManipulationBlock.svelte
index 6b42dbf..b61f8b6 100644
--- a/src/routes/docs/ManipulationBlock.svelte
+++ b/src/routes/docs/ManipulationBlock.svelte
@@ -16,20 +16,24 @@
 		return JSON.parse(JSON.stringify(value)) as TManipulation;
 	}
 
-	let localSource = $state(source);
-	let localManipulation = $state(cloneManipulation(manipulation));
+	let localSource = $state('');
+	let localManipulation = $state<TManipulation | null>(null);
 
 	$effect(() => {
 		localSource = source;
 		localManipulation = cloneManipulation(manipulation);
 	});
 
-	let result = $derived(applyManipulations(localSource, [localManipulation]));
+	let result = $derived(
+		localManipulation ? applyManipulations(localSource, [localManipulation]) : localSource
+	);
 </script>
 
 <div>
 	<TextArea bind:value={localSource} />
-	<Manipulation bind:manipulation={localManipulation} />
+	{#if localManipulation}
+		<Manipulation bind:manipulation={localManipulation} />
+	{/if}
 	<TextArea bind:value={result} />
 </div>
 

From 9bc664481e13e2f28804947403e4eafeab3e53cd Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Fri, 6 Mar 2026 08:38:10 +0300
Subject: [PATCH 5/5] Fix Svelte warnings in docs

---
 eslint.config.mjs                  | 1 +
 src/lib/components/TextArea.svelte | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index aa81aa3..1c43d21 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -12,6 +12,7 @@ export default [
 			'**/.DS_Store',
 			'**/node_modules',
 			'build',
+			'dev-dist',
 			'.svelte-kit',
 			'package',
 			'**/.env',
diff --git a/src/lib/components/TextArea.svelte b/src/lib/components/TextArea.svelte
index 270ab34..dc36217 100644
--- a/src/lib/components/TextArea.svelte
+++ b/src/lib/components/TextArea.svelte
@@ -16,7 +16,7 @@
 	<label for={id}>{labelText}</label>
 {/if}
 
-<textarea id={id} bind:value {spellcheck}></textarea>
+<textarea {id} bind:value {spellcheck}></textarea>
 
 <style>
 	textarea {