further reduce layout shift

DefGuard · Sep 11, 2024 · b220cfc · b220cfc
1 parent 2c45483
commit b220cfc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/GithubStars/style.scss b/src/components/GithubStars/style.scss
@@ -15,3 +15,8 @@
     font-size: 14px;
   }
 }
+
+// To reduce layout shift
+.github-stars-wrapper {
+  min-height: 21px;
+}
diff --git a/src/pages/client.astro b/src/pages/client.astro
@@ -14,7 +14,7 @@ import ClientImage from "/public/images/product/client/main-screen.png";
 import OverviewImage from "/public/images/product/client/overview.png";
 
 const clientFeatures = (await getCollection("client-features")).sort(
-  (f1, f2) => f1.data.order - f2.data.order,
+  (f1, f2) => f1.data.order - f2.data.order
 );
 const title =
   "defguard enterprise open-source SSO&VPN with 2FA/MFA: Best Desktop WireGuard Client";
@@ -54,7 +54,9 @@ const tags = [
           Beautiful open-source, cross-platform client for Enterprise and home usage, with
           real <strong>Wireguard-based Multi-Factor Authentication</strong>.
         </p>
-        <GithubStars owner="Defguard" repo="client" client:only="preact" />
+        <div class={"github-stars-wrapper"}>
+          <GithubStars owner="Defguard" repo="client" client:only="preact" />
+        </div>
         <div class="product-download">
           <a href="/download" rel="nofollow noopener noreferrer" data-astro-prefetch>
             <Button text="Download" size="large" />

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -13,7 +13,7 @@ import { Image } from "astro:assets";
 import CoreImage from "/public/images/product/core/hero-image.png";
 
 const coreFeatures = (await getCollection("core-features")).sort(
-  (f1, f2) => f1.data.order - f2.data.order,
+  (f1, f2) => f1.data.order - f2.data.order
 );
 
 const title = "defguard enterprise open-source SSO&VPN with 2FA/MFA";
@@ -70,7 +70,9 @@ const tags = [
             >real WireGuard® MFA/2FA & integrated OpenID Connect SSO</strong
           >.
         </p>
-        <GithubStars owner="defguard" repo="defguard" client:only="preact" />
+        <div class="github-stars-wrapper">
+          <GithubStars owner="defguard" repo="defguard" client:only="preact" />
+        </div>
         <div class="product-download">
           <a
             href="https://github.com/DefGuard/defguard/releases"