From c28cda7822d9bad4002e34d09d55afd727edc940 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Thu, 5 Nov 2026 16:47:37 -0600
Subject: [PATCH] fix: keep bottom line on tile grids that have content below

---
 src/ui/components/tile-grid/edge.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/ui/components/tile-grid/edge.tsx b/src/ui/components/tile-grid/edge.tsx
index 9c35c3a43..5e2f18fac 100644
--- a/src/ui/components/tile-grid/edge.tsx
+++ b/src/ui/components/tile-grid/edge.tsx
@@ -42,17 +42,20 @@ function useReachesBottom(ref: React.RefObject<HTMLElement | null>) {
     if (!element || !scroller) return;
     // Measured without the line itself, so showing it never flips the answer.
     const update = () => {
+      const line = reachesRef.current ? 0 : 1;
       const end =
         element.getBoundingClientRect().bottom -
         scroller.getBoundingClientRect().top +
         scroller.scrollTop -
-        (reachesRef.current ? 0 : 1);
-      setReaches(end >= scroller.clientHeight - 0.5);
+        line;
+      // Compared with the whole scrollable height, so content below keeps the line.
+      setReaches(end >= scroller.scrollHeight - line - 0.5);
     };
     update();
     const observer = new ResizeObserver(update);
     observer.observe(scroller);
     observer.observe(element);
+    for (const child of Array.from(scroller.children)) observer.observe(child);
     return () => observer.disconnect();
   }, [ref]);
   return reaches;