From bf24b609c47a499e8b190c43607a85ddf0839482 Mon Sep 17 00:00:00 2001
From: Stephan Richter <s.richter@srsoftware.de>
Date: Sat, 25 Apr 2026 10:09:37 +0200
Subject: [PATCH] improved CSS for mobile devices

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
---
 frontend/src/Components/Autocomplete.svelte  | 22 ++++++++++++++------
 web/src/main/resources/web/css/bloodshed.css |  7 ++++++-
 web/src/main/resources/web/css/default.css   |  4 ++++
 web/src/main/resources/web/css/winter.css    |  4 ++++
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Components/Autocomplete.svelte b/frontend/src/Components/Autocomplete.svelte
index df37a557..1729fc77 100644
--- a/frontend/src/Components/Autocomplete.svelte
+++ b/frontend/src/Components/Autocomplete.svelte
@@ -17,6 +17,7 @@
     let selected   = $state(null);
     let candidates = $state([]);
     let timer      = null;
+    let list_elem;
 
     async function dummyGetCandidates(text){
         console.warn(`getCandidates(${text}) not overridden!`);
@@ -58,9 +59,8 @@
     }
 
     async function fetchCandidates(){
-        candidates = await getCandidates(candidate.display);
+        candidates = candidate.display ? await getCandidates(candidate.display) : [];
         selected = null;
-        if (selected>candidates.length) selected = candidates.length;
     }
 
     async function onkeyup(ev){
@@ -69,12 +69,14 @@
             ev.preventDefault();
             selected = selected == null ? 0: selected +1;
             if (selected >= candidates.length) selected = 0;
+            scrollTo(selected);
             return false;
         }
         if (ev.key == 'ArrowUp'){
             ev.preventDefault();
             selected = selected == null ? candidates.length -1 : selected -1;
             if (selected < 0) selected = candidates.length -1;
+            scrollTo(selected);
             return false;
         }
         if (ev.key == 'Enter'|| ev.key == 'Tab'){
@@ -113,6 +115,11 @@
         onSelect(candidate);
 
     }
+
+    function scrollTo(index){
+        let list_elements = list_elem.children;
+        if (list_elements) list_elements[index].scrollIntoView({block:'center'});
+    }
 </script>
 
 <style>
@@ -129,17 +136,20 @@
         list-style: none;
         padding: 4px;
         margin: 0;
+        min-width: 400px;
+        max-height: 200px;
+        overflow: scroll;
     }
     .highlight { background: orange; color: black; }
 
 </style>
 
-<span>
-    <input type="text" bind:value={candidate.display} {onkeyup} autofocus={autofocus} {id} />
+<span class="autocomplete">
+    <input type="text" bind:value={candidate.display} {onkeyup} autofocus={autofocus} />
     {#if candidates && candidates.length > 0}
-    <ul>
+    <ul bind:this={list_elem} class="suggestions">
         {#each candidates as candidate,i}
-        <li class="option {selected==i?'highlight':''}" onclick={e => selected = i} ondblclick={e => select(i)}>{candidate.display}</li>
+        <li class="option {selected==i?'highlight':''}" onclick={e => select(i)} ondblclick={e => select(i)}>{candidate.display}</li>
         {/each}
     </ul>
     {/if}
diff --git a/web/src/main/resources/web/css/bloodshed.css b/web/src/main/resources/web/css/bloodshed.css
index 9af28530..ef977dcd 100644
--- a/web/src/main/resources/web/css/bloodshed.css
+++ b/web/src/main/resources/web/css/bloodshed.css
@@ -542,7 +542,8 @@ select.autocomplete{
 }
 
 @media screen and (max-width: 600px) {
-    .grid2{
+    .grid2,
+    .grid3{
         display: grid;
         grid-template-columns: auto;
     }
@@ -582,6 +583,10 @@ select.autocomplete{
     #app nav.expanded .timetracking{
     	grid-column-end: span 2;
     }
+
+    .autocomplete .suggestions > *{
+    	font-size: 1.5em;
+    }
 }
 
 fieldset.vcard{
diff --git a/web/src/main/resources/web/css/default.css b/web/src/main/resources/web/css/default.css
index 65a92884..0f5c9bca 100644
--- a/web/src/main/resources/web/css/default.css
+++ b/web/src/main/resources/web/css/default.css
@@ -711,6 +711,10 @@ select.autocomplete{
     #app nav.expanded .timetracking{
     	grid-column-end: span 2;
     }
+
+    .autocomplete .suggestions > *{
+    	font-size: 1.5em;
+    }
 }
 
 fieldset.vcard{
diff --git a/web/src/main/resources/web/css/winter.css b/web/src/main/resources/web/css/winter.css
index ee8c9285..a8b8d7b5 100644
--- a/web/src/main/resources/web/css/winter.css
+++ b/web/src/main/resources/web/css/winter.css
@@ -701,6 +701,10 @@ select.autocomplete{
     #app nav.expanded .timetracking{
     	grid-column-end: span 2;
     }
+
+    .autocomplete .suggestions > *{
+    	font-size: 1.5em;
+    }
 }
 
 fieldset.vcard{