binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Jayash Tripathy 2025-12-22 16:40:51 +05:30 • committed by GitHub
parent e2fcb5044d
commit 5a2e2e7e11
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 22 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
View file

@ -27,7 +27,7 @@ export const IssueBlockCycle = observer(function IssueBlockCycle({ cycleId, shou
> >
<div className="flex w-full items-center text-11 gap-1.5"> <div className="flex w-full items-center text-11 gap-1.5">
<CycleIcon className="h-3 w-3 flex-shrink-0" /> <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>
</div> </div>
</Tooltip> </Tooltip>

2
apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx
View file

@ -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" href="https://github.com/makeplane/plane"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"

4
apps/web/core/components/dropdowns/buttons.tsx
View file

@ -104,7 +104,7 @@ function BackgroundButton(props: ButtonProps) {
variant="ghost" variant="ghost"
size="sm" size="sm"
className={cn( 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 className
)} )}
> >
@ -129,7 +129,7 @@ function TransparentButton(props: ButtonProps) {
variant="ghost" variant="ghost"
size="sm" size="sm"
className={cn( 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, "bg-layer-transparent-active": isActive,
}, },

2
apps/web/core/components/dropdowns/cycle/index.tsx
View file

@ -117,7 +117,7 @@ export const CycleDropdown = observer(function CycleDropdown(props: Props) {
> >
{!hideIcon && <CycleIcon className="h-3 w-3 flex-shrink-0" />} {!hideIcon && <CycleIcon className="h-3 w-3 flex-shrink-0" />}
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && ( {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 && ( {dropdownArrow && (
<ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" /> <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />

16
apps/web/core/components/dropdowns/estimate.tsx
View file

@ -192,12 +192,16 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
> >
{!hideIcon && <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />} {!hideIcon && <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
{(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && ( {(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
<span className="flex-grow truncate"> <span className="truncate">
{selectedEstimate {selectedEstimate ? (
? currentActiveEstimate?.type === EEstimateSystem.TIME currentActiveEstimate?.type === EEstimateSystem.TIME ? (
? convertMinutesToHoursMinutesString(Number(selectedEstimate.value)) convertMinutesToHoursMinutesString(Number(selectedEstimate.value))
: selectedEstimate.value ) : (
: placeholder} selectedEstimate.value
)
) : (
<span className="text-placeholder">{placeholder}</span>
)}
</span> </span>
)} )}
{dropdownArrow && ( {dropdownArrow && (

3
apps/web/core/components/dropdowns/layout.tsx
View file

@ -9,6 +9,7 @@ import { Dropdown } from "@plane/ui";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
// components // components
import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon"; import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
import { getIconButtonStyling } from "@plane/propel/icon-button";
type TLayoutDropDown = { type TLayoutDropDown = {
onChange: (value: EIssueLayoutTypes) => void; onChange: (value: EIssueLayoutTypes) => void;
@ -67,7 +68,7 @@ export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDro
value={value?.toString()} value={value?.toString()}
keyExtractor={keyExtractor} keyExtractor={keyExtractor}
options={options} 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} buttonContent={buttonContent}
renderItem={itemContent} renderItem={itemContent}
disableSearch disableSearch

4
apps/web/core/components/dropdowns/module/button-content.tsx
View file

@ -45,7 +45,7 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
<div className="relative flex items-center max-w-full gap-1"> <div className="relative flex items-center max-w-full gap-1">
{!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />} {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
{(value.length > 0 || !!placeholder) && ( {(value.length > 0 || !!placeholder) && (
<div className="max-w-40 flex-grow truncate"> <div className="max-w-40 truncate">
{value.length > 0 {value.length > 0
? value.length === 1 ? value.length === 1
? `${getModuleById(value[0])?.name || "module"}` ? `${getModuleById(value[0])?.name || "module"}`
@ -75,7 +75,7 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
isMobile={isMobile} isMobile={isMobile}
renderByDefault={false} 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> </Tooltip>
)} )}
{!disabled && ( {!disabled && (

2
apps/web/core/components/issues/issue-detail/module-select.tsx
View file

@ -64,7 +64,7 @@ export const IssueModuleSelect = observer(function IssueModuleSelect(props: TIss
placeholder={t("module.no_module")} placeholder={t("module.no_module")}
disabled={disableSelect} disabled={disableSelect}
className="group h-full w-full" 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"}`} buttonClassName={`text-body-xs-medium justify-between ${issue?.module_ids?.length ? "" : "text-placeholder"}`}
buttonVariant="transparent-with-text" buttonVariant="transparent-with-text"
hideIcon hideIcon

2
packages/ui/src/breadcrumbs/navigation-dropdown.tsx
View file

@ -46,7 +46,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
)} )}
> >
<div className="flex @4xl:hidden text-tertiary">...</div> <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>} {selectedItemIcon && <Breadcrumbs.Icon>{selectedItemIcon}</Breadcrumbs.Icon>}
<Breadcrumbs.Label>{selectedItem?.title}</Breadcrumbs.Label> <Breadcrumbs.Label>{selectedItem?.title}</Breadcrumbs.Label>
</div> </div>

2
packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
View file

@ -70,7 +70,7 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
{shouldTruncate && <div className="flex @4xl:hidden text-tertiary">...</div>} {shouldTruncate && <div className="flex @4xl:hidden text-tertiary">...</div>}
<div <div
className={cn("flex gap-2", { 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>} {icon && <Breadcrumbs.Icon>{icon}</Breadcrumbs.Icon>}