From b059d66d80b33031a519dbdf14cfb4b54bf8c5c6 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 17 Jan 2026 13:35:37 +0000
Subject: [PATCH] Fix watch history mobile layout and sort order

- Updated CSS for `.watch-history-card` to use `flex-col` on mobile for stacked layout, switching to `sm:flex-row` on larger screens.
- Added `w-full` to `.watch-history-card__thumbnail` on mobile to constrain image width.
- Fixed a bug in `js/nostr/watchHistory.js` where `computeWatchHistoryFingerprintForItems` was sorting the live history array in-place by ID, causing the UI to display an incorrect (non-chronological) order. The fix involves creating a shallow copy before sorting.
- Updated `tests/nostr/watchHistory.test.js` to verify behavior against the current storage version (`v5`).
---
 css/tailwind.source.css          | 4 ++--
 js/nostr/watchHistory.js         | 2 +-
 tests/nostr/watchHistory.test.js | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 7272e05d..fd74456c 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -3239,11 +3239,11 @@
   }
 
   .watch-history-card__primary {
-    @apply flex min-w-0 flex-1 flex-wrap items-stretch gap-4 sm:flex-nowrap;
+    @apply flex min-w-0 flex-1 flex-col items-stretch gap-4 sm:flex-row;
   }
 
   .watch-history-card__thumbnail {
-    @apply block flex-none text-text no-underline sm:w-56;
+    @apply block flex-none text-text no-underline w-full sm:w-56;
   }
 
   .watch-history-card__thumbnailInner {
diff --git a/js/nostr/watchHistory.js b/js/nostr/watchHistory.js
index 69644149..40b85c3a 100644
--- a/js/nostr/watchHistory.js
+++ b/js/nostr/watchHistory.js
@@ -564,7 +564,7 @@ async function computeWatchHistoryFingerprintForItems(itemsOrBuckets) {
   // Check if buckets
   let flatItems = [];
   if (Array.isArray(itemsOrBuckets)) {
-    flatItems = itemsOrBuckets;
+    flatItems = [...itemsOrBuckets];
   } else if (itemsOrBuckets && typeof itemsOrBuckets === "object") {
     flatItems = Object.keys(itemsOrBuckets)
       .sort()
diff --git a/tests/nostr/watchHistory.test.js b/tests/nostr/watchHistory.test.js
index 7be1c096..b64f6b1a 100644
--- a/tests/nostr/watchHistory.test.js
+++ b/tests/nostr/watchHistory.test.js
@@ -11,7 +11,7 @@ import {
 } from "../../js/nostr/watchHistory.js";
 import { WATCH_HISTORY_KIND } from "../../js/config.js";
 
-const WATCH_HISTORY_STORAGE_KEY = "bitvid:watch-history:v4";
+const WATCH_HISTORY_STORAGE_KEY = "bitvid:watch-history:v5";
 
 function ensureLocalStorageCleared() {
   if (typeof localStorage?.clear === "function") {