src/components/messageStream/overlays/ImageLightbox.tsx

@@ -151,12 +151,11 @@ function LightboxView({
   const [isCaptionVisible, setIsCaptionVisible] = useState(true);
   const touchStartX = useRef<number | null>(null);
 
-  const goPrev = useCallback(
+  // Clamp at the ends instead of wrapping; the nav arrows / swipe / arrow
-    () => setIndex((i) => (i - 1 + images.length) % images.length),
+  // keys should all behave like a linear gallery, not a carousel.
-    [images.length],
+  const goPrev = useCallback(() => setIndex((i) => Math.max(0, i - 1)), []);
-  );
   const goNext = useCallback(
-    () => setIndex((i) => (i + 1) % images.length),
+    () => setIndex((i) => Math.min(images.length - 1, i + 1)),
     [images.length],
   );
 
@@ -234,8 +233,7 @@ function LightboxView({
 
       {/* Image stage */}
       <div className="relative flex min-h-0 w-full flex-1 items-center justify-center">
-        {hasMany ? (
+        {hasMany && index > 0 ? (
-          <>
           <button
             type="button"
             onClick={(e) => {
@@ -247,6 +245,8 @@ function LightboxView({
           >
             <ChevronLeft className="h-6 w-6" />
           </button>
+        ) : null}
+        {hasMany && index < images.length - 1 ? (
           <button
             type="button"
             onClick={(e) => {
@@ -258,7 +258,6 @@ function LightboxView({
           >
             <ChevronRight className="h-6 w-6" />
           </button>
-          </>
         ) : null}
 
         <div