From d95e856a258ceccb6c61ce59724fbc5829fc2e6e Mon Sep 17 00:00:00 2001
From: funsaized <saiguy@icloud.com>
Date: Sat, 4 Apr 2026 21:26:25 +0200
Subject: [PATCH] fix(docs-infra): align search result icon with text on mobile

On narrow viewports, the search result icon was pushed to its own flex line when the title text was too long, causing vertical misalignment.

The fix wraps the title text and package badge in a single container that manages its own flex layout, preventing the icon from being separated from the text on narrow viewports.

Fixes #68005
---
 .../search-dialog/search-dialog.component.html | 18 ++++++++++--------
 .../search-dialog/search-dialog.component.scss | 16 +++++++++++++++-
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/adev/shared-docs/components/search-dialog/search-dialog.component.html b/adev/shared-docs/components/search-dialog/search-dialog.component.html
index 783b5d957f9..b9ff5129ed3 100644
--- a/adev/shared-docs/components/search-dialog/search-dialog.component.html
+++ b/adev/shared-docs/components/search-dialog/search-dialog.component.html
@@ -27,14 +27,16 @@
                     </i>
                   </span>
 
-                  <!-- Page title -->
-                  <span [innerHtml]="result.labelHtml"></span>
-                  @if (result.package) {
-                    <span
-                      [innerHTML]="result.package"
-                      class="docs-search-result__label__package"
-                    ></span>
-                  }
+                  <!-- Page title and package badge -->
+                  <span class="docs-search-result__label__text">
+                    <span [innerHtml]="result.labelHtml"></span>
+                    @if (result.package) {
+                      <span
+                        [innerHTML]="result.package"
+                        class="docs-search-result__label__package"
+                      ></span>
+                    }
+                  </span>
                 </p>
 
                 @if (result.subLabelHtml) {
diff --git a/adev/shared-docs/components/search-dialog/search-dialog.component.scss b/adev/shared-docs/components/search-dialog/search-dialog.component.scss
index 03f5d58578a..ac9c543518e 100644
--- a/adev/shared-docs/components/search-dialog/search-dialog.component.scss
+++ b/adev/shared-docs/components/search-dialog/search-dialog.component.scss
@@ -46,6 +46,7 @@ dialog {
 
       .docs-search-result-icon {
         display: inline-block;
+        flex-shrink: 0;
 
         i {
           display: flex;
@@ -91,7 +92,20 @@ dialog {
 
       &__label {
         font-weight: 600;
-        flex-wrap: wrap;
+
+        &__text {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: baseline;
+          gap: 0.25rem 0.5rem;
+          flex: 1;
+          min-width: 0;
+          overflow-wrap: break-word;
+
+          > * {
+            min-width: 0;
+          }
+        }
 
         &__package {
           font-size: 0.75rem;