rendered_markdown: Adjust content blocks for link focus ring.

web/styles/app_variables.css

@@ -414,6 +414,14 @@
     /*
     Message box elements and values.
     */
+    /* At very tight line-heights, the focus ring on
+       links can get cut off on paragraphs and list
+       items that open the senderless message area.
+       This padding fixes the cut-off problem, and
+       can be used to adjust padding elsewhere in the
+       message area as needed.
+       2px at 20px/1em */
+    --message-box-link-focus-ring-block-padding: 0.1em;
     /* 35px at 14px/1em */
     --message-box-avatar-width: 2.5em;
     --message-box-avatar-height: var(--message-box-avatar-width);

web/styles/message_row.css

@@ -381,6 +381,16 @@
             grid-area: message;
         }
 
+        /* For the sake of paragraphs and lists that include
+           links, we adjust the vertical space here to keep
+           it uniform. */
+        .message_content:has(p:first-child, ol:first-child, ul:first-child) {
+            padding-top: calc(
+                var(--message-box-markdown-aligned-vertical-space) -
+                    var(--message-box-link-focus-ring-block-padding)
+            );
+        }
+
         .slow-send-spinner {
             align-self: center;
             position: unset;

web/styles/rendered_markdown.css

@@ -20,6 +20,15 @@
         margin-inline-start: 3.5ch;
     }
 
+    /* To avoid cutting off the focus ring on links, we set
+       padding on first children most likely to take links.
+       We account for this extra space on `.message_content`. */
+    & p:first-child,
+    & ul:first-child,
+    & ol:first-child {
+        padding-top: var(--message-box-link-focus-ring-block-padding);
+    }
+
     /* We set margin according to the length of the longest list counter. */
     .counter-length-1 {
         margin-inline-start: 2.5ch;