feat: switch to Masonry view on small screens

- Hide the standard view  button
- Add window resize listener

resolves #468

Author: PouyaMohseni

web-app/django/VIM/templates/instruments/index.html

@@ -138,15 +138,15 @@ <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"
                       aria-pressed="true">
                 <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">

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 {