From 99f09f3d0558a5b6c01265b4ac07ea41248eacd5 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Sat, 18 Jul 2026 22:39:36 +1000
Subject: [PATCH] Fix issue of ui

---
 links/templates/links/link_list.html | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/links/templates/links/link_list.html b/links/templates/links/link_list.html
index 3b5abe5..cc6f5b4 100644
--- a/links/templates/links/link_list.html
+++ b/links/templates/links/link_list.html
@@ -438,7 +438,7 @@
   </section>
 
   <!-- ============ Link Library ============ -->
-  <section class="apple-card home-section reveal" aria-labelledby="links-heading">
+  <section class="apple-card home-section" aria-labelledby="links-heading">
     <div class="library-header">
       <div class="library-title-group">
         <h2 id="links-heading" class="section-title">{% trans "Link List" %}</h2>
@@ -695,6 +695,11 @@
     if (reducedMotion || !('IntersectionObserver' in window)) {
       revealEls.forEach(el => el.classList.add('in-view'));
     } else {
+      // threshold: 0 fires as soon as any part of the target intersects the
+      // root, regardless of the target's own size. Using a ratio-based
+      // threshold (e.g. 0.08) breaks for tall elements (like a long table)
+      // whose intersection ratio can never reach that fraction even when
+      // most of it is on screen, leaving it permanently hidden.
       const observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
@@ -702,7 +707,7 @@
             observer.unobserve(entry.target);
           }
         });
-      }, { threshold: 0.08, rootMargin: '0px 0px -6% 0px' });
+      }, { threshold: 0, rootMargin: '0px 0px -6% 0px' });
       revealEls.forEach(el => observer.observe(el));
     }