diff --git a/doc/source/conf.py b/doc/source/conf.py
index 4663b802..241a9236 100644
--- a/doc/source/conf.py
+++ b/doc/source/conf.py
@@ -13,6 +13,7 @@
     ansys_logo_black,
     ansys_logo_white,
     ansys_logo_white_cropped,
+    convert_version_to_pymeilisearch,
     generate_404,
     get_version_match,
     latex,
@@ -60,7 +61,7 @@
     "use_meilisearch": {
         "api_key": os.getenv("MEILISEARCH_API_KEY", ""),
         "index_uids": {
-            f"ansys-sphinx-theme-v{get_version_match(__version__)}": "ansys-sphinx-theme",
+            f"ansys-sphinx-theme-v{convert_version_to_pymeilisearch(__version__)}": "ansys-sphinx-theme",  # noqa: E501
         },
     },
 }
diff --git a/src/ansys_sphinx_theme/__init__.py b/src/ansys_sphinx_theme/__init__.py
index 92ef2d50..aa171d5d 100644
--- a/src/ansys_sphinx_theme/__init__.py
+++ b/src/ansys_sphinx_theme/__init__.py
@@ -63,6 +63,27 @@ def get_version_match(semver: str) -> str:
     return ".".join([major, minor])
 
 
+def convert_version_to_pymeilisearch(semver: str) -> str:
+    """Convert a semantic version number to pymeilisearch-compatible format.
+
+    This function evaluates the given semantic version number and returns a
+    version number that is compatible with `pymeilisearch`, where dots are
+    replaced with hyphens.
+
+    Parameters
+    ----------
+    semver : str
+        Semantic version number in the form of a string.
+
+    Returns
+    -------
+    str
+        pymeilisearch-compatible version number.
+    """
+    version = get_version_match(semver).replace(".", "-")
+    return version
+
+
 def setup_default_html_theme_options(app):
     """Set up the default configuration for the HTML options.
 
diff --git a/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/meilisearch.css b/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/meilisearch.css
index 4644deca..cd0afcc6 100644
--- a/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/meilisearch.css
+++ b/src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/meilisearch.css
@@ -1,15 +1,9 @@
 @import "https://cdn.jsdelivr.net/npm/docs-searchbar.js@latest/dist/cdn/docs-searchbar.min.css";
 @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css";
 
-div [data-ds-theme] .searchbox {
+div[data-ds-theme] .searchbox {
   overflow-y: scroll;
   margin: auto;
-  display: block;
-  width: 600px;
-}
-
-.dsb-suggestions {
-  width: 580px;
 }
 
 .docs-searchbar-suggestion--category-header {
@@ -18,11 +12,67 @@ div [data-ds-theme] .searchbox {
   text-align: left;
 }
 
-.docs-searchbar-suggestion--subcategory-column-text {
-  color: var(--pst-color-text-base);
+/* Styles for screens with a width of 576px or less */
+@media screen and (max-width: 576px) {
+  div[data-ds-theme] .searchbox {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .dsb-suggestions {
+    width: 100%;
+    max-width: 480px;
+  }
+
+  .meilisearch-autocomplete .dsb-dropdown-menu [class^="dsb-dataset-"] {
+    max-width: 580px;
+    min-width: 430px;
+    width: 450px;
+  }
+
+  .bd-search input {
+    width: 270px !important;
+  }
+
+  .index-select {
+    width: 180px;
+  }
+
+  .meilisearch-autocomplete .docs-searchbar-suggestion {
+    width: 450px;
+  }
 }
 
-div [data-ds-theme] .searchbox input {
+/* Styles for screens with a width of 1200px or less */
+@media screen and (min-width: 1200px) {
+  div[data-ds-theme] .searchbox {
+    max-width: 800px;
+  }
+
+  .dsb-suggestions {
+    width: 100%;
+    max-width: 580px;
+  }
+
+  .meilisearch-autocomplete .dsb-dropdown-menu {
+    max-width: 870px;
+    min-width: 580px;
+    width: 850px;
+  }
+
+  .bd-search input {
+    width: 600px !important;
+  }
+  .index-select {
+    width: 250px;
+  }
+
+  .meilisearch-autocomplete .docs-searchbar-suggestion {
+    width: 735px;
+  }
+}
+
+div[data-ds-theme] .searchbox input {
   height: 32px;
   border-radius: 8px;
   font-size: 18px;
@@ -34,6 +84,10 @@ div [data-ds-theme] .searchbox input {
   display: none;
 }
 
+.docs-searchbar-footer {
+  display: none;
+}
+
 [class*="docs-searchbar-suggestion"] {
   text-decoration: none;
 }
@@ -54,7 +108,6 @@ div [data-ds-theme] .searchbox input {
 }
 
 #search-bar-input {
-  width: 550px;
   background-color: var(--pst-color-background);
   border: 1px solid var(--pst-color-border);
   border-radius: 0.25rem;
@@ -66,7 +119,7 @@ div [data-ds-theme] .searchbox input {
 
 .meilisearch-autocomplete::before {
   content: "\f002";
-  font-family: "Font Awesome 6 Free"; /* The Font Awesome font family */
+  font-family: "Font Awesome 6 Free";
   position: absolute;
   left: 8px;
   top: 50%;
@@ -85,7 +138,6 @@ div [data-ds-theme] .searchbox input {
   font-family: "Open Sans", sans-serif;
   box-shadow: 0px 0px 20px var(--pst-color-border);
   padding: 0 10px 0px 10px;
-  width: 250px;
   margin-left: 5px;
 }
 
@@ -94,19 +146,15 @@ div [data-ds-theme] .searchbox input {
   border: 1px solid #d9d9d9;
   background: var(--pst-color-background);
   border-radius: 4px;
-  max-width: 800px;
-  min-width: 500px;
   padding: 0 8px 8px;
-  width: 805px;
 }
 .meilisearch-autocomplete .dsb-dropdown-menu {
-  height: 500px !important; /* Set a fixed height to trigger the scrollbar */
-  overflow-y: auto !important; /* Enable the vertical scrollbar */
+  max-height: 600px !important;
+  overflow-y: auto !important;
   border: 1px solid #ccc;
 }
 
 .meilisearch-autocomplete .docs-searchbar-suggestion {
-  width: 735px;
   background: var(--pst-color-background);
 }
 
@@ -124,11 +172,6 @@ div [data-ds-theme] .searchbox input {
 
 .meilisearch-autocomplete .docs-searchbar-suggestion--content {
   display: block;
-  width: 100% !important;
-}
-
-.meilisearch-autocomplete .dsb-dropdown-menu {
-  max-width: 800px;
 }
 
 .meilisearch-autocomplete .docs-searchbar-suggestion--title {
@@ -139,10 +182,6 @@ div [data-ds-theme] .searchbox input {
   width: 100%;
 }
 
-.meilisearch-autocomplete .docs-searchbar-suggestion--text {
-  width: 100%;
-}
-
 /* Styling the scrollbar */
 .meilisearch-autocomplete .dsb-dropdown-menu::-webkit-scrollbar {
   width: 0.5rem;