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

Author: JayashTripathy

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>

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"

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

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

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>

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