Fix UI issues (#1464)

1. Toggle the docs menu conditionally to avoid showing empty white space
when the menu is not present.

<img width="752" alt="Screenshot 2025-05-02 at 10 41 07 AM"
src="https://github.com/user-attachments/assets/5d39502b-566b-4488-b94c-33347456d4d1"
/>

2. Fix padding and layout shift when pasting into the search input
field.

<img width="752" alt="Screenshot 2025-05-02 at 10 42 28 AM"
src="https://github.com/user-attachments/assets/454621c7-1639-44f7-894e-668c6d45a6ea"
/>

Author: rushenn

source/_static/scss/includes/_search.scss

@@ -3,9 +3,9 @@
 		.header {
 			.search__dropdown {
 				position: absolute;
-				top: 100%;
-				left: 0;
-				width: 100%;
+				top: calc(100% - 1rem);
+				left: 0.1rem;
+				width: calc(100% - 0.2rem);
 			}
 
 			.search--focused {
@@ -71,6 +71,11 @@
 	.search__reset {
 		display: grid;
 	}
+
+	#search-box {
+		position: relative;
+		z-index: 11;
+	}
 }
 
 .search__form {
@@ -105,7 +110,9 @@
 	border-radius: $border-radius;
 	cursor: pointer;
 	display: none;
-	margin-right: 0.75rem;
+	position: absolute;
+	right: 0.75rem;
+	top: 0.6rem;
 
 	&:focus,
 	&:hover {
@@ -127,7 +134,7 @@
 }
 
 .search__powered-by {
-	padding: 0.6rem 1rem;
+	padding: 0.3rem 0.7rem;
 	display: inline-flex;
 	align-items: center;
 	color: var(--text-muted-color);
@@ -190,7 +197,7 @@
 	border: 1px solid var(--is-refine-list-border-color);
 	border-radius: $border-radius;
 	line-height: 100%;
-	padding: 0.35rem 0.5rem;
+	padding: 0.35rem 0.6rem;
 	font-weight: $font-weight-medium;
 	font-size: $font-size-xs;
 }
@@ -217,6 +224,7 @@
 .search__hits__list {
 	list-style: none;
 	margin: 0;
+	padding: 0;
 	text-align: left;
 }
 
@@ -234,6 +242,10 @@
 		&:focus,
 		&:hover {
 			background-color: var(--is-highlight-color);
+
+			.search__hits__icon {
+				background-color: $white;
+			}
 		}
 	}
 }
@@ -292,7 +304,7 @@
 	flex-shrink: 0;
 	margin-right: 0.75rem;
 	border-radius: $border-radius;
-	background-color: var(--is-search-bg);
+	background-color: var(--theme-light-bg);
 	display: grid;
 	fill: var(--text-muted-color);
 	place-content: center;
@@ -312,13 +324,13 @@
 
 
 .search__hits--empty {
-	display: grid;
-	place-content: center;
+	margin: 0;
+	padding: 0;
 	text-align: center;
 	font-size: $font-size-sm;
 	color: var(--text-muted-color);
 
-	svg {
+	& > svg {
 		margin-bottom: 1rem;
 	}
 
@@ -403,6 +415,7 @@
 		flex-direction: column;
 		border-radius: $border-radius-lg;
 		display: none;
+		padding-top: 1.5rem;
 		max-height: 24.5rem;
 		box-shadow: 0px 7px 10px #00000036;
 	}
@@ -431,7 +444,7 @@
 	}
 
 	.search__hits__list {
-		padding: 1rem;
+		padding: 0.75rem;
 	}
 }
 

source/_static/scss/includes/_theme.scss

@@ -55,8 +55,8 @@ $theme-properties: (
     --docs-nav-group-border-color: $light-300 $dark-300,
 
     // Scrollbar
-    --scrollbar-bg: $light-500 $dark-200,
-    --scrollbar-hover-bg: darken($light-500, 5%) $dark-300,
+    --scrollbar-bg: $light-300 $dark-200,
+    --scrollbar-hover-bg: $light-400 $dark-300,
 
     // Table
     --table-border-color: $light-300 $dark-200,
@@ -120,7 +120,7 @@ $theme-properties: (
     // Search
     --is-dropdown-bg: #edf1f3 #1c232d,
     --is-container-background: rgba($black, 0.25) rgba(16, 21, 28, 0.851),
-    --is-highlight-color: rgba(120, 133, 152, 0.125) rgba(16, 21, 28, 0.3),
+    --is-highlight-color: $light-100 rgba(16, 21, 28, 0.3),
     --is-search-focus-shadow: rgba($white, 0.15) #1b232f,
     --is-hit-icon-color: $black $light-500,
     --is-search-bg: $white $dark-100,

source/_templates/header.html

@@ -28,16 +28,18 @@
 
       <h2 class="header__title hidden-rm">Documentation</h2>
 
-      <div class="docs-menu-wrapper overflow-x-auto hide-scrollbar mb-20 text-center">
-         <nav class="docs-menu bg-white/75 inline-flex items-center rounded-lg font-heading border p-0.5 border-theme-neutral-subtle">
-            {% for doc in docs %}
-            {% set current_name = doc.name if doc.current == True %}
-               <a target="{% if doc.external == True %}_blank{% endif %}" class="{% if doc.current == True %}active{% endif %} flex-1 rounded-md shrink-0 h-14 border border-transparent font-bold transition-all duration-300 hover:text-theme-red [&.active]:text-theme-red [&.active]:border-theme-red" href="{{ doc.url }}">                  
+      {% if docs %}
+         <div class="docs-menu-wrapper overflow-x-auto hide-scrollbar mb-20 text-center">
+            <nav class="docs-menu bg-white/75 inline-flex items-center rounded-lg font-heading border p-0.5 border-theme-neutral-subtle">
+               {% for doc in docs %}
+                  {% set current_name = doc.name if doc.current == True %}
+                  <a target="{% if doc.external == True %}_blank{% endif %}" class="{% if doc.current == True %}active{% endif %} flex-1 rounded-md shrink-0 h-14 border border-transparent font-bold transition-all duration-300 hover:text-theme-red [&.active]:text-theme-red [&.active]:border-theme-red" href="{{ doc.url }}">
                   {{ doc.name }}
-               </a>
-            {% endfor %}
-        </nav>
-      </div>
+                  </a>
+               {% endfor %}
+            </nav>
+         </div>
+      {% endif %}
 
       {%- include "platform-navigation.html" %}