From ea07fb508768cd56208d43ac94f7bd28c0ace6e1 Mon Sep 17 00:00:00 2001
From: Lotus CI <ci@lotusguild.org>
Date: Thu, 24 Sep 2026 21:49:36 -0400
Subject: [PATCH] fix(media): bigger prev/next arrows in the media viewer on
 touch screens (#164)

The viewer's arrows were 32 px at the screen edges on a phone, under the
44 px target the rest of the mobile work uses. On a coarse pointer they use
the next IconButton size (48 px measured on a Pixel 7); desktop is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
---
 src/app/features/room/MediaGallery.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/app/features/room/MediaGallery.tsx b/src/app/features/room/MediaGallery.tsx
index c482b9b43..fd5350518 100644
--- a/src/app/features/room/MediaGallery.tsx
+++ b/src/app/features/room/MediaGallery.tsx
@@ -25,6 +25,7 @@ import { useZoom } from '../../hooks/useZoom';
 import { usePan, Pan } from '../../hooks/usePan';
 import { useSwipeNav } from '../../hooks/useSwipeNav';
 import { usePinchZoom } from '../../hooks/usePinchZoom';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { IEncryptedFile, IImageInfo, IThumbnailContent } from '../../../types/matrix/common';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
@@ -268,6 +269,9 @@ export function Lightbox({
   );
   const dialogRef = useRef<HTMLDivElement>(null);
   const onPinchStart = usePinchZoom(isImage, zoom, setZoom);
+  // [Gitea #164] 44 px prev/next targets on touch screens (32 px otherwise).
+  const coarsePointer = useMediaQuery('(pointer: coarse)');
+  const navSize = coarsePointer ? '500' : '400';
   const onMediaTouchStart = useCallback<React.TouchEventHandler<HTMLElement>>(
     (e) => {
       swipe.onTouchStart(e);
@@ -473,6 +477,7 @@ export function Lightbox({
             {index > 0 && (
               <IconButton
                 variant="Surface"
+                size={navSize}
                 aria-label="Previous"
                 onClick={prev}
                 style={{ flexShrink: 0, marginRight: config.space.S200 }}
@@ -501,6 +506,7 @@ export function Lightbox({
             {index < items.length - 1 && (
               <IconButton
                 variant="Surface"
+                size={navSize}
                 aria-label="Next"
                 onClick={next}
                 style={{ flexShrink: 0, marginLeft: config.space.S200 }}