fix: Improve nav dot tooltip visibility and positioning

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

webclient/src/Style-light.css

@@ -380,8 +380,12 @@ button.comment {
 	line-height: 1.3;
 }
 
-.tooltip:hover .tooltiptext,
+.backwardDot .tooltiptext {
-.tooltip:active .tooltiptext {
+	left: 0;
+	margin-left: 0;
+}
+
+.tooltip.show-tooltip .tooltiptext {
 	visibility: visible;
 	opacity: 1;
 }

webclient/src/utils.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
 
@@ -32,6 +32,8 @@ export const ToggleDot = ({ id, article }) => (
 );
 
 export const BackwardDot = () => {
+	const [showTooltip, setShowTooltip] = useState(false);
+
 	const goBackward = () => {
 		localStorage.setItem('scrollLock', 'True');
 		window.history.back();
@@ -42,7 +44,14 @@ export const BackwardDot = () => {
 	if (!document.fullscreenElement) return null;
 
 	return (
-		<div className='dot backwardDot tooltip' onClick={goBackward}>
+		<div
+			className={'dot backwardDot tooltip' + (showTooltip ? ' show-tooltip' : '')}
+			onClick={goBackward}
+			onMouseEnter={() => setShowTooltip(true)}
+			onMouseLeave={() => setShowTooltip(false)}
+			onTouchStart={() => setShowTooltip(true)}
+			onTouchEnd={() => setShowTooltip(false)}
+		>
 			<div className='button'>
 				
 			</div>
@@ -52,6 +61,8 @@ export const BackwardDot = () => {
 };
 
 export const ForwardDot = () => {
+	const [showTooltip, setShowTooltip] = useState(false);
+
 	const goForward = () => {
 		localStorage.setItem('scrollLock', 'True');
 		window.history.forward();
@@ -61,7 +72,14 @@ export const ForwardDot = () => {
 	if (!isMobile) return null;
 
 	return (
-		<div className='dot forwardDot tooltip' onClick={goForward}>
+		<div
+			className={'dot forwardDot tooltip' + (showTooltip ? ' show-tooltip' : '')}
+			onClick={goForward}
+			onMouseEnter={() => setShowTooltip(true)}
+			onMouseLeave={() => setShowTooltip(false)}
+			onTouchStart={() => setShowTooltip(true)}
+			onTouchEnd={() => setShowTooltip(false)}
+		>
 			<div className='button'>
 				
 			</div>