From 39b15f1314236c9db6110a57e09d92cf859cc174 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Sat, 19 Jul 2025 19:19:22 +0200
Subject: [PATCH] Fixes for small screens

---
 src/lib/components/wizard/StepSheetSearch.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/wizard/StepSheetSearch.svelte b/src/lib/components/wizard/StepSheetSearch.svelte
index 943161b..c8d3134 100644
--- a/src/lib/components/wizard/StepSheetSearch.svelte
+++ b/src/lib/components/wizard/StepSheetSearch.svelte
@@ -90,7 +90,7 @@
 				type="text"
 				bind:value={searchQuery}
 				placeholder="Type sheet name..."
-				class="flex-grow rounded-l-lg border border-gray-300 px-4 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-600"
+				class="flex-grow min-w-0 rounded-l-lg border border-gray-300 px-4 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-600"
 				onkeydown={(e) => {
 					if (e.key === 'Enter') handleSearch();
 				}}
@@ -142,19 +142,19 @@
 								if (e.key === 'Enter' || e.key === ' ') handleSelectSheet(sheet);
 							}}
 						>
-							<div class="flex items-center justify-between">
+							<div class="flex flex-wrap items-center justify-between">
 								<div>
 									<p class="font-medium text-gray-900">{sheet.name}</p>
-									<p class="mt-1 text-xs text-gray-500">ID: {sheet.id}</p>
+									<p class="mt-1 text-xs text-gray-500 break-all whitespace-normal" title={sheet.id}>ID: {sheet.id}</p>
 								</div>
 
 								<div class="flex items-center">
 									{#if sheet.iconLink}
-										<img src={sheet.iconLink} alt="Sheet icon" class="mr-2 h-5 w-5" />
+										<img src={sheet.iconLink} alt="Sheet icon" class="my-2 mr-2 h-5 w-5" />
 									{/if}
 
 									{#if $selectedSheet?.spreadsheetId === (sheet.spreadsheetId || sheet.id)}
-										<svg class="h-5 w-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+										<svg class="h-5 w-5 text-blue-600 my-2" fill="currentColor" viewBox="0 0 20 20">
 											<path
 												fill-rule="evenodd"
 												d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"