From 06d3647b94744581c9f12478326a07a1511d7ceb Mon Sep 17 00:00:00 2001 From: Alexey Kuzmin Date: Mon, 27 Jul 2026 08:05:44 +0300 Subject: [PATCH] fix(css): keep footer button focus ring inside dialog bounds fix(css): keep footer button focus ring inside dialog bounds The Obsidian :focus-visible focus ring (a ~3px box-shadow rendered outside the button) on the footer CTA button was overflowing the dialog frame: the button rows place buttons flush against the right and bottom edges, and .diffzip-sync-progress-dialog additionally clips overflow via overflow-x: hidden, so the ring was either cut off or drawn outside the modal. Add 3px right/bottom padding to the button containers so the focus ring has room to render fully inside the dialog: - .diffzip-sync-footer (selective apply / restore dialogs) - .diffzip-sync-progress-buttons (sync progress dialog) No layout or visual changes beyond the focus state. --- styles.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/styles.css b/styles.css index 48a7948..6a21260 100644 --- a/styles.css +++ b/styles.css @@ -140,6 +140,9 @@ gap: 0.5em; border-top: 1px solid var(--background-modifier-border); padding-top: 0.75em; + /* Room for the button focus ring so it stays inside the dialog */ + padding-right: 3px; + padding-bottom: 3px; } .diffzip-restore-controls { @@ -240,6 +243,9 @@ .diffzip-sync-progress-buttons { display: flex; justify-content: flex-end; + /* Room for the button focus ring so it stays inside the dialog */ + padding-right: 3px; + padding-bottom: 3px; } /* Generic progress fragment */