diff --git a/client/dashboard/components/section-header/index.tsx b/client/dashboard/components/section-header/index.tsx index 7056463e2cf7..338bceeb41c4 100644 --- a/client/dashboard/components/section-header/index.tsx +++ b/client/dashboard/components/section-header/index.tsx @@ -23,6 +23,7 @@ export const SectionHeader = ( { prefix, className, level = 2, + hasActionDropdown = false, }: SectionHeaderProps ) => { const HeadingTag = `h${ level }` as keyof JSX.IntrinsicElements; return ( @@ -53,7 +54,9 @@ export const SectionHeader = ( { justify="flex-start" expanded={ false } alignment="flex-start" - className="dashboard-section-header__actions" + className={ clsx( 'dashboard-section-header__actions', { + 'has-action-dropdown': !! hasActionDropdown, + } ) } style={ { flex: '1 1 auto' } } > { actions } diff --git a/client/dashboard/components/section-header/style.scss b/client/dashboard/components/section-header/style.scss index c3cb6328e4bc..ba6599aa232d 100644 --- a/client/dashboard/components/section-header/style.scss +++ b/client/dashboard/components/section-header/style.scss @@ -68,3 +68,10 @@ flex-shrink: 0; align-self: stretch; } + +.dashboard-section-header__actions.has-action-dropdown { + :last-child { + margin-inline-start: auto; + min-width: fit-content; + } +} diff --git a/client/dashboard/components/section-header/types.ts b/client/dashboard/components/section-header/types.ts index 83a89716da3b..60efea2983ad 100644 --- a/client/dashboard/components/section-header/types.ts +++ b/client/dashboard/components/section-header/types.ts @@ -15,6 +15,10 @@ export interface SectionHeaderProps { * or a search input, relevant to the page or section. */ actions?: React.ReactNode; + /** + * Whether the section header has a dropdown in the actions section. + */ + hasActionDropdown?: boolean; /** * An optional visual element like an icon or small illustration * to enhance recognition or provide visual interest. diff --git a/client/dashboard/domains/dns/add.tsx b/client/dashboard/domains/dns/add.tsx index 7a7397218097..ddabb95c34f1 100644 --- a/client/dashboard/domains/dns/add.tsx +++ b/client/dashboard/domains/dns/add.tsx @@ -54,7 +54,11 @@ export default function DomainAddDNS() { } description={ } /> + } + description={ } + hasActionDropdown + /> } > } description={ } /> + } + description={ } + hasActionDropdown + /> } > } description={ } + hasActionDropdown /> } diff --git a/client/dashboard/me/billing-purchases/purchase-settings/index.tsx b/client/dashboard/me/billing-purchases/purchase-settings/index.tsx index 5c12570373b1..4a3506c27ad7 100644 --- a/client/dashboard/me/billing-purchases/purchase-settings/index.tsx +++ b/client/dashboard/me/billing-purchases/purchase-settings/index.tsx @@ -25,7 +25,6 @@ import { Link } from '@tanstack/react-router'; import { __experimentalGrid as Grid, __experimentalText as Text, - __experimentalHStack as HStack, __experimentalVStack as VStack, DropdownMenu, MenuGroup, @@ -1084,16 +1083,17 @@ export default function PurchaseSettings() { title={ getTitleForDisplay( purchase ) } actions={ site?.options?.admin_url && ( - + <> { canPurchaseBeUpgraded( purchase ) && upgradeUrl && ( ) } - + ) } + hasActionDropdown description={ diff --git a/client/dashboard/sites/overview/index.tsx b/client/dashboard/sites/overview/index.tsx index 74d3152cc81a..2957b681cbe8 100644 --- a/client/dashboard/sites/overview/index.tsx +++ b/client/dashboard/sites/overview/index.tsx @@ -197,21 +197,19 @@ function SiteOverview( { } return ( - - - - - + <> + + - + ); }; @@ -223,6 +221,7 @@ function SiteOverview( { title={ getSiteDisplayName( site ) } description={ } actions={ renderActions() } + hasActionDropdown /> } >