From 6c973b9fc2beeafd8e1614284640eb1eff5243c0 Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Sun, 6 Sep 2026 03:00:52 +0200
Subject: [PATCH] stash

---
 frontend/src/views/Files.vue | 61 +++++++++++++++++++++++++++++++-----
 1 file changed, 54 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index 83ef4fc..7668656 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -8,12 +8,14 @@
                         <h5 class="card-title">Images</h5>
                     </div>
                     <div class="card-body">
-                        <span v-for="file in only_images(files)" :key="file.id">
-                            <deletable-wrapper confirm-message="Delete this file? This cannot be undone." @delete="deleteFile(file)">
-                                <authenticated-image :src="thumbnailPathForHash(file.hash)" :owner="file.owner"
-                                                     class="img-thumbnail"/>
-                            </deletable-wrapper>
-                        </span>
+                        <div class="masonry-grid">
+                            <div class="masonry-item" v-for="file in only_images(files)" :key="file.id">
+                                <deletable-wrapper confirm-message="Delete this file? This cannot be undone." @delete="deleteFile(file)">
+                                    <authenticated-image :src="thumbnailPathForHash(file.hash)" :owner="file.owner"
+                                                         class="img-preview-masonry"/>
+                                </deletable-wrapper>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="card">
@@ -70,6 +72,51 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "../scss/breakpoints";
 
+.img-preview-masonry {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+
+.masonry-item :deep(span) {
+    display: block !important;
+    width: 100%;
+}
+
+.masonry-grid {
+    column-count: 2;
+    column-gap: 1rem;
+}
+
+.masonry-item {
+    break-inside: avoid;
+    margin-bottom: 1rem;
+}
+
+@include media-breakpoint-up(md) {
+    .masonry-grid {
+        column-count: 3;
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    .masonry-grid {
+        column-count: 4;
+    }
+}
+
+@include media-breakpoint-up(xl) {
+    .masonry-grid {
+        column-count: 6;
+    }
+}
+
+@include media-breakpoint-up(xxl) {
+    .masonry-grid {
+        column-count: 12;
+    }
+}
 </style>
\ No newline at end of file