Merge pull request #280 from roushou/fix/landing-demo-overflow

fix(site): restore scrolling so the landing demo stays reachable

Author: aojea

site/assets/scss/_styles_project.scss

@@ -31,7 +31,9 @@
   justify-content: center;
   align-items: center;
   position: relative;
-  overflow: hidden;
+  overflow-x: hidden;
+  align-items: safe center;
+
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
   // Ambient mesh network grid background
@@ -261,6 +263,14 @@
     }
   }
 
+  #demo-player {
+    width: 100%;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 240, 255, 0.1);
+    border: 1px solid rgba(0, 240, 255, 0.15);
+  }
+
   // Terminal Window Styling
   .terminal-window {
     background: rgba(7, 19, 30, 0.6);
@@ -650,4 +660,4 @@
       }
     }
   }
-}
+}

site/layouts/index.html

@@ -28,7 +28,7 @@ <h1 class="landing-title">SAM</h1>
     <!-- Bottom Row: Demo Player -->
     <link rel="stylesheet" href="{{ "vendor/asciinema-player/asciinema-player.css" | relURL }}">
     <div style="width: 100%;">
-      <div id="demo-player" data-cast="{{ "demo.cast" | relURL }}" style="border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.15);"></div>
+      <div id="demo-player" data-cast="{{ "demo.cast" | relURL }}"></div>
     </div>
     <script src="{{ "vendor/asciinema-player/asciinema-player.min.js" | relURL }}"></script>
     <script>
@@ -39,7 +39,7 @@ <h1 class="landing-title">SAM</h1>
         autoPlay: true,
         loop: true,
         preload: true,
-        fit: 'width'
+        fit: 'width' // fill the container width; height follows the terminal
       });
     </script>
   </div>