From ea7dfe6e1ea44a645948862912f6c756e7cf2e98 Mon Sep 17 00:00:00 2001
From: edde746 <86283021+edde746@users.noreply.github.com>
Date: Mon, 27 Jul 2026 17:44:52 +0200
Subject: [PATCH] fix(website): rest the review strip at its first card and
 name the ratings

Add the scroll padding the inset scroller needs so mandatory snapping has a
valid position at scroll origin, and give the star groups an image role so
their label is exposed now that the icons are hidden.
---
 website/src/lib/components/Reviews.svelte | 5 +++--
 website/src/routes/scan/+page.svelte      | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/website/src/lib/components/Reviews.svelte b/website/src/lib/components/Reviews.svelte
index 37e8dc4e..d4156ef9 100644
--- a/website/src/lib/components/Reviews.svelte
+++ b/website/src/lib/components/Reviews.svelte
@@ -206,7 +206,7 @@
               <span>{featuredReview.upvotes}</span>
             </div>
           {:else}
-            <div class="stars" aria-label="5 out of 5 stars">
+            <div class="stars" role="img" aria-label="5 out of 5 stars">
               {#each Array(5) as _}
                 <StarIcon aria-hidden="true" />
               {/each}
@@ -264,7 +264,7 @@
             <span>{review.upvotes}</span>
           </div>
         {:else}
-          <div class="stars" aria-label="5 out of 5 stars">
+          <div class="stars" role="img" aria-label="5 out of 5 stars">
             {#each Array(5) as _}
               <StarIcon aria-hidden="true" />
             {/each}
@@ -509,5 +509,6 @@
   .content-pad {
     padding-left: max(var(--page-gutter), calc((100vw - var(--page-width)) / 2 + var(--page-gutter)));
     padding-right: var(--page-gutter);
+    scroll-padding-left: max(var(--page-gutter), calc((100vw - var(--page-width)) / 2 + var(--page-gutter)));
   }
 </style>
diff --git a/website/src/routes/scan/+page.svelte b/website/src/routes/scan/+page.svelte
index c4737a5e..24d9d3df 100644
--- a/website/src/routes/scan/+page.svelte
+++ b/website/src/routes/scan/+page.svelte
@@ -47,7 +47,7 @@
     <h1 class="scan-heading">Scan in Plezy</h1>
     <p class="scan-description">To use this feature, scan this QR code with the Plezy app.</p>
 
-    <div class="store-buttons" aria-label="Download Plezy">
+    <div class="store-buttons" role="group" aria-label="Download Plezy">
       {#each availableStores as store}
         <a
           href={store.url}