refactor: enhance item alignment in breadcrumb navigation dropdowns for improved UI consistency

JayashTripathy · JayashTripathy · commit 83532594a362 · 2025-12-22T16:31:46.000+05:30
diff --git a/packages/ui/src/breadcrumbs/navigation-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
@@ -46,7 +46,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
           )}
         >
           <div className="flex @4xl:hidden text-tertiary">...</div>
-          <div className="hidden @4xl:flex gap-2">
+          <div className="hidden @4xl:flex gap-2 items-center">
             {selectedItemIcon && <Breadcrumbs.Icon>{selectedItemIcon}</Breadcrumbs.Icon>}
             <Breadcrumbs.Label>{selectedItem?.title}</Breadcrumbs.Label>
           </div>
diff --git a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
@@ -70,7 +70,7 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
               {shouldTruncate && <div className="flex @4xl:hidden text-tertiary">...</div>}
               <div
                 className={cn("flex gap-2", {
-                  "hidden @4xl:flex gap-2": shouldTruncate,
+                  "hidden @4xl:flex gap-2 items-center": shouldTruncate,
                 })}
               >
                 {icon && <Breadcrumbs.Icon>{icon}</Breadcrumbs.Icon>}

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow`
`46`	`46`	`)}`
`47`	`47`	`>`
`48`	`48`	`<div className="flex @4xl:hidden text-tertiary">...</div>`
`49`		`- <div className="hidden @4xl:flex gap-2">`
	`49`	`+ <div className="hidden @4xl:flex gap-2 items-center">`
`50`	`50`	`{selectedItemIcon && <Breadcrumbs.Icon>{selectedItemIcon}</Breadcrumbs.Icon>}`
`51`	`51`	`<Breadcrumbs.Label>{selectedItem?.title}</Breadcrumbs.Label>`
`52`	`52`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS`
`70`	`70`	`{shouldTruncate && <div className="flex @4xl:hidden text-tertiary">...</div>}`
`71`	`71`	`<div`
`72`	`72`	`className={cn("flex gap-2", {`
`73`		`- "hidden @4xl:flex gap-2": shouldTruncate,`
	`73`	`+ "hidden @4xl:flex gap-2 items-center": shouldTruncate,`
`74`	`74`	`})}`
`75`	`75`	`>`
`76`	`76`	`{icon && <Breadcrumbs.Icon>{icon}</Breadcrumbs.Icon>}`