feat: make demo more responsive (#173)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
grafana · Nov 18, 2024 · 87fe9fb · 87fe9fb
1 parent 2702df5
commit 87fe9fb
Show file tree

Hide file tree

Showing 2 changed files with 430 additions and 261 deletions.
diff --git a/demo/helpers.js b/demo/helpers.js
@@ -1,6 +1,22 @@
 export function getSize() {
+  const margin = window.innerWidth <= 768 ? 30 : 100;
+  const BREAKPOINTS = {
+    MOBILE: 480,
+    TABLET: 768
+  };
+
+  const DENOMINATORS = {
+    MOBILE: 2.5,    // Larger height ratio for mobile
+    TABLET: 3,      // Medium height ratio for tablet
+    DESKTOP: 4      // Smaller height ratio for desktop
+  };
+
+  const denominator = 
+    window.innerWidth <= BREAKPOINTS.MOBILE ? DENOMINATORS.MOBILE :
+    window.innerWidth <= BREAKPOINTS.TABLET ? DENOMINATORS.TABLET :
+    DENOMINATORS.DESKTOP;
   return {
-    width: Math.min(window.innerWidth - 100, 1100),
-    height: window.innerHeight / 4,
+    width: Math.min(window.innerWidth - margin, 1100),
+    height: window.innerHeight / denominator,
   };
 }