Comments, list and font improvements

app/assets/stylesheets/base.css

@@ -12,11 +12,16 @@ html, body {
   background: var(--color-bg);
   color: var(--color-ink);
   font-family: var(--font-sans);
+  font-size: var(--text-normal);
   line-height: 1.4;
   overflow: unset;
   scroll-behavior: auto;
   text-rendering: optimizeLegibility;
   text-size-adjust: none;
+
+  @media (min-width: 100ch) {
+    font-size: var(--text-medium);
+  }
 }
 
 a:not([class]) {

app/assets/stylesheets/bubbles.css

@@ -266,7 +266,11 @@
   --divider-offset: 1.2em;
   --hover-size: 0;
 
-  margin-inline: var(--tray-size);
+  margin-inline: auto;
+
+  @media (min-width: 150ch) {
+    margin-inline: var(--tray-size);
+  }
 
   .bubble {
     order: 0;

app/assets/stylesheets/comments.css

@@ -1,17 +1,22 @@
 .comments {
   --avatar-size: 2.33em;
-  --comment-padding-block: 0.33lh;
-  --comment-padding-inline: 2ch;
+  --comment-padding-block: var(--block-space);
+  --comment-padding-inline: var(--inline-space-double);
 
   display: flex;
   flex-direction: column;
-  gap: var(--comment-padding-block);
-  margin-inline: var(--tray-size);
+  padding-inline: var(--inline-space);
+  place-items: center;
+  text-align: center;
+
+  @media (min-width: 150ch) {
+    padding-inline: calc(var(--tray-size) + var(--inline-space) * 1.5);
+  }
 }
 
 .comment {
-  margin-block: calc(var(--comment-padding-block) * 0.3);
-  margin-inline: 0 auto;
+  margin-inline: auto;
+  max-inline-size: 80ch;
   position: relative;
 }
 
@@ -20,20 +25,14 @@
   house-md-toolbar {
     border-block-end: 1px solid var(--color-subtle-dark);
   }
-  
-  house-md {
-    border-block: 1px solid var(--color-subtle-dark);
-    border-radius: 0;
-  }
 }
 
 .comment__avatar {
-  margin-block-start: calc(var(--comment-padding-block) * 0.5);
-  margin-inline: auto calc(var(--comment-padding-inline) * -0.75);
+  margin: calc(var(--comment-padding-block) * 0.5) calc(var(--comment-padding-inline) * -0.75);
   z-index: 0;
 
   .comment--mine_ & {
-    margin-inline: calc(var(--comment-padding-inline) * -0.75) auto;
+    margin-inline: calc(var(--comment-padding-inline) * -0.75);
   }
 }
 
@@ -58,12 +57,12 @@
 }
 
 .comment__content {
-  margin-inline: auto 0 auto var(--avatar-size);
-  max-inline-size: 100%;
+  background-color: var(--color-subtle-light);
+  border-radius: 0.2em;
   padding: var(--comment-padding-block) var(--comment-padding-inline);
   
   .comment--mine_ & {
-    margin-inline: var(--avatar-size) auto;
+    margin-inline: 0 calc(var(--comment-padding-inline) * 2);
   }
 }
 
@@ -90,9 +89,9 @@
   }
 }
 
-.comment__author {
-  border-block-end: 1px solid var(--color-subtle-dark);
-  margin-block-end: 0.3lh;
+.comments__subscribers {
+  max-inline-size: 80ch;
+  padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double));
 }
 
 .comment__timestamp {
@@ -100,6 +99,11 @@
 }
 
 .event-summary {
-  padding-inline-start: 3rem;
-  text-align: start;
+  max-inline-size: 80ch;
+
+  &::before{
+    content: "";
+    display: flex;
+    inline-size: calc(var(--comment-padding-inline) * 0.75);
+  }
 }

app/assets/stylesheets/layout.css

