From 14fe0c0cc88eed16e97aecf31907c96e54891482 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Mon, 17 Aug 2026 17:28:22 +1000
Subject: [PATCH] fix(studio): slightly round split-button corners on focus
 (#49129)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What kind of change does this PR introduce?

UI polish for split buttons (primary action + dropdown chevron).
Follow-up to #49055.

## What is the current behavior?

The focus ring sits above the neighbouring half, but the inner edge
stays square, so the ring has two sharp corners at the join.

## What is the new behavior?

On keyboard focus, the squared-off edge uses a slight radius so the ring
matches the outer corners more closely. Resting state is unchanged.
Split-button callsites now share the same join classes as the
design-system example.

| Before | After |
| --- | --- |
| <img width="1030" height="296" alt="43471"
src="https://github.com/user-attachments/assets/9df3bd72-c7ac-4419-ae18-a7e649dc2d66"
/> | <img width="1056" height="276" alt="CleanShot 2026-08-17 at 10 45
09@2x"
src="https://github.com/user-attachments/assets/52e8a4dc-9c52-45ce-b4d0-f0e7b1b75935"
/> |

## To test

Tab to each half (labelled button, then chevron). Inner corners of the
focus ring should be slightly rounded, not square.

1. [Split with
dropdown](https://design-system-git-fix-split-button-focus-radius-supabase.vercel.app/design-system/docs/components/button#split-with-dropdown)
(no login)
2. [Access
Tokens](https://studio-staging-git-fix-split-button-focus-radius-supabase.vercel.app/dashboard/account/tokens)
→ Generate new token
3. Any project on [studio
staging](https://studio-staging-git-fix-split-button-focus-radius-supabase.vercel.app/dashboard/_/settings/general)
→ Settings → General → Restart project

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Accessibility**
  - Added accessible labels to dropdown and export controls.
- Improved keyboard-focus visibility, layering, and rounded edge
treatment across joined buttons and menus.
  - Removed misleading or redundant screen-reader text and titles.

- **Bug Fixes**
- Prevented split-button controls from shrinking or displaying awkward
borders and corners.
- Refined hover and focus behavior for action buttons throughout
settings, database, storage, account, and documentation interfaces.

- **Documentation**
- Clarified guidance for using overflow menus and responsive
split-button actions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/design-system/content/docs/components/button.mdx    | 9 +++++----
 .../registry/default/example/admonition-button-split.tsx | 4 ++--
 .../registry/default/example/button-split-dropdown.tsx   | 8 ++++++--
 .../AccessTokens/Classic/ExperimentalTokenDropdown.tsx   | 2 +-
 .../Account/AccessTokens/Classic/NewTokenButton.tsx      | 2 +-
 .../Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx  | 5 ++++-
 .../CustomEmailTemplateRestrictionAdmonition.tsx         | 4 ++--
 .../ReplicationPipelineStatus.tsx                        | 5 +++--
 .../interfaces/Database/Schemas/SchemaGraph.tsx          | 9 ++++-----
 .../interfaces/LogDrains/OrgAuditLogDrains.tsx           | 6 +++---
 .../QueryInsights/hooks/useQueryInsightsTableColumns.tsx | 5 +++--
 .../General/Infrastructure/RestartServerButton.tsx       | 4 ++--
 .../CreateTable/CreateTableInstructionsDialog.tsx        | 6 ++++--
 apps/studio/components/ui/AiAssistantDropdown.tsx        | 4 ++--
 apps/studio/pages/project/[ref]/settings/log-drains.tsx  | 6 +++---
 .../components/Changelog/ChangelogLlmMarkdownButton.tsx  | 4 ++--
 .../src/form/KeyValueFieldArray/KeyValueFieldArray.tsx   | 8 ++++++--
 17 files changed, 53 insertions(+), 38 deletions(-)

diff --git a/apps/design-system/content/docs/components/button.mdx b/apps/design-system/content/docs/components/button.mdx
index b1369d8174a..fc7c1575839 100644
--- a/apps/design-system/content/docs/components/button.mdx
+++ b/apps/design-system/content/docs/components/button.mdx
@@ -125,17 +125,18 @@ Supports slot behavior with `asChild` prop.
 
 Pair a button with a chevron `DropdownMenu` trigger when there are variations of the same action, or alternative ways to accomplish the same goal. The default or most likely option should be used on the exposed button.
 
-When secondary actions are related but distinct—not alternatives to the primary action—display the primary action as a button and place the rest in an overflow menu instead. See [Table multiple actions](./table#multiple-actions).
+When secondary actions are related but distinct (not alternatives to the primary action) display the primary action as a button and place the rest in an overflow menu instead. See [Table multiple actions](./table#multiple-actions).
 
 <ComponentPreview name="button-split-dropdown" peekCode />
 
-The shared middle border is the tricky part. Do **not** use `border-l-0` on the chevron button — that drops the divider on hover/focus. Instead:
+Ensure the middle border is shared rather than doubled-up. Do not use `border-l-0` on the chevron button as that drops the divider on hover/focus. Instead:
 
-- Primary: `rounded-r-none` and `hover:z-10` so its border stacks above the chevron on hover.
+- Primary action: `rounded-r-none` and `hover:z-10` so its border stacks above the chevron on hover.
 - Chevron trigger: `rounded-l-none`, `shrink-0`, `px-[4px] py-[5px]`, and `-ml-px` to overlap the adjacent border by one pixel.
+- Both: `focus-visible:z-10` so the focus ring stacks above the neighbour, and `focus-visible:rounded-r-sm` / `focus-visible:rounded-l-sm` so the squared-off edge is slightly rounded while the ring is shown.
 - Chevron trigger only: `aria-label` describing the menu (the icon is decorative).
 
-Inside [Admonition](../fragments/admonition#split-button-with-dropdown) actions, also use `flex w-full @lg:w-auto` with `flex-1 @lg:flex-none` on the primary when `layout="responsive"`.
+Inside [Admonition](../fragments/admonition#split-button-with-dropdown) actions when `layout="responsive"`: also use `flex w-full @lg:w-auto` with `flex-1 @lg:flex-none` on the primary action.
 
 ## Accessibility
 
diff --git a/apps/design-system/registry/default/example/admonition-button-split.tsx b/apps/design-system/registry/default/example/admonition-button-split.tsx
index edd0ef32a74..0300ac430f7 100644
--- a/apps/design-system/registry/default/example/admonition-button-split.tsx
+++ b/apps/design-system/registry/default/example/admonition-button-split.tsx
@@ -20,7 +20,7 @@ export default function AdmonitionButtonSplitDemo() {
           <Button
             type="button"
             variant="default"
-            className="flex-1 rounded-r-none px-3 @lg:flex-none hover:z-10"
+            className="flex-1 rounded-r-none px-3 @lg:flex-none hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
           >
             Set up SMTP
           </Button>
@@ -30,7 +30,7 @@ export default function AdmonitionButtonSplitDemo() {
                 type="button"
                 variant="default"
                 aria-label="More email template editing options"
-                className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px"
+                className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
                 icon={<ChevronDown />}
               />
             </DropdownMenuTrigger>
diff --git a/apps/design-system/registry/default/example/button-split-dropdown.tsx b/apps/design-system/registry/default/example/button-split-dropdown.tsx
index 885e1bbebaa..54a1c621c72 100644
--- a/apps/design-system/registry/default/example/button-split-dropdown.tsx
+++ b/apps/design-system/registry/default/example/button-split-dropdown.tsx
@@ -11,7 +11,11 @@ import {
 export default function ButtonSplitDropdownDemo() {
   return (
     <div className="flex w-fit">
-      <Button type="button" variant="default" className="rounded-r-none hover:z-10">
+      <Button
+        type="button"
+        variant="default"
+        className="rounded-r-none hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
+      >
         Primary action
       </Button>
       <DropdownMenu>
@@ -20,7 +24,7 @@ export default function ButtonSplitDropdownDemo() {
             type="button"
             variant="default"
             aria-label="More actions"
-            className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px"
+            className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
             icon={<ChevronDown />}
           />
         </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Classic/ExperimentalTokenDropdown.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Classic/ExperimentalTokenDropdown.tsx
index 04452562840..db886aad67d 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Classic/ExperimentalTokenDropdown.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Classic/ExperimentalTokenDropdown.tsx
@@ -35,7 +35,7 @@ export const ExperimentalTokenDropdown = ({ onCreateToken }: ExperimentalTokenDr
               <Button
                 variant="primary"
                 aria-label="Choose token scope"
-                className="-ml-px rounded-l-none px-[4px] py-[5px] focus-visible:z-10"
+                className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
                 icon={<ChevronDown />}
               />
             </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenButton.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenButton.tsx
index 540840b08b8..a08d8b0d785 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenButton.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenButton.tsx
@@ -16,7 +16,7 @@ export const NewTokenButton = ({ onCreateToken }: NewAccessTokenButtonProps) =>
     <>
       <div className="flex items-center">
         <Button
-          className="rounded-r-none px-3 hover:z-10 focus-visible:z-10"
+          className="rounded-r-none px-3 hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
           onClick={() => setVisible(true)}
         >
           Generate new token
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
index 7caf6a1190d..21fb38c3af0 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
@@ -109,7 +109,10 @@ export const NewScopedTokenSheet = ({ onCreateExperimentalToken }: NewScopedToke
     <Sheet open={isOpen} onOpenChange={handleOpenChange}>
       <div className="flex items-center">
         <SheetTrigger asChild>
-          <Button variant="primary" className="rounded-r-none px-3 hover:z-10 focus-visible:z-10">
+          <Button
+            variant="primary"
+            className="rounded-r-none px-3 hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
+          >
             Generate new token
           </Button>
         </SheetTrigger>
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition.tsx
index 23c6ba82701..f6322debb67 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition.tsx
@@ -28,7 +28,7 @@ export const CustomEmailTemplateRestrictionAdmonition = () => {
           <Button
             asChild
             variant="default"
-            className="flex-1 rounded-r-none px-3 @lg:flex-none hover:z-10 focus-visible:z-10"
+            className="flex-1 rounded-r-none px-3 @lg:flex-none hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
           >
             <Link href={`/project/${projectRef}/auth/smtp`}>Set up SMTP</Link>
           </Button>
@@ -37,7 +37,7 @@ export const CustomEmailTemplateRestrictionAdmonition = () => {
               <Button
                 variant="default"
                 aria-label="More email template editing options"
-                className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10"
+                className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
                 icon={<ChevronDown />}
               />
             </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx
index 866975ddd27..4077877df22 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx
@@ -419,7 +419,7 @@ export const ReplicationPipelineStatus = () => {
                 <Button
                   size="tiny"
                   variant="default"
-                  className="rounded-r-none hover:z-10 focus-visible:z-10"
+                  className="rounded-r-none hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
                   icon={<RotateCcw />}
                   disabled={isAnyRestartInProgress || showDisabledState || isPipelineError}
                   loading={isAnyRestartInProgress}
@@ -434,8 +434,9 @@ export const ReplicationPipelineStatus = () => {
                   <DropdownMenuTrigger asChild>
                     <Button
                       variant="default"
+                      aria-label="More restart options"
                       icon={<ChevronDown />}
-                      className="w-7 rounded-l-none -ml-px focus-visible:z-10"
+                      className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
                       disabled={showDisabledState || isPipelineError}
                     />
                   </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
index 9598732384d..b3fd498eed9 100644
--- a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
+++ b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
@@ -433,7 +433,7 @@ export const SchemaGraph = () => {
                 <div className="flex items-center gap-0">
                   <ButtonTooltip
                     variant="default"
-                    className="rounded-r-none border-r-0"
+                    className="rounded-r-none hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
                     icon={copied ? <Check data-testid="copy-sql-ready" /> : <Copy />}
                     onClick={copyAsSQL}
                     tooltip={{
@@ -458,11 +458,10 @@ export const SchemaGraph = () => {
                       <Button
                         variant="default"
                         size="tiny"
-                        className="rounded-l-none pl-1 pr-0"
+                        aria-label="Export options"
+                        className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
                         icon={<ChevronDown size={12} />}
-                      >
-                        <span className="sr-only">Export options</span>
-                      </Button>
+                      />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end" className="w-44">
                       <DropdownMenuItem
diff --git a/apps/studio/components/interfaces/LogDrains/OrgAuditLogDrains.tsx b/apps/studio/components/interfaces/LogDrains/OrgAuditLogDrains.tsx
index 2ea83e97751..669aab19020 100644
--- a/apps/studio/components/interfaces/LogDrains/OrgAuditLogDrains.tsx
+++ b/apps/studio/components/interfaces/LogDrains/OrgAuditLogDrains.tsx
@@ -157,7 +157,7 @@ export function OrgAuditLogDrains() {
                 disabled={!canManageLogDrains}
                 onClick={handleAddDestinationClick}
                 variant="primary"
-                className="rounded-r-none px-3 hover:z-10 focus-visible:z-10"
+                className="rounded-r-none px-3 hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
               >
                 Add destination
               </Button>
@@ -166,8 +166,8 @@ export function OrgAuditLogDrains() {
               <DropdownMenuTrigger asChild>
                 <Button
                   variant="primary"
-                  title="Choose destination type"
-                  className="-ml-px rounded-l-none px-[4px] py-[5px] focus-visible:z-10"
+                  aria-label="Choose destination type"
+                  className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
                   icon={<ChevronDown />}
                 />
               </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/QueryInsights/hooks/useQueryInsightsTableColumns.tsx b/apps/studio/components/interfaces/QueryInsights/hooks/useQueryInsightsTableColumns.tsx
index cacfee532a1..efe82a0f521 100644
--- a/apps/studio/components/interfaces/QueryInsights/hooks/useQueryInsightsTableColumns.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/hooks/useQueryInsightsTableColumns.tsx
@@ -511,7 +511,7 @@ export function useQueryInsightsTableColumns({
                   <Button
                     variant="primary"
                     size="tiny"
-                    className="rounded-r-none border-r-0 focus-visible:z-10"
+                    className="rounded-r-none hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
                     onClick={() => {
                       setSelectedTriageRow(props.rowIdx)
                       setSheetView('indexes')
@@ -524,7 +524,8 @@ export function useQueryInsightsTableColumns({
                       <Button
                         variant="primary"
                         size="tiny"
-                        className="rounded-l-none px-1 focus-visible:z-10"
+                        aria-label="More index actions"
+                        className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
                         icon={<ChevronDown size={12} />}
                       />
                     </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx b/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
index 28399700880..8eda0ce5e83 100644
--- a/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
+++ b/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
@@ -110,7 +110,7 @@ export const RestartServerButton = () => {
             variant="default"
             className={cn(
               'flex-1 px-3 hover:z-10 focus-visible:z-10 @lg:flex-none',
-              canRestartProject && canRestart ? 'rounded-r-none' : ''
+              canRestartProject && canRestart ? 'rounded-r-none focus-visible:rounded-r-sm' : ''
             )}
             disabled={
               project === undefined ||
@@ -143,7 +143,7 @@ export const RestartServerButton = () => {
                 <Button
                   variant="default"
                   aria-label={`Restart ${entityLabel}`}
-                  className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10"
+                  className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
                   icon={<ChevronDown />}
                   disabled={!canRestartProject}
                 />
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructionsDialog.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructionsDialog.tsx
index 69faefbe298..b9d9e6b60f7 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructionsDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructionsDialog.tsx
@@ -31,7 +31,8 @@ export const CreateTableInstructionsDialog = () => {
           variant="primary"
           icon={<Plus />}
           className={cn(
-            enableCreationOfTablesFromDashboard && 'rounded-r-none hover:z-10 focus-visible:z-10'
+            enableCreationOfTablesFromDashboard &&
+              'rounded-r-none hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm'
           )}
           onClick={() => {
             if (enableCreationOfTablesFromDashboard) setShowSheet(true)
@@ -45,7 +46,8 @@ export const CreateTableInstructionsDialog = () => {
             <DropdownMenuTrigger asChild>
               <Button
                 variant="primary"
-                className="w-7 rounded-l-none -ml-px focus-visible:z-10"
+                aria-label="More table creation options"
+                className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
                 icon={<ChevronDown />}
               />
             </DropdownMenuTrigger>
diff --git a/apps/studio/components/ui/AiAssistantDropdown.tsx b/apps/studio/components/ui/AiAssistantDropdown.tsx
index c62dc113108..a44451dbfdf 100644
--- a/apps/studio/components/ui/AiAssistantDropdown.tsx
+++ b/apps/studio/components/ui/AiAssistantDropdown.tsx
@@ -134,7 +134,7 @@ export function AiAssistantDropdown({
         onClick={handleOpenAssistant}
         icon={<AiIconAnimation size={iconOnly ? 16 : 14} loading={loading} />}
         className={cn(
-          'rounded-r-none border-r-0 focus-visible:z-10',
+          'rounded-r-none hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm',
           iconOnly && 'px-1.5',
           className
         )}
@@ -150,7 +150,7 @@ export function AiAssistantDropdown({
             variant={variant}
             size={size}
             disabled={disabled}
-            className={cn('rounded-l-none px-1 focus-visible:z-10', iconOnly && 'px-1')}
+            className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
             icon={<ChevronDown size={12} />}
           />
         </DropdownMenuTrigger>
diff --git a/apps/studio/pages/project/[ref]/settings/log-drains.tsx b/apps/studio/pages/project/[ref]/settings/log-drains.tsx
index d92f7971b5e..42b784d40df 100644
--- a/apps/studio/pages/project/[ref]/settings/log-drains.tsx
+++ b/apps/studio/pages/project/[ref]/settings/log-drains.tsx
@@ -215,7 +215,7 @@ const LogDrainsSettings: NextPageWithLayout = () => {
                     disabled={!hasAccessToLogDrains || !canManageLogDrains}
                     onClick={handleAddDestinationClick}
                     variant="primary"
-                    className="rounded-r-none px-3 hover:z-10 focus-visible:z-10"
+                    className="rounded-r-none px-3 hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
                   >
                     Add destination
                   </Button>
@@ -224,8 +224,8 @@ const LogDrainsSettings: NextPageWithLayout = () => {
                   <DropdownMenuTrigger asChild>
                     <Button
                       variant="primary"
-                      title="Choose token scope"
-                      className="-ml-px rounded-l-none px-[4px] py-[5px] focus-visible:z-10"
+                      aria-label="Choose destination type"
+                      className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
                       icon={<ChevronDown />}
                     />
                   </DropdownMenuTrigger>
diff --git a/apps/www/components/Changelog/ChangelogLlmMarkdownButton.tsx b/apps/www/components/Changelog/ChangelogLlmMarkdownButton.tsx
index f4b84be6557..2e85c3e4512 100644
--- a/apps/www/components/Changelog/ChangelogLlmMarkdownButton.tsx
+++ b/apps/www/components/Changelog/ChangelogLlmMarkdownButton.tsx
@@ -28,7 +28,7 @@ export function ChangelogLlmMarkdownButton({ className, markdownPath = '/changel
     <div className={cn('flex items-center', className)}>
       <Button
         variant="default"
-        className="rounded-r-none border-r-0"
+        className="rounded-r-none hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
         icon={
           copied ? (
             <Check className="h-4 w-4" strokeWidth={2} aria-hidden />
@@ -45,7 +45,7 @@ export function ChangelogLlmMarkdownButton({ className, markdownPath = '/changel
         <DropdownMenuTrigger asChild>
           <Button
             variant="default"
-            className="rounded-l-none px-1"
+            className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
             icon={<ChevronDown className="h-4 w-4" strokeWidth={2} aria-hidden />}
             aria-label="Open LLM options for this changelog page"
           />
diff --git a/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.tsx b/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.tsx
index c465ec29a04..98f5493efd7 100644
--- a/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.tsx
+++ b/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.tsx
@@ -186,7 +186,11 @@ export const KeyValueFieldArray = <
           icon={<Plus />}
           disabled={disabled}
           onClick={() => append(createEmptyRow())}
-          className={cn(hasAddActions && 'rounded-r-none border-r-0 px-3', addButtonClassName)}
+          className={cn(
+            hasAddActions &&
+              'rounded-r-none px-3 hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm',
+            addButtonClassName
+          )}
         >
           {addLabel}
         </Button>
@@ -201,7 +205,7 @@ export const KeyValueFieldArray = <
                 icon={<ChevronDown size={14} />}
                 aria-label={addActionsLabel}
                 disabled={disabled}
-                className="rounded-l-none px-[4px] py-[5px]"
+                className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
               />
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" side="bottom">