From 2aea2a61f387c4670130bf0e447f57f653a2d3ee Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 23 Oct 2025 15:17:15 -0700
Subject: [PATCH] Lexxy content tweaks

---
 app/assets/stylesheets/card-perma.css        | 1 +
 app/assets/stylesheets/comments.css          | 4 +++-
 app/assets/stylesheets/lexxy.css             | 5 ++++-
 app/assets/stylesheets/rich-text-content.css | 4 ++--
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index d56ce29b3..97ba51d1d 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -30,6 +30,7 @@
 
     .card {
       --card-aspect-ratio: 2 / 0.95;
+      --lexxy-bg-color: var(--card-bg-color);
 
       border: none;
     }
diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index a89842811..0a42d1f3e 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -68,8 +68,10 @@
   .comment__content {
     --btn-icon-size: 1.2rem;
     --btn-size: var(--reaction-size);
+    --comment-bg-color: var(--color-ink-lightest);
+    --lexxy-bg-color: var(--comment-bg-color);
 
-    background-color: var(--color-ink-lightest);
+    background-color: var(--comment-bg-color);
     border-radius: 0.2em;
     padding:
       var(--comment-padding-block)
diff --git a/app/assets/stylesheets/lexxy.css b/app/assets/stylesheets/lexxy.css
index 63f5f1f14..5d0f37dc3 100644
--- a/app/assets/stylesheets/lexxy.css
+++ b/app/assets/stylesheets/lexxy.css
@@ -84,7 +84,7 @@
   lexxy-toolbar {
     --lexxy-toolbar-icon-size: 1em;
 
-    background-color: inherit;
+    background-color: var(--lexxy-bg-color, var(--color-canvas));
     border-block-end: 1px solid var(--color-ink-light);
     color: currentColor;
     display: flex;
@@ -93,6 +93,9 @@
     max-inline-size: 100%;
     padding: 0.2em 0;
     position: relative;
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
 
     dialog {
       background-color: var(--color-canvas);
diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css
index 27f265a03..9832dbc93 100644
--- a/app/assets/stylesheets/rich-text-content.css
+++ b/app/assets/stylesheets/rich-text-content.css
@@ -1,6 +1,6 @@
 @layer components {
   .rich-text-content {
-    --block-margin: 1rem;
+    --block-margin: 0;
 
     :where(h1, h2, h3, h4, h5, h6) {
       display: block;
@@ -40,7 +40,7 @@
       border-inline-start: 0.25em solid var(--color-ink-lighter);
       font-style: italic;
       margin: var(--block-margin) 0;
-      padding: 0.5lh 2ch;
+      padding-inline-start: 2ch;
     }
 
     :where(img, video, embed, object) {