From d629ff24fa109d66166f27821411187cc927a10e Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Sat, 9 May 2026 10:54:38 +0200
Subject: [PATCH] Enhance BackButton: add router integration for navigation and
 improve responsiveness with hidden text on small screens

---
 web/components/back-button.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/components/back-button.tsx b/web/components/back-button.tsx
index 345f8154..a79d6505 100644
--- a/web/components/back-button.tsx
+++ b/web/components/back-button.tsx
@@ -1,9 +1,11 @@
 import {ChevronLeftIcon} from '@heroicons/react/24/outline'
 import clsx from 'clsx'
+import {useRouter} from 'next/router'
 import React, {useEffect, useState} from 'react'
 
 export function BackButton(props: {className?: string}) {
   const {className} = props
+  const router = useRouter()
   const [canGoBack, setCanGoBack] = useState(false)
 
   // Can't put this in a useMemo to avoid the page jump else we'll get hydration errors.
@@ -16,13 +18,14 @@ export function BackButton(props: {className?: string}) {
   return (
     <button
       type="button"
+      onClick={() => router.back()}
       className={clsx(
         'text-ink-500 hover:text-primary-700 inline-flex items-center gap-2 text-sm transition-all',
         className,
       )}
     >
       <ChevronLeftIcon className="h-4 w-4" />
-      Back
+      <span className={' hidden sm:flex'}>Back</span>
     </button>
   )
 }