From ce048a2196164a2f274e4993c445daa1d2cf51eb Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Fri, 1 May 2026 13:14:47 +0100
Subject: [PATCH] fix(help): resolve screenshot paths under Vite subpath deploy

Markdown guides use /help-screenshots/... (root-relative). With Vite
base=/video-accessibility/, images were requested at the wrong URL.
Custom img renderer now prepends import.meta.env.BASE_URL so paths
resolve correctly on both /video-accessibility/ and local dev.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/Help.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/Help.tsx b/frontend/src/routes/Help.tsx
index c6cc685..c1ad0b3 100644
--- a/frontend/src/routes/Help.tsx
+++ b/frontend/src/routes/Help.tsx
@@ -299,16 +299,21 @@ export function Help() {
       },
       img({ src, alt }) {
         if (!src) return null;
+        // Markdown guides use root-relative paths like /help-screenshots/...
+        // Prepend Vite base so they resolve correctly under any subpath deploy.
+        const resolvedSrc = src.startsWith('/help-screenshots/')
+          ? `${import.meta.env.BASE_URL}${src.slice(1)}`
+          : src;
         return (
           <span className="block my-4">
             <button
               type="button"
               className="cursor-zoom-in p-0 border-0 bg-transparent block w-full text-left focus:outline-none focus:ring-2 focus:ring-indigo-400 rounded-xl"
-              onClick={() => openLightbox(src, alt ?? '')}
+              onClick={() => openLightbox(resolvedSrc, alt ?? '')}
               aria-label={`View full-size: ${alt ?? 'screenshot'}`}
             >
               <img
-                src={src}
+                src={resolvedSrc}
                 alt={alt}
                 className="rounded-xl border border-gray-200 shadow-md max-w-full hover:shadow-lg hover:scale-[1.01] transition-all duration-200"
               />