From 74618c22826ef6576236835a6308256f2d908bcc Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 17 Dec 2024 04:12:50 +0100
Subject: [PATCH] UX: fix image carousel in comparisonTable

---
 src/UI/Comparison/ComparisonTable.svelte | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/UI/Comparison/ComparisonTable.svelte b/src/UI/Comparison/ComparisonTable.svelte
index 32757ff62..5174c8eb6 100644
--- a/src/UI/Comparison/ComparisonTable.svelte
+++ b/src/UI/Comparison/ComparisonTable.svelte
@@ -128,17 +128,18 @@
 
   {#if $unknownImages.length > 0}
     {#if readonly}
-      <div class="w-full overflow-x-auto">
-        <div class="flex h-32 w-max gap-x-2">
-          {#each $unknownImages as image (image)}
-            <AttributedImage
-              {state}
-              imgClass="h-32 w-max shrink-0"
-              image={{ url: image }}
-              previewedImage={state.previewedImage}
-            />
-          {/each}
-        </div>
+      <div class="flex w-full space-x-2 overflow-x-auto border border-gray-600 p-1"
+           style="scroll-snap-type: x proximity; border: 1px solid black">
+        {#each $unknownImages as image (image)}
+            <div class="relative flex w-fit items-center bg-gray-200">
+              <AttributedImage
+                {state}
+                imgClass="h-32 shrink-0"
+                image={{ url: image }}
+                previewedImage={state.previewedImage}
+              />
+          </div>
+        {/each}
       </div>
     {:else}
       {#each $unknownImages as image (image)}