Rework main layout, comments layout, and list layout

app/assets/stylesheets/bubbles.css

@@ -263,6 +263,8 @@
 .bubbles-list {
   --hover-size: 0;
 
+  max-inline-size: 90ch;
+
   .bubble__title-link {
     color: var(--color-txt);
     text-decoration: none;

app/assets/stylesheets/comments.css

@@ -1,37 +1,17 @@
-.comment {
-  margin-inline-end: calc(var(--block-space) * 1.5);
-  padding:
-      calc(var(--block-space) * 1.5)
-      calc(var(--inline-space) * 2)
-      calc(var(--block-space) * 2)
-      var(--inline-space);
+.comments {
+  --avatar-size: 2.33em;
 
-  &:target {
-    background-color: var(--color-selected);
-  }
+  max-inline-size: 90ch;
+}
 
-  .avatar {
-    margin-block-start: -0.5em;
-    margin-inline-start: calc(-2.65em + var(--inline-space));
-  }
+.comment__avatar {
+  margin-block-start: var(--block-space-half);
+  margin-inline: auto calc(var(--block-space) * -0.5);
+  position: relative;
+  z-index: 1;
 
-  &:is(.comment--mine) {
-    background-color: var(--color-selected);
-    flex-direction: row-reverse;
-    margin-inline: calc(var(--block-space) * 1.5) auto;
-    padding:
-        calc(var(--block-space) * 1.5)
-        var(--inline-space)
-        calc(var(--block-space) * 2)
-        calc(var(--inline-space) * 2);
-
-    .avatar {
-      margin-inline: auto calc(-2.65em + var(--inline-space));
-    }
-
-    .comment__author {
-      flex-direction: row-reverse;
-    }
+  .comment--mine & {
+    margin-inline: calc(var(--block-space) * -0.5) auto;
   }
 }
 
@@ -47,13 +27,34 @@
   }
 }
 
-.boost {
-  margin-block: calc(var(--block-space) * -2);
-  padding: var(--block-space) var(--block-space-double);
-  z-index: 1;
+.comment__content {
+  margin-inline: 0 var(--avatar-size);
+  padding: var(--block-space);
 
-  + .boost,
-  &:has( + .boost) {
-    margin-block: 0;
+  .comment--mine & {
+    background-color: var(--color-selected);
+    margin-inline: var(--avatar-size) 0;
+  }
+
+  .comment:has(+ .comment--upvotes) & {
+    padding-block-end: calc(var(--block-space) * 1.33);
   }
 }
+
+.comment--mine {
+  flex-direction: row-reverse;
+
+  .comment__author {
+    flex-direction: row-reverse;
+  }
+}
+
+.comment__timestamp {
+  color: var(--color-ink);
+  opacity: 0.5;
+}
+
+.comment--upvotes{
+  margin-block: calc(var(--block-space) * -1.33);
+  padding: var(--block-space-half) var(--inline-space-double);
+}

app/assets/stylesheets/layout.css

@@ -8,11 +8,11 @@ body {
   margin-inline: auto;
   max-inline-size: 100vw;
   padding-block-end: clamp(var(--block-space), 5%, calc(var(--block-space) * 3));
-  padding-inline: clamp(var(--inline-space), 5%, calc(var(--inline-space) * 3));
+  padding-inline: clamp(var(--inline-space), 10%, calc(var(--inline-space) * 3));
   text-align: center;
 
   @media (max-width: 70ch) {
-    padding-inline: var(--inline-space);
+    padding-inline: calc(var(--inline-space) * 2);
   }
 
   @media print {

app/views/bubbles/show.html.erb

@@ -24,7 +24,7 @@
   <%= render @bubble %>
 </div>
 
-<section class="comments align-center panel center borderless margin-block flex flex-wrap gap-half" style="--bubble-color: <%= @bubble.color %>;">
+<section class="comments align-center center borderless margin flex flex-column gap-half" style="--bubble-color: <%= @bubble.color %>;">
   <% comments = (@bubble.comments + @bubble.boosts).sort_by(&:updated_at) %>
   <% boosts = [] %>
 
@@ -33,7 +33,7 @@
       <% boosts << comment %>
       <% if comments[index + 1].nil? || !comments[index + 1].is_a?(Boost) %>
         <% user_boosts = boosts.group_by(&:creator).transform_values(&:count) %>
-        <div class="boost flex-inline align-start gap fill-white border-radius center position-relative">
+        <div class="comment--upvotes flex-inline align-start gap fill-white border-radius center position-relative">
           <%= user_boosts.map { |user, count| "#{user.name} +#{count}" }.to_sentence %>
         </div>
         <% boosts.clear %>

app/views/comments/_comment.html.erb

@@ -1,10 +1,11 @@
-<div class="comment flex align-start gap fill-shade border-radius full-width <%= "comment--mine" if comment.creator == Current.user %>" id="<%= dom_id(comment) %>">
-  <span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= comment.creator.initials %></strong></span>
-  <div class="flex flex-column full-width">
+<div class="comment flex align-start full-width <%= "comment--mine" if comment.creator == Current.user %>" id="<%= dom_id(comment) %>">
+  <figure class="comment__avatar avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= comment.creator.initials %></strong></figure>
+
+  <div class="comment__content flex flex-column full-width fill-shade border-radius">
     <div class="comment__author flex align-center gap-half">
       <strong><%= comment.creator.name %></strong>
       <%= link_to bubble_path(@bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %>
-        <time class="txt-subtle"><%= comment.created_at.strftime("%b %d").html_safe %></time>
+        <time class="comment__timestamp"><%= comment.created_at.strftime("%b %d").html_safe %></time>
       <% end %>
     </div>
     <div class="comment__body txt-align-start">

app/views/comments/_new.html.erb

@@ -1,10 +1,11 @@
-<div class="comment flex align-start gap fill-shade border-radius full-width comment--mine">
-  <span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= Current.user.initials %></strong></span>
-  <div class="flex flex-column full-width gap-half">
+<div class="comment flex align-start full-width comment--mine">
+  <figure class="comment__avatar avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= Current.user.initials %></strong></figure>
+
+  <div class="comment__content flex flex-column full-width fill-shade border-radius">
     <div class="comment__author flex align-center gap-half">
       <strong><%= Current.user.name %></strong>
     </div>
-    <div class="comment__body txt-align-start">
+    <div class="comment__body txt-align-start margin-block-start-half">
       <%= form_with model: Comment.new, url: bubble_comments_path(@bubble), class: "flex flex-column gap full-width" do | form | %>
         <%= form.text_area :body, class: "input", required: true, rows: 4,
               placeholder: (@bubble.comments.empty? && @bubble.creator == Current.user) ? "Add some notes…" : "Type your comment…" %>

app/views/sessions/new.html.erb

@@ -1,6 +1,6 @@
 <% @page_title = "Sign in" %>
 
-<div class="panel shadow center margin-block-double <%= "shake" if flash[:alert] %>" style="--panel-size: 40ch;">
+<div class="panel shadow center margin-block-double <%= "shake" if flash[:alert] %>">
   <%#= image_tag "blob.svg", class: "product__logo center colorize--black", size: 130 %>
   <div class="bubble center" style="--bubble-color: #000; --bubble-rotate: -75deg; --bubble-size: 12cqi;">
     <svg class="bubble__svg" style="stroke-width: 2rem;" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h990v990h-990z" fill="none" stroke="none" /><path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/></svg>