Merge pull request #2063 from basecamp/lexxy-prompt-padding

Fix Lexxy prompt list padding by lowering rich-text specificity

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 {

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 {
@@ -227,12 +231,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;
+      }
     }
   }
 
@@ -297,17 +304,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 {

app/assets/stylesheets/rich-text-content.css

@@ -1,8 +1,8 @@
 @layer components {
-  .rich-text-content {
+  :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,49 +28,54 @@
       }
     }
 
-    :where(ol, ul) {
+    ol, ul {
       list-style: disc;
       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;
@@ -81,14 +86,10 @@
     a:has(img),
     a:has(video) {
       inline-size: fit-content;
+      margin-inline: auto;
     }
 
-    /* Avoid extra space due to empty paragraphs */
-    p:empty {
-      display: none;
-    }
-
-    :where(hr) {
+    hr {
       color: currentColor;
       block-size: 0;
       border: none;
@@ -103,7 +104,7 @@
     }
 
     /* Code */
-    :where(code, pre) {
+    code, pre {
       background-color: var(--color-canvas);
       border: 1px solid var(--color-ink-lighter);
       border-radius: 0.3em;
@@ -209,7 +210,7 @@
     position: relative;
     max-inline-size: 100%;
 
-    :where(progress) {
+    progress {
       inline-size: 100%;
       margin: auto;
     }