[WEB-5662][WEB-5770] fix: alignment of cycles in sidebar and layout selection dropdown button (#8414)

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,
           },

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" />

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 && (

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

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 && (