refactor(app): improve layout consistency and responsiveness across pages

The changes focus on standardizing layouts, spacing, and container usage
throughout the site while enhancing responsive behavior. Key improvements
include:

- Unified container usage for consistent page widths
- Standardized section padding and gaps
- Removed redundant padding/margin classes
- Better responsive grid layouts
- Consistent text alignment and spacing
- Cleaner flexbox structures

src/pages/[...locale]/whatsnew.astro

@@ -37,7 +37,7 @@ if (
   )}
 >
   <main
-    class="relative mx-auto flex flex-col items-center gap-24 px-6 pb-52 pt-36 lg:px-24 xl:flex-row"
+    class="container flex xl:min-h-[calc(100vh-12rem)] xl:mt-22 flex-col gap-12 py-12 xl:grid xl:grid-cols-[2fr_3fr]"
   >
     <div class="flex flex-col gap-8">
       <div>
@@ -54,26 +54,26 @@ if (
       <div>
         <Fragment set:html={whatsNewText[0].replace(/\n/g, '<br>')} />
       </div>
-      <ul class="hidden flex-col gap-2 md:flex">
+      <ul class="hidden list-disc flex-col gap-2 xl:flex xl:container">
         <a
           href="https://github.com/zen-browser/desktop/issues/new/choose"
           target="_blank"
         >
-          <li class="ml-3 list-disc">
-            <Description class="text-base font-bold"
-              >{whatsNew.reportIssue}</Description
-            >
+          <li>
+            <Description class="text-base font-bold">
+              {whatsNew.reportIssue}
+            </Description>
           </li>
         </a>
         <a href="https://discord.gg/zen-browser" target="_blank">
-          <li class="ml-3 list-disc">
-            <Description class="text-base font-bold"
-              >{whatsNew.joinDiscord}</Description
-            >
+          <li>
+            <Description class="text-base font-bold">
+              {whatsNew.joinDiscord}
+            </Description>
           </li>
         </a>
       </ul>
-      <div class="flex flex-col gap-8 md:flex-row">
+      <div class="flex flex-wrap gap-8 place-self-start xl:place-self-center">
         <Button
           href={`/release-notes#${latestVersion.version}`}
           isPrimary
@@ -85,14 +85,15 @@ if (
         <SocialMediaStrip gap="6" />
       </div>
     </div>
+    
     <Video
-      src={whatsNewVideo}
-      autoplay
-      loop
-      muted
-      playsinline
-      preload="none"
-      class="w-full rounded-3xl object-cover shadow-lg"
-    />
+    src={whatsNewVideo}
+    autoplay
+    loop
+    muted
+    playsinline
+    preload="none"
+    class="rounded-3xl object-cover shadow-lg"
+  />
   </main>
 </Layout>