Smaller tray cards

app/assets/stylesheets/pins.css

@@ -16,15 +16,15 @@
 .pin__bucket {
   background-color: var(--bubble-color);
   font-weight: 800;
-  letter-spacing: 0.5ch;
-  padding: 0.3em 0.9em 0.3em 1em;
+  letter-spacing: 0.3ch;
+  padding: 0.3em 0.3em 0.3em 0.85em;
 }
 
 .pin__content {
   --border-color: transparent;
   --border-radius: 0.3em;
 
-  padding: 1em 1em 1.2em;
+  padding: 0.85em 0.85em 1em;
 
   @media (prefers-color-scheme: dark) {
     --border-color: var(--color-subtle-dark);
@@ -32,8 +32,8 @@
 }
 
 .pin__header {
-  margin: -1em -1em auto;
-  padding: 0 0.3em 0 0;
+  margin: -0.85em -0.85em auto;
+  padding: 0 0.2em 0 0;
 }
 
 .pin__stage {

app/assets/stylesheets/trays.css

@@ -1,6 +1,6 @@
 .tray {
-  --size: 38ch;
-  --height: calc(5ch + 1lh + var(--block-space));
+  --size: 30ch;
+  --height: calc(2.81lh + var(--block-space));
 
   block-size: var(--height);
   inline-size: var(--size);
@@ -87,7 +87,7 @@
 }
 
 .tray__item-meta {
-  font-size: 0.9em;
+  font-size: var(--text-small);
   font-weight: 500;
 }
 

app/assets/stylesheets/utilities.css

@@ -8,6 +8,7 @@
   --block-space-double: calc(var(--block-space) * 2);
 
   /* Text sizes */
+  --text-xx-small: 0.6rem;
   --text-x-small: 0.7rem;
   --text-small: 0.8rem;
   --txt-normal: 1rem;
@@ -18,6 +19,7 @@
 }
 
 /* Text */
+.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-medium { font-size: var(--text-medium); }

app/helpers/notifications_helper.rb

@@ -22,7 +22,7 @@ module NotificationsHelper
   end
 
   def notification_tag(notification, &)
-    tag.div id: dom_id(notification), class: "notification tray__item border-radius flex position-relative" do
+    tag.div id: dom_id(notification), class: "notification tray__item border-radius flex position-relative txt-normal" do
       concat(
         link_to(notification.resource,
           class: "notification__content border-radius pad shadow fill-white flex align-start txt-align-start gap flex-item-grow max-width border txt-ink",

app/views/bubbles/pins/_pin.html.erb

@@ -1,17 +1,17 @@
 <% cache pin do %>
-  <%= tag.div id: dom_id(pin), class: "pin tray__item flex position-relative" do %>
+  <%= tag.div id: dom_id(pin), class: "pin tray__item flex position-relative txt-normal" do %>
     <%= link_to bucket_bubble_path(pin.bubble.bucket, pin.bubble),
           class: "pin__content shadow fill-white flex align-start txt-align-start gap flex-item-grow max-width border border-radius txt-ink overflow-clip",
           data: { action: "click->dialog#close", turbo_frame: "_top" },
           style: "--bubble-color: #{ pin.bubble.color };" do %>
-      <div class="flex flex-column min-width flex-item-grow">
-        <div class="pin__header flex gap-half align-end txt-uppercase">
+      <div class="flex flex-column min-width flex-item-grow txt-small">
+        <div class="pin__header flex gap-half align-center txt-uppercase">
           <div class="pin__bucket flex-inline flex-item-justify-start txt-reversed min-width">
-            <span class="txt-x-small overflow-ellipsis"><%= pin.bubble.bucket.name %></span>
+            <span class="txt-xx-small overflow-ellipsis"><%= pin.bubble.bucket.name %></span>
           </div>
 
           <% if pin.bubble&.stage %>
-            <strong class="pin__stage border txt-tight-lines flex-item-justify-end txt-x-small">
+            <strong class="pin__stage border txt-tight-lines flex-item-justify-end txt-xx-small">
               <%= pin.bubble&.stage&.name %>
             </strong>
           <% end %>
@@ -19,7 +19,7 @@
   
         <strong class="pin__title overflow-ellipsis"><%= bubble_title(pin.bubble) %></strong>
   
-        <div class="tray__item-meta flex align-end txt-normal gap-half txt-tight-lines">
+        <div class="tray__item-meta flex align-end gap-half txt-tight-lines">
           <div class="translucent">
             <span>Updated</span> <%= local_datetime_tag(pin.bubble.updated_at, style: :ago) -%>
           </div>

app/views/notifications/_notification.html.erb

@@ -1,10 +1,10 @@
 <% cache [notification, "2025-03-20"] do %>
   <%= notification_tag notification do %>
-    <div class="avatar txt-small flex-item-no-shrink">
+    <div class="avatar txt-x-small flex-item-no-shrink">
       <%= avatar_image_tag(notification.creator) %>
     </div>
 
-    <div class="flex flex-column txt-tight-lines min-width flex-item-grow">
+    <div class="flex flex-column txt-tight-lines min-width flex-item-grow txt-small">
       <strong class="overflow-ellipsis notification__title"><%= notification_title(notification) %></strong>
         <div class="overflow-ellipsis">
           <% if notification.event.action == "commented" %>

app/views/notifications/_tray.html.erb

@@ -4,8 +4,8 @@
       data: { controller: "dialog", turbo_permanent: true, dialog_modal_value: false, dialog_target: "dialog", action: "keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside" } do %>
   <%= turbo_frame_tag("notifications", src: notifications_tray_path) -%>
 
-  <%= link_to notifications_path, class: "tray__overflow border-radius", data: { action: "click->dialog#close"} do %>
-    <div class="notification__content border-radius pad shadow fill-white flex align-center txt-align-center gap full-width border txt-ink">
+  <%= link_to notifications_path, class: "tray__overflow border-radius txt-normal", data: { action: "click->dialog#close"} do %>
+    <div class="notification__content border-radius pad shadow fill-white flex align-center txt-align-center gap full-width border txt-ink txt-small">
       <div class="flex flex-column txt-tight-lines min-width flex-item-grow">
         <strong>+ More…</strong>
       </div>
@@ -14,12 +14,12 @@
 
   <div class="tray__actions notification-tray__actions flex align-center gap-half">
     <%= button_to notifications_mark_all_read_path, class: "notification-tray__read_action btn flex-item-justify-start shadow", data: { action: "click->dialog#close", turbo_frame: "notifications" } do %>
-      Mark all as read
+      Mark all read
     <% end %>
 
     <%= link_to notifications_path, class: "notification-tray__all_action btn flex-item-justify-end shadow", data: { action: "click->dialog#close"} do %>
       <%= image_tag "bell.svg", aria: { hidden: true }, size: 24 %>
-      <span>See all notifications</span>
+      <span>See all</span>
     <% end %>
   </div>