From a88c86beef048a4faa88dc69c14af444230b4f9c Mon Sep 17 00:00:00 2001
From: "Ella E." <ella@discourse.org>
Date: Tue, 7 Jan 2025 18:07:44 -0700
Subject: [PATCH] FIX: Cleaned up horizontal nav scrolling so arrows show/hide
 properly (#30621)

---
 .../app/components/horizontal-overflow-nav.js         | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js b/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js
index 2c58febf46a..9b0b4f6c55d 100644
--- a/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js
+++ b/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js
@@ -47,14 +47,21 @@ export default class HorizontalOverflowNav extends Component {
   }
 
   watchScroll(element) {
-    if (element.offsetWidth + element.scrollLeft === element.scrollWidth) {
+    const { scrollWidth, scrollLeft, offsetWidth } = element;
+
+    // Check if the content overflows
+    this.hasScroll = scrollWidth > offsetWidth;
+
+    // Ensure the right arrow disappears only when fully scrolled
+    if (scrollWidth - scrollLeft - offsetWidth <= 2) {
       this.hideRightScroll = true;
       clearInterval(this.scrollInterval);
     } else {
       this.hideRightScroll = false;
     }
 
-    if (element.scrollLeft === 0) {
+    // Ensure the left arrow disappears only when fully scrolled to the start
+    if (scrollLeft <= 2) {
       this.hideLeftScroll = true;
       clearInterval(this.scrollInterval);
     } else {