Fixes for the horizontal scroller styles and behavior

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 {

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}

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;
 	}