From 349e00fbf13cf3fc4aa8028178f1ab85a040d4ea Mon Sep 17 00:00:00 2001
From: Joeli Takala <joeli.takala@helsinki.fi>
Date: Tue, 17 Dec 2024 17:29:38 +0200
Subject: [PATCH 01/11] Pass the var search results size to JS

---
 src/view/scripts.inc.twig | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/view/scripts.inc.twig b/src/view/scripts.inc.twig
index 27c43bcc9..1fda51a7e 100644
--- a/src/view/scripts.inc.twig
+++ b/src/view/scripts.inc.twig
@@ -47,7 +47,10 @@ window.SKOSMOS = {
   {%- if request.plugins.callbacks ~%}
   "pluginCallbacks": [{% for function in request.plugins.callbacks %}{% if not loop.first %}, {% endif %}"{{ function }}"{% endfor %}],
   {%- endif ~%}
-  {%- if custom_labels -%}
+  {%- if GlobalConfig.searchResultsSize ~%}
+  "searchResultSize": {{ GlobalConfig.searchResultsSize }}
+  {%- endif ~%}
+  {% if custom_labels -%}
   "customLabels": { 
     {%- for k, v in custom_labels -%}
       {%- set label = v['label'][request.lang] -%}

From 78d69d737476fd836245087e46ab5e05630c14a4 Mon Sep 17 00:00:00 2001
From: Joeli Takala <joeli.takala@helsinki.fi>
Date: Tue, 17 Dec 2024 17:56:23 +0200
Subject: [PATCH 02/11] Added comma

---
 src/view/scripts.inc.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/view/scripts.inc.twig b/src/view/scripts.inc.twig
index 1fda51a7e..e3d22a0b3 100644
--- a/src/view/scripts.inc.twig
+++ b/src/view/scripts.inc.twig
@@ -48,7 +48,7 @@ window.SKOSMOS = {
   "pluginCallbacks": [{% for function in request.plugins.callbacks %}{% if not loop.first %}, {% endif %}"{{ function }}"{% endfor %}],
   {%- endif ~%}
   {%- if GlobalConfig.searchResultsSize ~%}
-  "searchResultSize": {{ GlobalConfig.searchResultsSize }}
+  "searchResultSize": {{ GlobalConfig.searchResultsSize }},
   {%- endif ~%}
   {% if custom_labels -%}
   "customLabels": { 

From cdaeb8749f06e04842d957c5590e49bf6fb1f09d Mon Sep 17 00:00:00 2001
From: Joeli Takala <joeli.takala@helsinki.fi>
Date: Tue, 17 Dec 2024 18:14:29 +0200
Subject: [PATCH 03/11] Scroll bar implementation based on bootstrap

---
 resource/js/vocab-search.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/resource/js/vocab-search.js b/resource/js/vocab-search.js
index e7e6b6528..8c26c0d9b 100644
--- a/resource/js/vocab-search.js
+++ b/resource/js/vocab-search.js
@@ -11,7 +11,8 @@ const vocabSearch = Vue.createApp({
       languageStrings: null,
       msgs: null,
       showDropdown: false,
-      showNotation: null
+      showNotation: null,
+      searchResultStyle: null
     }
   },
   mounted () {
@@ -62,6 +63,14 @@ const vocabSearch = Vue.createApp({
       if (this.searchTerm.includes('*')) { return this.searchTerm }
       return this.searchTerm + '*'
     },
+    formatSearchResultStyle () {
+      const maxResults = window.SKOSMOS.searchResultSize
+      if (maxResults) {
+        return this.renderedResultsList.length > maxResults
+          ? `max-height: ${maxResults * 1.8}rem` // rough length based on searchResultSize variable
+          : 'max-height: none'
+      }
+    },
     notationMatches (searchTerm, notation) {
       if (notation && notation.toLowerCase().includes(searchTerm.toLowerCase())) {
         return true
@@ -168,6 +177,7 @@ const vocabSearch = Vue.createApp({
           lang: window.SKOSMOS.lang
         })
       }
+      this.searchResultStyle = this.formatSearchResultStyle()
       this.showAutoComplete()
     },
     hideAutoComplete () {
@@ -264,8 +274,11 @@ const vocabSearch = Vue.createApp({
             @input="autoComplete()"
             @keyup.enter="gotoSearchPage()"
             @click="showAutoComplete()">
-          <ul id="search-autocomplete-results" class="dropdown-menu" :class="{ 'show': showDropdown }"
-            aria-labelledby="search-field">
+          <ul id="search-autocomplete-results"
+              class="dropdown-menu overflow-auto"
+              :class="{ 'show': showDropdown }"
+              :style="searchResultStyle"
+              aria-labelledby="search-field">
             <li class="autocomplete-result container" v-for="result in renderedResultsList"
               :key="result.prefLabel" >
               <template v-if="result.pageUrl">

From bb7963e0d20678aa47da5539c6709f378fb2743f Mon Sep 17 00:00:00 2001
From: Joeli Takala <joeli.takala@helsinki.fi>
Date: Tue, 17 Dec 2024 18:21:41 +0200
Subject: [PATCH 04/11] Tweaked the search autocomplete result background color

---
 resource/css/skosmos.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index 0ec52e8e2..9322ad7d0 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -20,6 +20,7 @@
   --sidebar-scrollbar-bg: var(--light-color);
   --sidebar-scrollbar-thumb: var(--secondary-medium-color);
   --search-bg: var(--white-color);
+  --search-dropdown-bg: var(--light-color);
   --search-border: var(--medium-color);
   --search-button-bg: var(--dark-color);
   --search-button-text: var(--white-color);
@@ -271,7 +272,7 @@ body {
 
   #search-wrapper .dropdown-menu {
     transform: translateY(-1px);
-    background-color: var(--search-bg);
+    background-color: var(--search-dropdown-bg);
     color: var(--headerbar-text-2);
     border: 1px solid var(--search-border);
     border-radius: 0;

From 7cb98ec2cee0e98d6ddc257db5f5166f6fa77f3b Mon Sep 17 00:00:00 2001
From: Joeli Takala <joeli.takala@helsinki.fi>
Date: Tue, 17 Dec 2024 18:23:02 +0200
Subject: [PATCH 05/11] Tweaked the autocomplete search result list width

---
 resource/js/vocab-search.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resource/js/vocab-search.js b/resource/js/vocab-search.js
index 8c26c0d9b..fd8ceb31f 100644
--- a/resource/js/vocab-search.js
+++ b/resource/js/vocab-search.js
@@ -275,7 +275,7 @@ const vocabSearch = Vue.createApp({
             @keyup.enter="gotoSearchPage()"
             @click="showAutoComplete()">
           <ul id="search-autocomplete-results"
-              class="dropdown-menu overflow-auto"
+              class="dropdown-menu overflow-auto w-100"
               :class="{ 'show': showDropdown }"
               :style="searchResultStyle"
               aria-labelledby="search-field">

From 6ea938a8c1472e1d100cc6514233f2cfa7c0f888 Mon Sep 17 00:00:00 2001
From: Joeli Takala <joeli.takala@helsinki.fi>
Date: Wed, 18 Dec 2024 11:28:42 +0200
Subject: [PATCH 06/11] Search bar drowpown list height in CSS

---
 resource/css/skosmos.css    |  2 ++
 resource/js/vocab-search.js | 15 ++-------------
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index 9322ad7d0..4e2ed091c 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -281,6 +281,8 @@ body {
   #search-wrapper ul {
     padding-top: 0rem;
     padding-bottom: 0rem;
+    max-height: 50vh;
+    overflow-y: auto;
   }
 
   #search-wrapper .autocomplete {
diff --git a/resource/js/vocab-search.js b/resource/js/vocab-search.js
index fd8ceb31f..2444ce9b3 100644
--- a/resource/js/vocab-search.js
+++ b/resource/js/vocab-search.js
@@ -11,8 +11,7 @@ const vocabSearch = Vue.createApp({
       languageStrings: null,
       msgs: null,
       showDropdown: false,
-      showNotation: null,
-      searchResultStyle: null
+      showNotation: null
     }
   },
   mounted () {
@@ -63,14 +62,6 @@ const vocabSearch = Vue.createApp({
       if (this.searchTerm.includes('*')) { return this.searchTerm }
       return this.searchTerm + '*'
     },
-    formatSearchResultStyle () {
-      const maxResults = window.SKOSMOS.searchResultSize
-      if (maxResults) {
-        return this.renderedResultsList.length > maxResults
-          ? `max-height: ${maxResults * 1.8}rem` // rough length based on searchResultSize variable
-          : 'max-height: none'
-      }
-    },
     notationMatches (searchTerm, notation) {
       if (notation && notation.toLowerCase().includes(searchTerm.toLowerCase())) {
         return true
@@ -177,7 +168,6 @@ const vocabSearch = Vue.createApp({
           lang: window.SKOSMOS.lang
         })
       }
-      this.searchResultStyle = this.formatSearchResultStyle()
       this.showAutoComplete()
     },
     hideAutoComplete () {
@@ -275,9 +265,8 @@ const vocabSearch = Vue.createApp({
             @keyup.enter="gotoSearchPage()"
             @click="showAutoComplete()">
           <ul id="search-autocomplete-results"
-              class="dropdown-menu overflow-auto w-100"
+              class="dropdown-menu w-100"
               :class="{ 'show': showDropdown }"
-              :style="searchResultStyle"
               aria-labelledby="search-field">
             <li class="autocomplete-result container" v-for="result in renderedResultsList"
               :key="result.prefLabel" >

From 622ae67008bb39f18a87cea9061bc717ba504a4f Mon Sep 17 00:00:00 2001
From: Joeli Takala <joeli.takala@helsinki.fi>
Date: Wed, 18 Dec 2024 11:34:26 +0200
Subject: [PATCH 07/11] Removed unused JS variable

---
 src/view/scripts.inc.twig | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/view/scripts.inc.twig b/src/view/scripts.inc.twig
index e3d22a0b3..27c43bcc9 100644
--- a/src/view/scripts.inc.twig
+++ b/src/view/scripts.inc.twig
@@ -47,10 +47,7 @@ window.SKOSMOS = {
   {%- if request.plugins.callbacks ~%}
   "pluginCallbacks": [{% for function in request.plugins.callbacks %}{% if not loop.first %}, {% endif %}"{{ function }}"{% endfor %}],
   {%- endif ~%}
-  {%- if GlobalConfig.searchResultsSize ~%}
-  "searchResultSize": {{ GlobalConfig.searchResultsSize }},
-  {%- endif ~%}
-  {% if custom_labels -%}
+  {%- if custom_labels -%}
   "customLabels": { 
     {%- for k, v in custom_labels -%}
       {%- set label = v['label'][request.lang] -%}

From d89d27722103c9ec2161fb8cc81909124367dfa6 Mon Sep 17 00:00:00 2001
From: Joeli Takala <joeli.takala@helsinki.fi>
Date: Wed, 18 Dec 2024 12:06:55 +0200
Subject: [PATCH 08/11] Added tests for autocomplete list scroll bar

---
 tests/cypress/template/vocab-search-bar.cy.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/tests/cypress/template/vocab-search-bar.cy.js b/tests/cypress/template/vocab-search-bar.cy.js
index f7a5c8d8d..9a17715e2 100644
--- a/tests/cypress/template/vocab-search-bar.cy.js
+++ b/tests/cypress/template/vocab-search-bar.cy.js
@@ -194,6 +194,21 @@ describe('Vocab search bar', () => {
         cy.get('li').last().find('b').eq(0).should('have.text', '51')
       })
     })
+      it('Long autocomplete result list should have a scroll bar', () => {
+        // go to YSO vocab front page
+        cy.visit('/yso/fi/')
+
+        // resize the window to smaller size
+        cy.viewport(1200, 600)
+
+        // type a search term and wait for the autocomplete to appear
+        cy.get('#search-field').type('mu')
+        cy.get('#search-autocomplete-results').should('be.visible')
+
+        // the result list should have a CSS-based scroll
+        cy.get('#search-autocomplete-results').should('have.css', 'overflow-y', 'auto')
+        cy.get('#search-autocomplete-results').should('have.css', 'max-height', '300px')
+      });
   });
 
   describe('Cookie Management', () => {

From 606df466545b2ff316471197b9a082724e259a66 Mon Sep 17 00:00:00 2001
From: Joeli Takala <joeli.takala@helsinki.fi>
Date: Thu, 19 Dec 2024 10:41:14 +0200
Subject: [PATCH 09/11] Don't let the search field to be drawn on top of the
 search button in some window widths

---
 resource/css/skosmos.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index 4e2ed091c..4b67d4891 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -205,6 +205,7 @@ body {
   }
 
   #search-wrapper {
+    display: flex;
     color: var(--headerbar-text-2);
     float: right;
     height: 3.5em;

From bde637f761d9fe60a18beebb054575066c550918 Mon Sep 17 00:00:00 2001
From: Joeli Takala <joeli.takala@helsinki.fi>
Date: Thu, 19 Dec 2024 11:38:03 +0200
Subject: [PATCH 10/11] Fixed intendation

---
 resource/js/vocab-search.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/resource/js/vocab-search.js b/resource/js/vocab-search.js
index 2444ce9b3..a26ba610c 100644
--- a/resource/js/vocab-search.js
+++ b/resource/js/vocab-search.js
@@ -275,7 +275,7 @@ const vocabSearch = Vue.createApp({
                   <div class="row pb-1">
                     <div class="col" v-if="result.hitType == 'hidden'">
                       <span class="result">
-                        <template v-if="result.showNotation">
+                        <template v-if="result.showNotation && result.notation">
                           {{ result.notation }}&nbsp;
                         </template>
                         <template v-if="result.hit.hasOwnProperty('match')">
@@ -289,7 +289,7 @@ const vocabSearch = Vue.createApp({
                     <div class="col" v-else-if="result.hitType == 'alt'">
                       <span>
                         <i>
-                          <template v-if="result.showNotation">
+                          <template v-if="result.showNotation && result.notation">
                             {{ result.notation }}&nbsp;
                           </template>
                           <template v-if="result.hit.hasOwnProperty('match')">
@@ -301,7 +301,7 @@ const vocabSearch = Vue.createApp({
                         </i>
                       </span>
                       <span> &rarr;&nbsp;<span class="result">
-                          <template v-if="result.showNotation">
+                          <template v-if="result.showNotation && result.notation">
                             {{ result.notation }}&nbsp;
                           </template>
                           <template v-if="result.hitPref.hasOwnProperty('match')">
@@ -323,12 +323,12 @@ const vocabSearch = Vue.createApp({
                         </template>
                       </span>
                       <span>
-                        &nbsp;{{ result.prefLabel }}
+                        {{ result.prefLabel }}
                       </span>
                     </div>
                     <div class="col" v-else-if="result.hitType == 'pref'">
                       <span class="result">
-                        <template v-if="result.showNotation">
+                        <template v-if="result.showNotation && result.notation">
                           {{ result.notation }}&nbsp;
                         </template>
                         <template v-if="result.hit.hasOwnProperty('match')">

From d7c0e1458e79709e26fc6bb0bb73c61d1272dafe Mon Sep 17 00:00:00 2001
From: Joeli Takala <joeli.takala@helsinki.fi>
Date: Thu, 19 Dec 2024 13:47:27 +0200
Subject: [PATCH 11/11] Removed unnecessary style definition

---
 resource/css/skosmos.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index 4b67d4891..4e2ed091c 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -205,7 +205,6 @@ body {
   }
 
   #search-wrapper {
-    display: flex;
     color: var(--headerbar-text-2);
     float: right;
     height: 3.5em;