From 56798348a3a43ccc27b86b165e579a0f3c319e46 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 3 Oct 2024 14:35:57 -0500
Subject: [PATCH] Line after first 10 bubbles shows which are bubbled up

---
 app/assets/stylesheets/bubbles.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index 576d4ebbc..ee65be70d 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -433,11 +433,23 @@
     border-radius: 0.6em;
     list-style: none;
     padding: 0.5em var(--inline-space);
+    position: relative;
     transition: background-color 200ms ease-out;
 
+    &:nth-of-type(10)::after {
+      border-bottom: 1px dotted var(--color-subtle-dark);
+      block-size: 0;
+      content: "";
+      inline-size: 100%;
+      inset: auto 0 0 0;
+      position: absolute;
+    }
+
     @media (hover: hover) {
       &:hover {
         background-color: color(from var(--bubble-color) srgb r g b / 0.15);
+        border: 0;
+        border-radius: 0.6em;
 
         .bubble__svg {
           transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift))) scale(1.2);