Fix #54: Make UI responsive for mobile phones

.gitignore

@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+dev-dist/

eslint.config.mjs

@@ -12,6 +12,7 @@ export default [
 			'**/.DS_Store',
 			'**/node_modules',
 			'build',
+			'dev-dist',
 			'.svelte-kit',
 			'package',
 			'**/.env',

src/lib/components/TextArea.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	let {
 		value = $bindable(''),
-		id = 'ta',
+		id,
 		labelText = '',
 		spellcheck = false
 	}: {
@@ -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>

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>

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>

src/routes/docs/+page.svelte

@@ -10,7 +10,7 @@
 		manipulation: TManipulation;
 	}
 
-	const manipulationsDocs: ManipulationDoc[] = [
+	const docsTemplate: ManipulationDoc[] = [
 		{
 			name: 'Replace',
 			description: 'Replaces all occurencies of a string in input',
@@ -94,6 +94,12 @@
 			}
 		}
 	];
+
+	function cloneDocsTemplate(): ManipulationDoc[] {
+		return JSON.parse(JSON.stringify(docsTemplate)) as ManipulationDoc[];
+	}
+
+	let docsState = $state(cloneDocsTemplate());
 </script>
 
 <div class="container">
@@ -102,7 +108,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>
@@ -121,19 +127,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>

src/routes/docs/ManipulationBlock.svelte

@@ -5,26 +5,49 @@
 	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('');
+	let localManipulation = $state<TManipulation | null>(null);
+
+	$effect(() => {
+		localSource = source;
+		localManipulation = cloneManipulation(manipulation);
+	});
+
+	let result = $derived(
+		localManipulation ? applyManipulations(localSource, [localManipulation]) : localSource
+	);
 </script>
 
 <div>
-	<TextArea bind:value={source} />
-	<Manipulation bind:manipulation />
+	<TextArea bind:value={localSource} />
+	{#if localManipulation}
+		<Manipulation bind:manipulation={localManipulation} />
+	{/if}
 	<TextArea bind:value={result} />
 </div>
 
 <style>
 	div {
-		display: flex;
-		flex-direction: row;
+		display: grid;
+		grid-template-columns: 1fr auto 1fr;
 		gap: 10px;
 	}
+
+	@media (max-width: 768px) {
+		div {
+			grid-template-columns: 1fr;
+			gap: 8px;
+		}
+	}
 </style>