fix(site): mobile landing preview scale and tentacle layout

Author: Tam-Leal

.gitattributes

@@ -0,0 +1,16 @@
+# Normalize line endings: LF in the repository (avoids false CRLF diffs on Windows).
+* text=auto eol=lf
+
+# Windows launcher scripts keep CRLF when checked out on Windows.
+*.bat text eol=crlf
+*.cmd text eol=crlf
+
+# Binary assets — do not modify line endings.
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.ico binary
+*.gif binary
+*.webp binary
+*.zip binary
+*.exe binary

CHANGELOG.md

@@ -16,7 +16,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Landing page (`site/index.html`): external CSS/JS, SEO (dashboard screenshot, manifest, sitemap.xml), security panel, aligned copy and Octicons; tentacle preview unchanged.
+- Landing page (`site/index.html`): external CSS/JS, SEO (dashboard screenshot, manifest, sitemap.xml), security panel, aligned copy and Octicons.
+- Landing preview on mobile (`site/index.html`, `site/css/index.css`): proportional dashboard scale (full screenshot visible), no horizontal scroll; fine-tuned tentacle positions/sizes on small screens only (desktop layout unchanged).
 - Download page (`site/download.html`): static manifest, shared nav styles via `common.css`, centered OS picker, clearer prerequisites, tighter install steps.
 - README header uses `site/gitdock-logo-removebg-preview.png` (transparent logo for GitHub light and dark themes).
 - `server.js` imports validation helpers from `lib/` (behavior preserved; easier to test).

scripts/pr-site-mobile-preview-body.md

@@ -0,0 +1,31 @@
+## Summary
+
+Fixes the landing page product preview on mobile: the full dashboard screenshot stays visible at proportional scale, horizontal scroll is removed, and tentacle placement is tuned for small screens without changing desktop layout or image assets.
+
+## Type of change
+
+- [x] Documentation / site only
+
+## What changed
+
+- **`site/index.html`:** `.preview-stage` wrapper; mobile `@media` uses single `zoom` scale (with `transform` fallback); per-tentacle tweaks only where needed (left pair, front pair, right tentacle).
+- **`site/css/index.css`:** `.preview-stage` desktop wrapper; removed dead per-tentacle rules that never applied (inline CSS wins); mobile `overflow-x: clip` on preview/html/body.
+- **`.gitattributes`:** `text=auto eol=lf` so Windows/Cursor do not flip line endings on every save.
+
+## Release
+
+**No GitHub Release or version bump.** Site-only change (redeploy `site/` when you publish the site).
+
+## Checklist
+
+- [x] Site-only — `npm test` not required for this PR
+- [x] Smoke-tested preview at `http://localhost:3848/` (desktop + mobile ~390px)
+- [x] No secrets in commits
+- [x] Updated `CHANGELOG.md` under **Unreleased**
+
+## Test plan
+
+- [x] Desktop (~1280px): preview matches pre-change layout; tentacles and dashboard unchanged
+- [x] Mobile (390px): full dashboard visible, no horizontal scroll
+- [x] Tentacles: left pair separated; front pair sized/spaced; right tentacle lower, behind dashboard
+- [ ] After deploy: spot-check https://www.gitdock.dev/ on phone or DevTools

site/css/index.css

@@ -126,12 +126,21 @@
 
 /* Dashboard Preview (window only — tentacles in inline CSS) */
 .preview {
+  width: 100%;
   padding: 0 24px 80px;
   margin-top: -40px;
   position: relative;
   z-index: 1;
 }
 
+/* Scales on mobile via inline CSS; desktop = pass-through wrapper */
+.preview-stage {
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  position: relative;
+}
+
 .preview-window {
   max-width: 1000px;
   margin: 0 auto;
@@ -796,78 +805,18 @@
   .preview {
     padding: 0 16px 60px;
     margin-top: -20px;
+    display: flex;
+    justify-content: center;
+    overflow-x: clip;
   }
 
-  .tentacle-scene {
-    padding: 0 24px;
-  }
-
-  .preview-window {
-    max-width: 96%;
-  }
-
-  .t-left {
-    width: 180px;
-    left: -60px;
-  }
-
-  .t-left2 {
-    width: 190px;
-    left: -60px;
-  }
-
-  .t-right {
-    width: 140px;
-    right: -15px;
-  }
-
-  .t-bl {
-    width: 150px;
-    bottom: -40px;
-  }
-
-  .t-bottom {
-    width: 160px;
-    bottom: -25px;
-  }
-
-  .t-top {
-    width: 90px;
-    top: -40px;
+  html,
+  body {
+    overflow-x: clip;
   }
 }
 
 @media (max-width: 480px) {
-  .t-left {
-    width: 120px;
-    left: -45px;
-  }
-
-  .t-left2 {
-    width: 130px;
-    left: -45px;
-  }
-
-  .t-right {
-    width: 100px;
-    right: -10px;
-  }
-
-  .t-bl {
-    width: 110px;
-    bottom: -30px;
-  }
-
-  .t-bottom {
-    width: 120px;
-    bottom: -20px;
-  }
-
-  .t-top {
-    width: 70px;
-    top: -35px;
-  }
-
   .hero h1 {
     font-size: 24px;
   }

site/index.html

@@ -189,6 +189,51 @@
         animation: none;
       }
     }
