Ticket #6651: 6651.diff

src/pages/index.vue

@@ -6 +6 @@
     </div>
 
     <main
-      class="flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 lg:flex-row lg:items-center lg:gap-0"
-      :class="{ 'h-screen overflow-hidden': !isNewHeaderEnabled }"
+      class="flex w-full flex-shrink-0 flex-grow flex-col justify-start md:justify-center gap-6 lg:flex-row lg:items-center lg:gap-0"
+      :class="{ 'lg:h-screen lg:overflow-hidden': !isNewHeaderEnabled }"
     >
       <!-- TODO: Refine min-width for different breakpoints, remove magic numbers -->
       <header
@@ -110 +110 @@
       />
       <div
         v-else
-        class="w-full flex-grow overflow-hidden px-6 lg:h-full lg:w-auto"
+        class="w-full flex-grow px-6 lg:h-full lg:w-auto"
         data-testid="image-carousel"
       >
         <!-- Height is 114.286vh i.e. 100vh * 8/7 (so that 0.75, 1, 1, 0.75 circles are visible) -->
         <!-- Width is 57.143vh i.e. half of height (because grid dimensions are 4 ⨯ 2) -->
         <div
-          class="homepage-images flex min-h-[120px] flex-row items-center gap-4 lg:grid lg:h-[114.286vh] lg:w-[57.143vh] lg:grid-cols-2 lg:grid-rows-4 lg:gap-0"
+          class="homepage-images flex flex-wrap min-h-[120px] flex-row  sm:justify-center items-center gap-4 lg:grid lg:h-[114.286vh] lg:w-[57.143vh] lg:grid-cols-2 lg:grid-rows-4 lg:gap-0"
           aria-hidden
         >
           <ClientOnly>