diff --git a/src/client/app.ts b/src/client/app.ts
index 3789270..1eec40c 100644
--- a/src/client/app.ts
+++ b/src/client/app.ts
@@ -289,16 +289,29 @@ function syncOverlayDownload(photo) {
   overlayDownload.setAttribute("aria-disabled", "false");
 }
 
+function getPhotoTimelineOrder(photos) {
+  return [...photos].sort((left, right) => {
+    const leftTime = getPhotoTimestamp(left)?.getTime() ?? Number.POSITIVE_INFINITY;
+    const rightTime = getPhotoTimestamp(right)?.getTime() ?? Number.POSITIVE_INFINITY;
+
+    if (leftTime !== rightTime) {
+      return leftTime - rightTime;
+    }
+
+    return String(left.name).localeCompare(String(right.name));
+  });
+}
+
 function getOverlayPhotos() {
   if (!state.visiblePhotos.length) {
-    return state.photos;
+    return getPhotoTimelineOrder(state.photos);
   }
 
   if (state.activePhotoId && state.visiblePhotos.some((photo) => photo.id === state.activePhotoId)) {
-    return state.visiblePhotos;
+    return getPhotoTimelineOrder(state.visiblePhotos);
   }
 
-  return state.photos.length ? state.photos : state.visiblePhotos;
+  return state.photos.length ? getPhotoTimelineOrder(state.photos) : getPhotoTimelineOrder(state.visiblePhotos);
 }
 
 function findPhotoByName(photoName, photos = state.photos) {
diff --git a/src/server/app-assets.ts b/src/server/app-assets.ts
index e8be8b5..b41c8c7 100644
--- a/src/server/app-assets.ts
+++ b/src/server/app-assets.ts
@@ -762,6 +762,17 @@ export const APP_STYLES = `      :root {
         pointer-events: none;
       }
 
+      @media (max-width: 760px) {
+        .overlay-prev,
+        .overlay-next {
+          display: none;
+        }
+
+        .overlay-download {
+          right: 16px;
+        }
+      }
+
       .overlay-nav {
         position: fixed;
         top: 50%;