From 4090f6be3c38983fb324ccd28fe9b2e83608eaa9 Mon Sep 17 00:00:00 2001
From: PouyaMohseni <pouyamohseniii@gmail.com>
Date: Sun, 21 Dec 2025 12:51:27 -0500
Subject: [PATCH] feat: switch to Masonry view on small screens - Hide the
 standard view  button - Add window resize listener

resolves #468
---
 web-app/django/VIM/templates/instruments/index.html |  4 ++--
 web-app/frontend/src/instruments/DisplaySettings.ts | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/web-app/django/VIM/templates/instruments/index.html b/web-app/django/VIM/templates/instruments/index.html
index 75c34a93..b9a8fb42 100644
--- a/web-app/django/VIM/templates/instruments/index.html
+++ b/web-app/django/VIM/templates/instruments/index.html
@@ -138,7 +138,7 @@ <h4 class="ms-3 me-2 my-auto">
             </div>
             <div class="d-flex">
               <button type="button"
-                      class="btn me-1 px-1 py-0 justify-content-center display-btn masonry-btn"
+                      class="btn me-2 me-md-1 px-1 py-0 justify-content-center display-btn masonry-btn"
                       id="masonry-btn"
                       title="Masonry View"
                       aria-label="Masonry View"
@@ -146,7 +146,7 @@ <h4 class="ms-3 me-2 my-auto">
                 <i class="bi bi-columns-gap"></i>
               </button>
               <button type="button"
-                      class="btn me-2 px-1 py-0 justify-content-center display-btn std-btn"
+                      class="btn me-2 px-1 py-0 justify-content-center display-btn std-btn d-none d-md-inline-flex"
                       id="std-btn"
                       title="Standard View"
                       aria-label="Standard View">
diff --git a/web-app/frontend/src/instruments/DisplaySettings.ts b/web-app/frontend/src/instruments/DisplaySettings.ts
index 04a1c9c6..540c462a 100644
--- a/web-app/frontend/src/instruments/DisplaySettings.ts
+++ b/web-app/frontend/src/instruments/DisplaySettings.ts
@@ -53,6 +53,19 @@ class DisplayManager {
         this.currentMasonry.layout();
       }
     });
+
+    // Force Masonry view on small screens
+    window.addEventListener('resize', () => {
+      if (window.matchMedia('(max-width: 767.98px)').matches) {
+        this.setDisplayMode('masonry');
+      }
+      this.updateDisplayMode();
+
+      // Re-layout masonry if active
+      if (this.getDisplayMode() === 'masonry' && this.currentMasonry) {
+        this.currentMasonry.layout();
+      }
+    });
   }
 
   private setDisplayMode(displayMode: DisplayMode): void {