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