From d75a9b434d8ece17ac630739eccc80140ece5c25 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Wed, 14 Oct 2026 01:26:37 +0200
Subject: [PATCH] More mobile-friendly dupe reports view

---
 src/styles/content/duplicate-reports.scss | 32 +++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/styles/content/duplicate-reports.scss b/src/styles/content/duplicate-reports.scss
index 99c0fa4..2cff2e4 100644
--- a/src/styles/content/duplicate-reports.scss
+++ b/src/styles/content/duplicate-reports.scss
@@ -16,3 +16,35 @@
     @extend %with-margin;
   }
 }
+
+// Trying to make it more usable on mobile by regrouping table cells into grid.
+@media screen and (max-width: 800px) {
+  .dupe-report-list {
+    & > thead {
+      display: none;
+    }
+
+    & > tbody > tr {
+      display: grid;
+      grid-template-areas: "source target" "diff actions";
+      grid-template-columns: 1fr 1fr;
+
+      .dupe-report-list--image {
+        grid-area: source;
+        width: auto;
+
+        + .dupe-report-list--image {
+          grid-area: target;
+        }
+      }
+
+      .dr__diff {
+        grid-area: diff;
+
+        & + td {
+          grid-area: actions;
+        }
+      }
+    }
+  }
+}