diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index aefcb864b..a77fb96a4 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -6,12 +6,14 @@ figure.node--selected { &:not(:has(img)) { - box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color); + outline: var(--focus-ring-size) solid var(--focus-ring-color); + outline-offset: var(--focus-ring-offset); } &:has(img) { img { - box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color); + outline: var(--focus-ring-size) solid var(--focus-ring-color); + outline-offset: var(--focus-ring-offset); } } } diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index 396e56db1..70f7c9d56 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -43,6 +43,7 @@ } :where(img, video, embed, object) { + inline-size: auto; margin-inline: auto; max-block-size: 32rem; object-fit: contain; @@ -202,6 +203,10 @@ max-inline-size: 100%; text-align: center; + &:focus { + --focus-ring-size: 0; + } + @supports (field-sizing: content) { field-sizing: content; inline-size: auto;