Don't have horizontal scrolling

web-new/src/components/card/HistoryCard.tsx

@@ -35,11 +35,12 @@ export default function HistoryCard({
   }
 
   return (
-    <Card className="my-2 mr-2 bg-secondary w-[284px]">
+    <Card className="my-2 xs:mr-2 bg-secondary w-full xs:w-[48%] sm:w-[284px]">
       <PreviewThumbnailPlayer
         camera={timeline.camera}
         relevantPreview={relevantPreview}
         startTs={Object.values(timeline.entries)[0].timestamp}
+        eventId={Object.values(timeline.entries)[0].source_id}
       />
       <div className="p-2">
         <div className="text-sm flex">

web-new/src/components/player/PreviewThumbnailPlayer.tsx

@@ -10,6 +10,7 @@ type PreviewPlayerProps = {
   camera: string;
   relevantPreview?: Preview;
   startTs: number;
+  eventId: string;
 };
 
 type Preview = {
@@ -24,6 +25,7 @@ export default function PreviewThumbnailPlayer({
   camera,
   relevantPreview,
   startTs,
+  eventId,
 }: PreviewPlayerProps) {
   const { data: config } = useSWR("config");
   const playerRef = useRef<Player | null>(null);
@@ -46,12 +48,29 @@ export default function PreviewThumbnailPlayer({
   );
 
   if (!relevantPreview) {
+    if (isCurrentHour(startTs)) {
+      return (
+        <AspectRatio
+          ratio={16 / 9}
+          className="bg-black flex justify-center items-center"
+        >
+          <img
+            className={`${getPreviewWidth(camera, config)}`}
+            src={`${apiHost}api/preview/${camera}/${startTs}/thumbnail.jpg`}
+          />
+        </AspectRatio>
+      );
+    }
+
     return (
       <AspectRatio
         ratio={16 / 9}
         className="bg-black flex justify-center items-center"
       >
-        <img src={`${apiHost}api/preview/${camera}/${startTs}/thumbnail.jpg`} />
+        <img
+          className="w-[160px]"
+          src={`${apiHost}api/events/${eventId}/thumbnail.jpg`}
+        />
       </AspectRatio>
     );
   }
@@ -63,7 +82,7 @@ export default function PreviewThumbnailPlayer({
       onMouseEnter={() => onHover(true)}
       onMouseLeave={() => onHover(false)}
     >
-      <div className={`${getThumbWidth(camera, config)}`}>
+      <div className={`${getPreviewWidth(camera, config)}`}>
         <VideoPlayer
           options={{
             preload: "auto",
@@ -93,11 +112,17 @@ export default function PreviewThumbnailPlayer({
   );
 }
 
-function getThumbWidth(camera: string, config: FrigateConfig) {
+function isCurrentHour(timestamp: number) {
+  const now = new Date();
+  now.setMinutes(0, 0, 0);
+  return timestamp > now.getTime() / 1000;
+}
+
+function getPreviewWidth(camera: string, config: FrigateConfig) {
   const detect = config.cameras[camera].detect;
 
   if (detect.width / detect.height < 1.4) {
-    return "w-[200px]";
+    return "w-[208px]";
   }
 
   return "w-full";

web-new/src/pages/History.tsx

@@ -197,32 +197,29 @@ function History() {
                             strftime_fmt: "%I:00",
                           })}
                         </Heading>
-                        <ScrollArea>
-                          <div className="flex">
-                            {Object.entries(timelineHour).map(
-                              ([key, timeline]) => {
-                                const startTs = Object.values(
-                                  timeline.entries
-                                )[0].timestamp;
-                                return (
-                                  <HistoryCard
-                                    key={key}
-                                    timeline={timeline}
-                                    relevantPreview={Object.values(
-                                      allPreviews || []
-                                    ).find(
-                                      (preview) =>
-                                        preview.camera == timeline.camera &&
-                                        preview.start < startTs &&
-                                        preview.end > startTs
-                                    )}
-                                  />
-                                );
-                              }
-                            )}
-                          </div>
-                          <ScrollBar className="m-2" orientation="horizontal" />
-                        </ScrollArea>
+
+                        <div className="flex flex-wrap">
+                          {Object.entries(timelineHour).map(
+                            ([key, timeline]) => {
+                              const startTs = Object.values(timeline.entries)[0]
+                                .timestamp;
+                              return (
+                                <HistoryCard
+                                  key={key}
+                                  timeline={timeline}
+                                  relevantPreview={Object.values(
+                                    allPreviews || []
+                                  ).find(
+                                    (preview) =>
+                                      preview.camera == timeline.camera &&
+                                      preview.start < startTs &&
+                                      preview.end > startTs
+                                  )}
+                                />
+                              );
+                            }
+                          )}
+                        </div>
                         {lastRow && <ActivityIndicator />}
                       </div>
                     );

web-new/tailwind.config.js

@@ -70,6 +70,10 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      screens: {
+        "xs": "480px",
+        "2xl": "1400px",
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],