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

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

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()

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") {