From 452a6dc6d00d7ce31beced70b40e2175abfe3c7b Mon Sep 17 00:00:00 2001 From: Huzaifa Al Mesbah Date: Sat, 19 Sep 2026 00:27:19 +0600 Subject: [PATCH 1/2] Improve sidebar validation issue layout and text wrapping --- src/editor/framework/style.scss | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/editor/framework/style.scss b/src/editor/framework/style.scss index 29c681e..b5a0585 100644 --- a/src/editor/framework/style.scss +++ b/src/editor/framework/style.scss @@ -34,18 +34,36 @@ gap: 8px; flex-wrap: wrap; height: auto !important; + white-space: normal; + border-radius: 2px; + + svg { + flex-shrink: 0; + margin-top: 1px; + } } &__message { - flex: 1 1 auto; + flex: 1 1 calc(100% - 32px); + min-width: 0; font-weight: 500; + color: #1e1e1e; + line-height: 1.4; + white-space: normal; + overflow-wrap: break-word; } &__meta { - flex: 0 0 100%; - font-size: 12px; - color: #757575; + flex: 0 0 auto; + margin-left: 32px; + font-size: 11px; + color: #646970; + background: #f0f0f1; + padding: 1px 6px; + border-radius: 2px; font-family: monospace; + line-height: 1.4; + overflow-wrap: break-word; } &--error .validation-issue__button svg { From 2db4324577de5a82ee3e0bdd7a6770a8f87cffb3 Mon Sep 17 00:00:00 2001 From: Huzaifa Al Mesbah Date: Fri, 9 Oct 2026 10:33:08 +0600 Subject: [PATCH 2/2] Keep issue tag at 12px and restore hover feedback Shrinking the tag to 11px monospace reduced readability. Forcing the message colour also removed the button's hover colour change, so set the dark text colour on the button and switch to the admin theme colour on hover and keyboard focus. --- src/editor/framework/style.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/editor/framework/style.scss b/src/editor/framework/style.scss index b5a0585..f932b15 100644 --- a/src/editor/framework/style.scss +++ b/src/editor/framework/style.scss @@ -36,18 +36,23 @@ height: auto !important; white-space: normal; border-radius: 2px; + color: #1e1e1e; svg { flex-shrink: 0; margin-top: 1px; } + + &:focus-visible, + &:hover:not(:disabled) { + color: var(--wp-admin-theme-color, #3858e9); + } } &__message { flex: 1 1 calc(100% - 32px); min-width: 0; font-weight: 500; - color: #1e1e1e; line-height: 1.4; white-space: normal; overflow-wrap: break-word; @@ -56,7 +61,7 @@ &__meta { flex: 0 0 auto; margin-left: 32px; - font-size: 11px; + font-size: 12px; color: #646970; background: #f0f0f1; padding: 1px 6px;