From e2fb98e63c848b04f1b6bb022359d0ab435f32c5 Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Wed, 9 Sep 2026 11:26:12 +0800
Subject: [PATCH 1/2] fix: keep Premium Analytics dialog focus rings from being
 clipped

---
 .../changelog/fix-pa-dialog-focus-ring-clipping        |  4 ++++
 .../components/feedback/feedback-modal.module.scss     |  6 ------
 .../dashboard/components/feedback/feedback-modal.tsx   |  3 +--
 .../routes/dashboard/overlay-focus-ring.scss           | 10 ++++++++++
 .../premium-analytics/routes/dashboard/stage.tsx       |  1 +
 5 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 projects/packages/premium-analytics/changelog/fix-pa-dialog-focus-ring-clipping
 delete mode 100644 projects/packages/premium-analytics/routes/dashboard/components/feedback/feedback-modal.module.scss
 create mode 100644 projects/packages/premium-analytics/routes/dashboard/overlay-focus-ring.scss

diff --git a/projects/packages/premium-analytics/changelog/fix-pa-dialog-focus-ring-clipping b/projects/packages/premium-analytics/changelog/fix-pa-dialog-focus-ring-clipping
new file mode 100644
index 000000000000..505cdd9ef03f
--- /dev/null
+++ b/projects/packages/premium-analytics/changelog/fix-pa-dialog-focus-ring-clipping
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Dialogs: keep the comment field's focus ring from being clipped by the dialog footer.
diff --git a/projects/packages/premium-analytics/routes/dashboard/components/feedback/feedback-modal.module.scss b/projects/packages/premium-analytics/routes/dashboard/components/feedback/feedback-modal.module.scss
deleted file mode 100644
index 9ff658789074..000000000000
--- a/projects/packages/premium-analytics/routes/dashboard/components/feedback/feedback-modal.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// TODO: drop when @wordpress/ui fixes this upstream. `Dialog.Content` loses its
-// bottom padding under a `Dialog.Footer` and also scrolls, clipping the last
-// field's focus outline; this gives back the outline's offset plus its width.
-.body {
-	padding-block-end: calc(var(--wpds-border-width-focus) * 2);
-}
diff --git a/projects/packages/premium-analytics/routes/dashboard/components/feedback/feedback-modal.tsx b/projects/packages/premium-analytics/routes/dashboard/components/feedback/feedback-modal.tsx
index e2c14a482bad..f10b182b6048 100644
--- a/projects/packages/premium-analytics/routes/dashboard/components/feedback/feedback-modal.tsx
+++ b/projects/packages/premium-analytics/routes/dashboard/components/feedback/feedback-modal.tsx
@@ -10,7 +10,6 @@ import { __ } from '@wordpress/i18n';
  */
 import { useTrackEvent } from '../../hooks/use-track-event';
 import { FeedbackFields } from './feedback-fields';
-import styles from './feedback-modal.module.scss';
 
 // Reaches Happiness as the subject line of the feedback email ("Feedback received
 // from …"), so it has to name the surface without any further context.
