From 3836c666a1a5774f3e4a721a849fe7fa0628ba12 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 10 Dec 2025 14:13:54 -0600 Subject: [PATCH 1/3] Fix Lexxy prompt list padding by lowering rich-text specificity --- app/assets/stylesheets/lexxy.css | 9 ++------- app/assets/stylesheets/rich-text-content.css | 2 +- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/lexxy.css b/app/assets/stylesheets/lexxy.css index f89028f02..17201dbbe 100644 --- a/app/assets/stylesheets/lexxy.css +++ b/app/assets/stylesheets/lexxy.css @@ -288,17 +288,12 @@ font-size: var(--text-small); list-style: none; margin: 0; + max-height: 200px; min-inline-size: var(--lexxy-prompt-min-width); + overflow: auto; padding: var(--lexxy-prompt-padding); visibility: hidden; z-index: var(--z-popup); - - max-height: 200px; - overflow: scroll; - - &:is(.lexxy-prompt-menu--visible) { - padding: var(--lexxy-prompt-padding); - } } .lexxy-prompt-menu--visible { diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index c9877f4bf..1918b04c6 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -1,5 +1,5 @@ @layer components { - .rich-text-content { + :where(.rich-text-content) { --block-margin: 0.5lh; :where(h1, h2, h3, h4, h5, h6) { From 0065408b8d9fa7dcbc4bd53e83c85dbe155cf10c Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 10 Dec 2025 14:24:20 -0600 Subject: [PATCH 2/3] Remove redundant :where() selectors and fix comment padding --- app/assets/stylesheets/comments.css | 5 +- app/assets/stylesheets/lexxy.css | 11 ++++- app/assets/stylesheets/rich-text-content.css | 52 ++++++++++---------- 3 files changed, 39 insertions(+), 29 deletions(-) diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 80968184e..587749fab 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -48,7 +48,6 @@ } .comment__body { - padding-inline-end: var(--reaction-size); text-align: start; .action-text-content { @@ -60,6 +59,10 @@ margin-block-end: 0; } } + + &:not:has(lexxy-editor) { + padding-inline-end: var(--reaction-size); + } } .comment__content { diff --git a/app/assets/stylesheets/lexxy.css b/app/assets/stylesheets/lexxy.css index 17201dbbe..f53e942cd 100644 --- a/app/assets/stylesheets/lexxy.css +++ b/app/assets/stylesheets/lexxy.css @@ -38,7 +38,7 @@ } .lexxy-editor__content { - margin: var(--block-space-half) 0; + margin-block-start: var(--block-space-half); min-block-size: calc(7lh + var(--block-space)); outline: 0; @@ -46,6 +46,10 @@ ::selection { background: oklch(var(--lch-blue-light) / 0.5); } + + > :last-child { + margin-block-end: 0; + } } .lexxy-editor--drag-over { @@ -218,12 +222,15 @@ [data-button-group] { display: flex; flex-direction: row; - flex-wrap: wrap; gap: var(--gap); + & { margin-block-start: var(--gap); } + + @media (max-width: 639px) { + flex-wrap: wrap; + } } } diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index 1918b04c6..202466221 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -2,7 +2,7 @@ :where(.rich-text-content) { --block-margin: 0.5lh; - :where(h1, h2, h3, h4, h5, h6) { + h1, h2, h3, h4, h5, h6 { display: block; font-weight: 800; letter-spacing: -0.02ch; @@ -12,14 +12,14 @@ text-wrap: balance; } - :where(h1) { font-size: 2em; } - :where(h2) { font-size: 1.5em; } - :where(h3) { font-size: 1.17em; } - :where(h4) { font-size: 1em; } - :where(h5) { font-size: 0.83em; } - :where(h6) { font-size: 0.67em; } + h1 { font-size: 2em; } + h2 { font-size: 1.5em; } + h3 { font-size: 1.17em; } + h4 { font-size: 1em; } + h5 { font-size: 0.83em; } + h6 { font-size: 0.67em; } - :where(p, ul, ol, dl, blockquote, figure, .attachment) { + p, ul, ol, dl, blockquote, figure, .attachment { margin-block: 0 var(--block-margin); &:not(lexxy-editor &) { @@ -28,48 +28,53 @@ } } - :where(ol, ul) { + ol, ul { padding-inline-start: 3ch; } - :where(li:has(li)) { + li:has(li) { list-style: none; - :where(ol, ul) { + ol, ul { margin: 0; padding-inline-start: 2ch; } } - :where(b, strong, .lexxy-content__bold) { + b, strong, .lexxy-content__bold { font-weight: 700; } - :where(i, em, .lexxy-content__italic) { + i, em, .lexxy-content__italic { font-style: italic; } - :where(s, .lexxy-content__strikethrough) { + s, .lexxy-content__strikethrough { text-decoration: line-through; } - :where(mark, .lexxy-content__highlight) { + mark, .lexxy-content__highlight { background-color: transparent; color: inherit; } - :where(p, blockquote) { + p, blockquote { letter-spacing: -0.005ch; } - :where(blockquote) { + /* Avoid extra space due to empty paragraphs */ + p:empty { + display: none; + } + + blockquote { border-inline-start: 0.25em solid var(--color-ink-lighter); font-style: italic; margin: var(--block-margin) 0; padding-inline-start: 2ch; } - :where(img, video, embed, object) { + img, video, embed, object { inline-size: auto; margin-inline: auto; max-block-size: 32rem; @@ -82,12 +87,7 @@ inline-size: fit-content; } - /* Avoid extra space due to empty paragraphs */ - p:empty { - display: none; - } - - :where(hr) { + hr { color: currentColor; block-size: 0; border: none; @@ -102,7 +102,7 @@ } /* Code */ - :where(code, pre) { + code, pre { background-color: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-radius: 0.3em; @@ -208,7 +208,7 @@ position: relative; max-inline-size: 100%; - :where(progress) { + progress { inline-size: 100%; margin: auto; } From 9649880b62a2344487c443e607e9646b4ccfa3f9 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Fri, 12 Dec 2025 11:03:26 -0600 Subject: [PATCH 3/3] Ensure images and videos are centered --- app/assets/stylesheets/rich-text-content.css | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index 2d66de178..5a63f9eac 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -86,6 +86,7 @@ a:has(img), a:has(video) { inline-size: fit-content; + margin-inline: auto; } hr {