From 5a2e2e7e1111864efa099f16480ac7e9db9ee4e5 Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Mon, 22 Dec 2025 16:40:51 +0530
Subject: [PATCH] [WEB-5662][WEB-5770] fix: alignment of cycles in sidebar and
 layout selection dropdown button (#8414)

---
 .../issues/issue-layouts/properties/cycle.tsx    |  2 +-
 .../[workspaceSlug]/(projects)/star-us-link.tsx  |  2 +-
 apps/web/core/components/dropdowns/buttons.tsx   |  4 ++--
 .../core/components/dropdowns/cycle/index.tsx    |  2 +-
 apps/web/core/components/dropdowns/estimate.tsx  | 16 ++++++++++------
 apps/web/core/components/dropdowns/layout.tsx    |  3 ++-
 .../dropdowns/module/button-content.tsx          |  4 ++--
 .../issues/issue-detail/module-select.tsx        |  2 +-
 .../ui/src/breadcrumbs/navigation-dropdown.tsx   |  2 +-
 .../breadcrumbs/navigation-search-dropdown.tsx   |  2 +-
 10 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx b/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
index 5fc975b36..a3dac6944 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
@@ -27,7 +27,7 @@ export const IssueBlockCycle = observer(function IssueBlockCycle({ cycleId, shou
       >
         <div className="flex w-full items-center text-11 gap-1.5">
           <CycleIcon className="h-3 w-3 flex-shrink-0" />
-          <div className="max-w-40 flex-grow truncate ">{cycle?.name ?? "No Cycle"}</div>
+          <div className="max-w-40 truncate ">{cycle?.name ?? "No Cycle"}</div>
         </div>
       </div>
     </Tooltip>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx
index 86ab8af06..7501a2e1e 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx
@@ -29,7 +29,7 @@ export function StarUsOnGitHubLink() {
           },
         })
       }
-      className="flex flex-shrink-0 items-center gap-1.5 rounded-sm bg-layer-1 px-3 py-1.5"
+      className="flex flex-shrink-0 items-center gap-1.5 rounded-sm bg-layer-2 px-3 py-1.5"
       href="https://github.com/makeplane/plane"
       target="_blank"
       rel="noopener noreferrer"
diff --git a/apps/web/core/components/dropdowns/buttons.tsx b/apps/web/core/components/dropdowns/buttons.tsx
index 217ea5245..b7e04a367 100644
--- a/apps/web/core/components/dropdowns/buttons.tsx
+++ b/apps/web/core/components/dropdowns/buttons.tsx
@@ -104,7 +104,7 @@ function BackgroundButton(props: ButtonProps) {
         variant="ghost"
         size="sm"
         className={cn(
-          "h-full w-full flex items-center justify-start gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
+          "h-full w-full flex items-center justify-between gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
           className
         )}
       >
@@ -129,7 +129,7 @@ function TransparentButton(props: ButtonProps) {
         variant="ghost"
         size="sm"
         className={cn(
-          "h-full w-full flex items-center justify-start gap-1.5",
+          "h-full w-full flex items-center justify-between gap-1.5",
           {
             "bg-layer-transparent-active": isActive,
           },
diff --git a/apps/web/core/components/dropdowns/cycle/index.tsx b/apps/web/core/components/dropdowns/cycle/index.tsx
index 1e00a3dab..f5d8d7adb 100644
--- a/apps/web/core/components/dropdowns/cycle/index.tsx
+++ b/apps/web/core/components/dropdowns/cycle/index.tsx
@@ -117,7 +117,7 @@ export const CycleDropdown = observer(function CycleDropdown(props: Props) {
           >
             {!hideIcon && <CycleIcon className="h-3 w-3 flex-shrink-0" />}
             {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && (
-              <span className="max-w-40 flex-grow truncate">{selectedName ?? placeholder}</span>
+              <span className="max-w-40 truncate">{selectedName ?? placeholder}</span>
             )}
             {dropdownArrow && (
               <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
diff --git a/apps/web/core/components/dropdowns/estimate.tsx b/apps/web/core/components/dropdowns/estimate.tsx
index 4e1b0f313..0f765b243 100644
--- a/apps/web/core/components/dropdowns/estimate.tsx
+++ b/apps/web/core/components/dropdowns/estimate.tsx
@@ -192,12 +192,16 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
           >
             {!hideIcon && <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
             {(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-              <span className="flex-grow truncate">
-                {selectedEstimate
-                  ? currentActiveEstimate?.type === EEstimateSystem.TIME
-                    ? convertMinutesToHoursMinutesString(Number(selectedEstimate.value))
-                    : selectedEstimate.value
-                  : placeholder}
+              <span className="truncate">
+                {selectedEstimate ? (
+                  currentActiveEstimate?.type === EEstimateSystem.TIME ? (
+                    convertMinutesToHoursMinutesString(Number(selectedEstimate.value))
+                  ) : (
+                    selectedEstimate.value
+                  )
+                ) : (
+                  <span className="text-placeholder">{placeholder}</span>
+                )}
               </span>
             )}
             {dropdownArrow && (
diff --git a/apps/web/core/components/dropdowns/layout.tsx b/apps/web/core/components/dropdowns/layout.tsx
index 37f946b1a..6d246b39f 100644
--- a/apps/web/core/components/dropdowns/layout.tsx
+++ b/apps/web/core/components/dropdowns/layout.tsx
@@ -9,6 +9,7 @@ import { Dropdown } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
+import { getIconButtonStyling } from "@plane/propel/icon-button";
 
 type TLayoutDropDown = {
   onChange: (value: EIssueLayoutTypes) => void;
@@ -67,7 +68,7 @@ export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDro
       value={value?.toString()}
       keyExtractor={keyExtractor}
       options={options}
-      buttonContainerClassName="bg-surface-1 border border-subtle hover:bg-surface-2 focus:text-tertiary focus:bg-surface-2 px-2 py-1.5  rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center relative"
+      buttonContainerClassName={cn(getIconButtonStyling("secondary", "lg"), "w-auto px-2")}
       buttonContent={buttonContent}
       renderItem={itemContent}
       disableSearch
diff --git a/apps/web/core/components/dropdowns/module/button-content.tsx b/apps/web/core/components/dropdowns/module/button-content.tsx
index 55be6a135..a2ea4561d 100644
--- a/apps/web/core/components/dropdowns/module/button-content.tsx
+++ b/apps/web/core/components/dropdowns/module/button-content.tsx
@@ -45,7 +45,7 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
           <div className="relative flex items-center max-w-full gap-1">
             {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
             {(value.length > 0 || !!placeholder) && (
-              <div className="max-w-40 flex-grow truncate">
+              <div className="max-w-40 truncate">
                 {value.length > 0
                   ? value.length === 1
                     ? `${getModuleById(value[0])?.name || "module"}`
@@ -75,7 +75,7 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
                       isMobile={isMobile}
                       renderByDefault={false}
                     >
-                      <span className="max-w-40 flex-grow truncate text-11 font-medium">{moduleDetails?.name}</span>
+                      <span className="max-w-40 truncate text-11 font-medium">{moduleDetails?.name}</span>
                     </Tooltip>
                   )}
                   {!disabled && (
diff --git a/apps/web/core/components/issues/issue-detail/module-select.tsx b/apps/web/core/components/issues/issue-detail/module-select.tsx
index 4d601b2e2..42e0fe1ec 100644
--- a/apps/web/core/components/issues/issue-detail/module-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/module-select.tsx
@@ -64,7 +64,7 @@ export const IssueModuleSelect = observer(function IssueModuleSelect(props: TIss
         placeholder={t("module.no_module")}
         disabled={disableSelect}
         className="group h-full w-full"
-        buttonContainerClassName="w-full text-left h-7.5 rounded-sm"
+        buttonContainerClassName="w-full text-left rounded-sm"
         buttonClassName={`text-body-xs-medium justify-between ${issue?.module_ids?.length ? "" : "text-placeholder"}`}
         buttonVariant="transparent-with-text"
         hideIcon
diff --git a/packages/ui/src/breadcrumbs/navigation-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
index 623fe1991..9010602c5 100644
--- 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
index 23305ad71..0ccc2e509 100644
--- 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>}