From dd5b374b539b6ea6291fd8f98eb0874e240f397f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 7 May 2023 18:20:25 +0800
Subject: [PATCH] Make horizontally-scrollable comments more apparent

---
 src/app.css          |  7 ++++++-
 src/pages/status.jsx | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index 815169e5..5a8c96b1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -256,6 +256,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .timeline.contextual > li.descendant:not(.thread) > .status-link {
   padding-left: 40px;
 }
+.timeline.contextual .replies[data-scroll-left]:not([data-scroll-left='0']) {
+  background-color: var(--bg-color);
+  box-shadow: inset 0 -3px var(--comment-line-color),
+    inset 0 3px var(--comment-line-color);
+}
 .timeline.contextual .replies[data-comments-level='4'] {
   overflow: auto;
 }
@@ -272,7 +277,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   .replies[data-comments-level='4']
   .replies[data-comments-level-overflow='true']
   .status {
-  min-width: min(15em, 75vw);
+  min-width: min(20em, 80vw);
 }
 .timeline.contextual
   > li.descendant.thread
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 58067154..f0a1d399 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -1040,8 +1040,22 @@ function SubComments({
     });
   }, []);
 
+  const detailsRef = useRef();
+  useEffect(() => {
+    function handleScroll(e) {
+      e.target.dataset.scrollLeft = e.target.scrollLeft;
+    }
+    detailsRef.current?.addEventListener('scroll', handleScroll, {
+      passive: true,
+    });
+    return () => {
+      detailsRef.current?.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   return (
     <details
+      ref={detailsRef}
       class="replies"
       open={openBefore || open}
       onToggle={(e) => {