@@ -1,11 +1,9 @@
 body {
   display: grid;
   grid-template-rows: auto 1fr auto 9em;
-  overflow-x: hidden;
 }
 
 :where(#main) {
-  container-type: normal;
   inline-size: 100dvw;
   margin-inline: auto;
   max-inline-size: 100dvw;

app/assets/stylesheets/utilities.css

@@ -11,8 +11,8 @@
   --text-xx-small: 0.6rem;
   --text-x-small: 0.7rem;
   --text-small: 0.8rem;
-  --txt-normal: 1rem;
-  --text-medium: 1.2rem;
+  --text-normal: 1rem;
+  --text-medium: 1.1rem;
   --text-large: 1.5rem;
   --text-x-large: 1.8rem;
   --text-xx-large: 2.4rem;
@@ -22,6 +22,7 @@
 .txt-xx-small { font-size: var(--text-xx-small); }
 .txt-x-small { font-size: var(--text-x-small); }
 .txt-small { font-size: var(--text-small); }
+.txt-normal { font-size: var(--text-normal); }
 .txt-medium { font-size: var(--text-medium); }
 .txt-large { font-size: var(--text-large); }
 .txt-x-large { font-size: var(--text-x-large); }

app/helpers/comments_helper.rb

@@ -1,6 +1,6 @@
 module CommentsHelper
   def comment_tag(comment, &)
-    tag.div id: dom_id(comment), class: "comment flex-inline align-start full-width",
+    tag.div id: dom_id(comment), class: "comment flex align-start full-width",
       data: { creator_id: comment.creator_id, created_by_current_user_target: "creation" }, &
   end
 

app/helpers/messages_helper.rb

@@ -1,7 +1,7 @@
 module MessagesHelper
   def messages_tag(bubble, &)
     turbo_frame_tag dom_id(bubble, :messages),
-      class: "comments borderless gap-half",
+      class: "comments gap center",
       style: "--bubble-color: <%= bubble.color %>",
       role: "group", aria: { label: "Messages" },
       data: {

app/views/bubbles/_messages.html.erb

@@ -3,10 +3,10 @@
   <%# Template Dependency: event_summaries/event_summary %>
   <%= render bubble.messages, cached: true %>
   <%= render "comments/new", bubble: bubble, cached: true %>
-  <div class="flex flex-column margin-block-start-double txt-align-start" style="margin-inline-start: calc(var(--avatar-size) + var(--inline-space));">
+  <div class="comments__subscribers flex flex-column margin-block-double txt-align-start full-width">
     <strong class="txt-uppercase">Subscribers</strong>
     <p class="margin-none-block-start margin-block-end-half"><%= pluralize(@bubble.watchers.count, "person") %> will be notified when someone comments on this.</p>
-    <div class="flex align-center flex-wrap gap-half max-width"  style="font-size: 0.8em;">
+    <div class="flex align-center flex-wrap gap-half max-width txt-normal">
       <%= render partial: "bubbles/watches/watcher", collection: @bubble.watchers.sorted_with_user_first(Current.user) %>
     </div>
   </div>

app/views/bubbles/list/_bubble.html.erb

@@ -61,7 +61,7 @@
       <% end %>
 
       <% if bubble.stage %>
-        <strong class="border txt-tight-lines txt-uppercase txt-xx-small" style="--border-color: currentColor; padding: 0.1em 0.4em;">
+        <strong class="border txt-tight-lines txt-uppercase txt-xx-small txt-nowrap" style="--border-color: currentColor; padding: 0.1em 0.4em;">
           <%= bubble&.stage&.name %>
         </strong>
       <% end %>

app/views/comments/_body.html.erb

@@ -1,6 +1,6 @@
 <% cache comment do %>
   <%= turbo_frame_tag dom_id(comment) do %>
-    <div class="comment__content flex-inline flex-column full-width">
+    <div class="comment__content flex flex-column flex-item-grow full-width">
       <div class="comment__author flex align-center gap-half">
         <strong><%= link_to comment.creator.name, user_path(comment.creator), class: "txt-ink btn btn--plain fill-transparent", data: { turbo_frame: "_top" } %></strong>
         <%= link_to bucket_bubble_path(comment.bubble.bucket, comment.bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated txt-uppercase" do %>
@@ -8,7 +8,7 @@
         <% end %>
 
         <%= link_to edit_bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment), 
-            class: "btn txt-small btn--plain fill-transparent comment__edit flex-item-justify-end", 
+            class: "btn txt-small btn--plain fill-transparent comment__edit flex-item-justify-start", 
             style: "font-size: 0.4em; opacity: 0.5;" do %>
           <%= image_tag "menu-dots-horizontal.svg", class: "icon colorize--black" %>
           <span class="for-screen-reader">Edit</span>

app/views/event_summaries/_event_summary.html.erb

@@ -1,9 +1,6 @@
 <% unless event_summary.body.blank? %>
-  <div class="event-summary comment__content flex flex-column justify-start txt-tight-lines">
-    <div class="comment__author flex align-center gap-half">
-      <span class="comment__timestamp txt-uppercase"><%= local_datetime_tag event_summary.created_at, style: :shortdate %></span>
-    </div>
-    <div class="flex flex-wrap" data-controller="event-summary">
+  <div class="event-summary comment flex full-width">
+    <div class="comment__content txt-tight-lines full-width" data-controller="event-summary">
       <%= event_summary.body %>
     </div>
   </div>