+
+    /* Mobile: one proportional scale — full dashboard always fits */
+    @media (max-width: 768px) {
+      .preview-stage {
+        --tentacle-scale: min(1, calc((100vw - 48px) / 1000));
+        width: 1000px;
+        max-width: 1000px;
+        margin-left: auto;
+        margin-right: auto;
+        zoom: var(--tentacle-scale);
+      }
+      @supports not (zoom: 1) {
+        .preview-stage {
+          transform: scale(var(--tentacle-scale));
+          transform-origin: top center;
+          margin-bottom: calc((1 - var(--tentacle-scale)) * -560px);
+        }
+      }
+      .t-left {
+        width: 270px;
+        top: 3%;
+      }
+      .t-left2 {
+        width: 225px;
+        bottom: -6%;
+      }
+      .t-bl {
+        width: 175px;
+        bottom: -58px;
+        left: 0%;
+      }
+      .t-bottom {
+        width: 190px;
+        bottom: -34px;
+        right: 20%;
+      }
+      .t-right {
+        z-index: 0;
+        top: auto;
+        right: -24px;
+        bottom: 4%;
+        width: 200px;
+        rotate: -22deg;
+      }
+    }
   </style>
 </head>
 <body>
@@ -238,21 +283,23 @@ <h1>Your Git projects.<br><span class="grad">One Space.</span></h1>
 <section aria-label="Product screenshot">
 <!-- Dashboard Preview -->
 <div class="preview fade-in">
-  <div class="tentacle-scene">
-    <img class="tentacle t-left" src="./tentacle-left.png" alt="" aria-hidden="true" draggable="false" loading="lazy" onerror="this.remove()">
-    <img class="tentacle t-left2" src="./tentacle-left2.png" alt="" aria-hidden="true" draggable="false" loading="lazy" onerror="this.remove()">
-    <img class="tentacle t-right" src="./tentacle-right.png" alt="" aria-hidden="true" draggable="false" loading="lazy" onerror="this.remove()">
-    <img class="tentacle t-top" src="./tentacle-top.png" alt="" aria-hidden="true" draggable="false" loading="lazy" onerror="this.remove()">
-    <div class="preview-window">
-      <div class="preview-bar">
-        <span class="preview-dot" style="background:var(--red)"></span>
-        <span class="preview-dot" style="background:var(--yellow)"></span>
-        <span class="preview-dot" style="background:var(--green)"></span>
+  <div class="preview-stage">
+    <div class="tentacle-scene">
+      <img class="tentacle t-left" src="./tentacle-left.png" alt="" aria-hidden="true" draggable="false" loading="lazy" onerror="this.remove()">
+      <img class="tentacle t-left2" src="./tentacle-left2.png" alt="" aria-hidden="true" draggable="false" loading="lazy" onerror="this.remove()">
+      <img class="tentacle t-right" src="./tentacle-right.png" alt="" aria-hidden="true" draggable="false" loading="lazy" onerror="this.remove()">
+      <img class="tentacle t-top" src="./tentacle-top.png" alt="" aria-hidden="true" draggable="false" loading="lazy" onerror="this.remove()">
+      <div class="preview-window">
+        <div class="preview-bar">
+          <span class="preview-dot" style="background:var(--red)"></span>
+          <span class="preview-dot" style="background:var(--yellow)"></span>
+          <span class="preview-dot" style="background:var(--green)"></span>
+        </div>
+        <img src="./dashboard_v2.jpg" alt="GitDock Dashboard" class="preview-img">
       </div>
-      <img src="./dashboard_v2.jpg" alt="GitDock Dashboard" class="preview-img">
+      <img class="tentacle t-bl" src="./tentacle-bottomleft.png" alt="" aria-hidden="true" draggable="false" loading="lazy" onerror="this.remove()">
+      <img class="tentacle t-bottom" src="./tentacle-bottom.png" alt="" aria-hidden="true" draggable="false" loading="lazy" onerror="this.remove()">
     </div>
-    <img class="tentacle t-bl" src="./tentacle-bottomleft.png" alt="" aria-hidden="true" draggable="false" loading="lazy" onerror="this.remove()">
-    <img class="tentacle t-bottom" src="./tentacle-bottom.png" alt="" aria-hidden="true" draggable="false" loading="lazy" onerror="this.remove()">
   </div>
 </div>
 </section>