Bootstrap 5 styling for typeahead.js (#5336)

* Bootstrap 5 styling for typeahead.js

* Increase top margin to not overlap the border-box of a focused form-control

---------

Co-authored-by: Greg Roach <greg@subaqua.co.uk>

4 files changed, 49 insertions, 3 deletions

diff --git a/package.json b/package.json
index c0e94052ea..0e5d5c8939 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,7 @@
     "moment": "2.30.1",
     "pinch-zoom-element": "1.1.1",
     "sortablejs": "1.15.7",
-    "tom-select": "2.5.2",
-    "typeahead.js-bootstrap4-css": "1.0.0"
+    "tom-select": "2.5.2"
   },
   "browserslist": [
     ">0.1% and not dead"
diff --git a/resources/css/_base.css b/resources/css/_base.css
index 836a8202b0..9c37821e4d 100644
--- a/resources/css/_base.css
+++ b/resources/css/_base.css
@@ -29,6 +29,7 @@
 @import "_sortable.css";
 @import "_tab-album.css";
 @import "_tab-relatives.css";
+@import "_typeaheadjs.css";
 
 /* Some icons need to be reversed on right-to-left pages */
 /* rtl:ignore */
diff --git a/resources/css/_typeaheadjs.css b/resources/css/_typeaheadjs.css
new file mode 100644
index 0000000000..a340efc28e
--- /dev/null
+++ b/resources/css/_typeaheadjs.css
@@ -0,0 +1,47 @@
+/**
+ * webtrees: online genealogy
+ * Copyright (C) 2026 webtrees development team
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/*
+ * Bootstrap 5 styling for typeahead.js
+ */
+
+.twitter-typeahead {
+    width: 100%;
+}
+
+.twitter-typeahead .tt-hint {
+    background-color: var(--bs-body-bg) !important;
+    color: var(--bs-tertiary-color);
+}
+
+.twitter-typeahead .tt-menu {
+    background: var(--bs-body-bg);
+    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    box-shadow: var(--bs-box-shadow);
+    margin-top: 0.25rem;
+    padding: 0.25rem 0;
+    width: 100%;
+}
+
+.twitter-typeahead .tt-suggestion {
+    padding: 0.25rem 0.75rem;
+    cursor: pointer;
+}
+
+.twitter-typeahead .tt-suggestion:hover,
+.twitter-typeahead .tt-suggestion.tt-cursor {
+    background-color: var(--bs-tertiary-bg);
+}
diff --git a/resources/css/vendor.css b/resources/css/vendor.css
index 5ebafc51bd..d7d4ed91aa 100644
--- a/resources/css/vendor.css
+++ b/resources/css/vendor.css
@@ -17,7 +17,6 @@
 @import "../../node_modules/datatables.net-bs5/css/dataTables.bootstrap5.css";
 @import "../../node_modules/tom-select/dist/css/tom-select.min.css";
 @import "../../node_modules/tom-select/dist/css/tom-select.bootstrap5.min.css";
-@import "../../node_modules/typeahead.js-bootstrap4-css/typeaheadjs.css";
 @import "../../node_modules/leaflet/dist/leaflet.css";
 @import "../../node_modules/beautifymarker/leaflet-beautify-marker-icon.css";
 @import "../../node_modules/leaflet-control-geocoder/dist/Control.Geocoder.css";