Merge branch 'tbulva-command-palette-results-too-long' into 'master'

Fixed css bug for command palette file names too long

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/178165



Merged-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Approved-by: Serhii Yarynovskyi <syarynovskyi@gitlab.com>
Approved-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Reviewed-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Co-authored-by: Tomas Bulva <tbulva@gitlab.com>

app/assets/javascripts/super_sidebar/components/global_search/command_palette/search_item.vue

@@ -45,12 +45,12 @@ export default {
       aria-hidden="true"
     />
     <gl-icon v-if="item.icon" class="gl-mr-3 gl-shrink-0" :name="item.icon" />
-    <span class="gl-flex gl-flex-col">
-      <span v-safe-html="highlightedName" class="gl-text-strong"></span>
+    <span class="gl-flex gl-w-full gl-min-w-0 gl-flex-col">
+      <span v-safe-html="highlightedName" class="gl-truncate gl-text-strong"></span>
       <span
         v-if="item.namespace"
         v-safe-html="item.namespace"
-        class="gl-text-sm gl-text-subtle"
+        class="gl-truncate gl-text-sm gl-text-subtle"
       ></span>
     </span>
   </div>

spec/frontend/super_sidebar/components/global_search/command_palette/__snapshots__/search_item_spec.js.snap

@@ -15,10 +15,10 @@ exports[`SearchItem should render the item 1`] = `
     src="https://www.gravatar.com/avatar/a9638f4ec70148d51e56bf05ad41e993?s=80&d=identicon"
   />
   <span
-    class="gl-flex gl-flex-col"
+    class="gl-flex gl-flex-col gl-min-w-0 gl-w-full"
   >
     <span
-      class="gl-text-strong"
+      class="gl-text-strong gl-truncate"
     >
       Cole Dickinson
     </span>
@@ -37,10 +37,10 @@ exports[`SearchItem should render the item 2`] = `
     variant="current"
   />
   <span
-    class="gl-flex gl-flex-col"
+    class="gl-flex gl-flex-col gl-min-w-0 gl-w-full"
   >
     <span
-      class="gl-text-strong"
+      class="gl-text-strong gl-truncate"
     >
       Manage &gt; Activity
     </span>
@@ -63,15 +63,15 @@ exports[`SearchItem should render the item 3`] = `
     src="/project/avatar/1/avatar.png"
   />
   <span
-    class="gl-flex gl-flex-col"
+    class="gl-flex gl-flex-col gl-min-w-0 gl-w-full"
   >
     <span
-      class="gl-text-strong"
+      class="gl-text-strong gl-truncate"
     >
       MockProject1
     </span>
     <span
-      class="gl-text-sm gl-text-subtle"
+      class="gl-text-sm gl-text-subtle gl-truncate"
     >
       Gitlab Org / MockProject1
     </span>
@@ -94,10 +94,10 @@ exports[`SearchItem should render the item 4`] = `
     src=""
   />
   <span
-    class="gl-flex gl-flex-col"
+    class="gl-flex gl-flex-col gl-min-w-0 gl-w-full"
   >
     <span
-      class="gl-text-strong"
+      class="gl-text-strong gl-truncate"
     >
       Dismiss Cipher with no integrity
     </span>