improved CSS for mobile devices

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

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>
+<span class="autocomplete">
-    <input type="text" bind:value={candidate.display} {onkeyup} autofocus={autofocus} {id} />
+    <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}

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{

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{

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{