@@ -101,7 +100,7 @@ export function FeedbackModal( { onClose }: FeedbackModalProps ) {
 				) : (
 					<>
 						<Dialog.Content>
-							<Stack className={ styles.body } direction="column" gap="xl">
+							<Stack direction="column" gap="xl">
 								<FeedbackFields
 									rating={ rating }
 									onRatingChange={ setRating }
diff --git a/projects/packages/premium-analytics/routes/dashboard/overlay-focus-ring.scss b/projects/packages/premium-analytics/routes/dashboard/overlay-focus-ring.scss
new file mode 100644
index 000000000000..ef63f13bae12
--- /dev/null
+++ b/projects/packages/premium-analytics/routes/dashboard/overlay-focus-ring.scss
@@ -0,0 +1,10 @@
+// Pinned chrome zeroes the scroll container's block padding on that edge,
+// clipping a focus ring, which sits twice the focus width outside its control.
+// Drop when @wordpress/ui ships https://github.com/WordPress/gutenberg/pull/82443.
+header ~ [data-wp-ui-overlay-scroll-container] {
+	padding-block-start: calc(var(--wpds-border-width-focus) * 2);
+}
+
+[data-wp-ui-overlay-scroll-container]:has(~ footer) {
+	padding-block-end: calc(var(--wpds-border-width-focus) * 2);
+}
diff --git a/projects/packages/premium-analytics/routes/dashboard/stage.tsx b/projects/packages/premium-analytics/routes/dashboard/stage.tsx
index 21187aefe3be..a93802d4b011 100644
--- a/projects/packages/premium-analytics/routes/dashboard/stage.tsx
+++ b/projects/packages/premium-analytics/routes/dashboard/stage.tsx
@@ -49,6 +49,7 @@ import {
 	useOnboarding,
 	useSectionDateFilter,
 } from './hooks';
+import './overlay-focus-ring.scss';
 import styles from './stage.module.scss';
 import type { DateRange, YearSurfacePresetId } from '@jetpack-premium-analytics/datetime';
 

From 02976a4bbac412b2daa809c92345d1e0d47343d8 Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Wed, 9 Sep 2026 14:49:23 +0800
Subject: [PATCH 2/2] fix: mirror the upstream chrome padding so dialog gaps
 match trunk

---
 .../routes/dashboard/overlay-focus-ring.scss           | 10 ++++++++++
 .../changelog/fix-pa-dialog-focus-ring-clipping        |  4 ++++
 .../changelog/fix-pa-dialog-focus-ring-clipping        |  4 ++++
 3 files changed, 18 insertions(+)
 create mode 100644 projects/plugins/jetpack/changelog/fix-pa-dialog-focus-ring-clipping
 create mode 100644 projects/plugins/premium-analytics/changelog/fix-pa-dialog-focus-ring-clipping

diff --git a/projects/packages/premium-analytics/routes/dashboard/overlay-focus-ring.scss b/projects/packages/premium-analytics/routes/dashboard/overlay-focus-ring.scss
index ef63f13bae12..5a1855ee6106 100644
--- a/projects/packages/premium-analytics/routes/dashboard/overlay-focus-ring.scss
+++ b/projects/packages/premium-analytics/routes/dashboard/overlay-focus-ring.scss
@@ -8,3 +8,13 @@ header ~ [data-wp-ui-overlay-scroll-container] {
 [data-wp-ui-overlay-scroll-container]:has(~ footer) {
 	padding-block-end: calc(var(--wpds-border-width-focus) * 2);
 }
+
+// The chrome gives that clearance back, so the gap matches trunk. `- 1px` is
+// the separator slot; an unlayered rule cannot read the layered value.
+header:has(~ [data-wp-ui-overlay-scroll-container]) {
+	padding-block-end: calc(var(--wpds-dimension-gap-lg) - 1px - var(--wpds-border-width-focus) * 2);
+}
+
+[data-wp-ui-overlay-scroll-container] ~ footer {
+	padding-block-start: calc(var(--wpds-dimension-gap-lg) - 1px - var(--wpds-border-width-focus) * 2);
+}
diff --git a/projects/plugins/jetpack/changelog/fix-pa-dialog-focus-ring-clipping b/projects/plugins/jetpack/changelog/fix-pa-dialog-focus-ring-clipping
new file mode 100644
index 000000000000..ac6f8f27060a
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/fix-pa-dialog-focus-ring-clipping
@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Premium Analytics: keep the dialog focus ring from being clipped by the dialog footer.
diff --git a/projects/plugins/premium-analytics/changelog/fix-pa-dialog-focus-ring-clipping b/projects/plugins/premium-analytics/changelog/fix-pa-dialog-focus-ring-clipping
new file mode 100644
index 000000000000..0e24c2afef5d
--- /dev/null
+++ b/projects/plugins/premium-analytics/changelog/fix-pa-dialog-focus-ring-clipping
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Dialogs: keep the focus ring from being clipped by the dialog footer.