210 minimize warning

BoGLWeb/wwwroot/css/main.css

@@ -905,4 +905,48 @@ input[type="file"] {
 .wideTooltip {
     min-width: 630px !important;
     max-width: 630px !important;
-}
+}
+
+/* Custom screen size warning modal */
+/* Hidden by default */
+.hidden {
+    display: none;
+}
+
+.resolution-modal {
+    position: fixed;
+    z-index: 9999;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.resolution-modal-content {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    max-width: 400px;
+    text-align: center;
+    position: relative;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+}
+
+.resolution-modal-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+    cursor: pointer;
+}
+
+.hidden {
+    display: none !important;
+}

BoGLWeb/wwwroot/index.html

@@ -42,6 +42,14 @@
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
     <script>navigator.serviceWorker.register('service-worker.js');</script>
+
+    <!-- screen-size modal -->
+    <div id="resolution-warning-modal" class="resolution-modal hidden">
+        <div class="resolution-modal-content">
+            <span class="resolution-modal-close">&times;</span>
+            <p>⚠️ Your window size is sub-optimal for this application. Please resize for best experience.</p>
+        </div>
+    </div>
 </body>
 
 </html>

BoGLWeb/wwwroot/main.ts

@@ -313,3 +313,31 @@ function pollDOM() {
 
 // starts the DOM polling
 pollDOM();
+
+
+//sub-optional resolution sizes - open to changes
+const min_width = 800;
+const min_height = 800;
+
+const modal = document.getElementById("resolution-warning-modal")!;
+const closeBtn = document.querySelector(".resolution-modal-close")!;
+
+function checkWindowSize() {
+    const isTooSmall = window.innerWidth < min_width || window.innerHeight < min_height;
+    if (isTooSmall) {
+        modal.classList.remove("hidden");
+    } else {
+        modal.classList.add("hidden");
+    }
+}
+
+// Hide modal when "X" is clicked
+closeBtn.addEventListener("click", () => {
+    modal.classList.add("hidden");
+});
+
+// Re-check when window is resized
+window.addEventListener("resize", checkWindowSize);
+
+// Run once on page load
+checkWindowSize();

BoGLWeb/wwwroot/tsconfig.json

@@ -6,7 +6,8 @@
     "lib": [ "es2021", "dom" ],
     "esModuleInterop": true,
     "removeComments": true,
-    "outFile": "./build/build.js"
+    "outFile": "./build/build.js",
+    "moduleResolution": "node",
   },
   "exclude": [
     "node_modules"