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

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