From 983dbd754cacb61ef8adab0ef9880ac626f766c5 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Wed, 26 Aug 2026 19:41:29 +0200
Subject: [PATCH] Fixes for the horizontal scroller styles and behavior

---
 src/back/jdd-components/subtree/subtree.css            | 10 +++++++++-
 src/back/jdd-components/subtree/subtree.jdd.tsx        |  7 ++++---
 .../horizontal-scroller.stimulus.ts                    | 10 ++++++++++
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/back/jdd-components/subtree/subtree.css b/src/back/jdd-components/subtree/subtree.css
index fb9e7fa..29d2bd8 100644
--- a/src/back/jdd-components/subtree/subtree.css
+++ b/src/back/jdd-components/subtree/subtree.css
@@ -64,7 +64,15 @@
 
 	.horizontal-scroller.has-next .next-button,
 	.horizontal-scroller.has-prev .prev-button {
-		display: block;
+		display: flex;
+
+		svg {
+			height: 16px;
+
+			* {
+				fill: var(--fg-color) !important;
+			}
+		}
 	}
 
 	.scroller-wrapper {
diff --git a/src/back/jdd-components/subtree/subtree.jdd.tsx b/src/back/jdd-components/subtree/subtree.jdd.tsx
index 28b3991..fac9022 100644
--- a/src/back/jdd-components/subtree/subtree.jdd.tsx
+++ b/src/back/jdd-components/subtree/subtree.jdd.tsx
@@ -7,6 +7,7 @@ import type {
 import { Component, ComponentArguments } from "@sealcode/jdd";
 import { horizontalScroller } from "src/back/routes/common/horizontal-scroller/horizontal-scroller.js";
 import { getColorVariables, getFgColorVariable } from "src/back/colors.js";
+import { icon } from "src/back/icons.js";
 
 const component_arguments = {
 	mode: new ComponentArguments.Enum(["column", "horizontal-scroller"]).setDefaultValue(
@@ -75,7 +76,7 @@ export class Subtree extends Component<typeof component_arguments> {
 		if (mode == "horizontal-scroller") {
 			const button_styles = [
 				`background-color: var(${scroller_mode_arrows_color})`,
-				`color: var(${getFgColorVariable(scroller_mode_arrows_color)})`,
+				`--fg-color: var(${getFgColorVariable(scroller_mode_arrows_color)})`,
 			].join(";");
 			return (
 				<div
@@ -92,7 +93,7 @@ export class Subtree extends Component<typeof component_arguments> {
 										data-action="horizontal-scroller#scrollLeft"
 										style={button_styles}
 									>
-										←
+										{icon("arrow-left")}
 									</button>
 								</div>
 								<div class="button-panel button-panel--right">
@@ -102,7 +103,7 @@ export class Subtree extends Component<typeof component_arguments> {
 										data-action="horizontal-scroller#scrollRight"
 										style={button_styles}
 									>
-										→
+										{icon("arrow-right")}
 									</button>
 								</div>
 								{scroller}
diff --git a/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts b/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts
index 863e088..9cf45cd 100644
--- a/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts
+++ b/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts
@@ -78,6 +78,16 @@ export default class HorizontalScroller extends Controller {
 		while (visibility[current_index] == 1 && current_index < visibility.length) {
 			current_index++;
 		}
+		if (current_index >= this.visibility.length) {
+			// edge-case. Content must be wider than the viewing window for some reason and none of the items reach 100% visibility. Returning the index of the first zero-visible element that follows a visible element;
+			for (let i = visibility.length - 1; i > 0; i--) {
+				if (visibility[i] === 0 && visibility[i - 1] > 0) {
+					return i;
+				}
+			}
+
+			return -1;
+		}
 		return current_index;
 	}