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