chore(app): sort tailwind classes consistently across all files

The changes are focused on reordering Tailwind CSS classes consistently across multiple component files, improving code readability and maintainability.

public/funding.json

@@ -1,68 +1,70 @@
 {
-    "version": "v1.0.0",
+  "version": "v1.0.0",
-    "entity": {
+  "entity": {
-        "type": "individual",
+    "type": "individual",
-        "role": "owner",
+    "role": "owner",
-        "name": "Mauro",
+    "name": "Mauro",
-        "email": "funding@zen-browser.com",
+    "email": "funding@zen-browser.com",
-        "description": "Im the developer of Zen Browser, a web browser that is fast, secure, and easy to use. I am passionate about creating software that makes people's lives easier and more enjoyable.",
+    "description": "Im the developer of Zen Browser, a web browser that is fast, secure, and easy to use. I am passionate about creating software that makes people's lives easier and more enjoyable.",
-        "webpageUrl": {
+    "webpageUrl": {
-            "url": "https://cheff.dev",
+      "url": "https://cheff.dev",
-            "wellKnown": "https://cheff.dev/.well-known/funding-manifest-urls"
+      "wellKnown": "https://cheff.dev/.well-known/funding-manifest-urls"
-        }
-    },
-    "projects": [{
-        "guid": "zen-browser",
-        "name": "Zen",
-        "description": "Zen is a beautiful, fast, and productive web browser. It is designed to be packed with features that make it easy to use and navigate. Zen is built on the latest Firefox engine, providing speed, privacy, and security.",
-        "webpageUrl": {
-            "url": "https://zen-browser.app"
-        },
-        "repositoryUrl": {
-            "url": "https://github.com/zen-browser/desktop",
-            "wellKnown": "https://github.com/zen-browser/desktop/blob/dev/.well-known/funding-manifest-urls"
-        },
-        "licenses": ["MPL-2.0"],
-        "tags": ["browser", "web", "desktop", "open-source"]
-    }],
-    "funding": {
-        "channels": [
-            {
-                "guid": "patreon",
-                "name": "Patreon",
-                "description": "Patreon is a membership platform that makes it easy for artists and creators to get paid.",
-                "url": "https://www.patreon.com/zen_browser",
-                "type": "other"
-            },
-            {
-                "guid": "ko-fi",
-                "name": "Ko-fi",
-                "description": "Ko-fi is a platform that allows creators to receive donations from their fans.",
-                "url": "https://ko-fi.com/zen_browser",
-                "type": "other"
-            }
-        ],
-        "plans": [
-            {
-                "guid": "licenses-and-hosting",
-                "status": "active",
-                "name": "Licenses and hosting",
-                "description": "Help me pay for the licenses and hosting of the project. This includes self-hosting build servers, cloudflare services, and software lienses.",
-                "amount": 420,
-                "currency": "EUR",
-                "frequency": "yearly",
-                "channels": ["patreon", "ko-fi"]
-            },
-            {
-                "guid": "angel-plan",
-                "status": "active",
-                "name": "Goodwill plan",
-                "description": "Pay anything you wish to show your goodwill for the project.",
-                "amount": 0,
-                "currency": "EUR",
-                "frequency": "one-time",
-                "channels": ["patreon", "ko-fi"]
-            }
-        ]
     }
+  },
+  "projects": [
+    {
+      "guid": "zen-browser",
+      "name": "Zen",
+      "description": "Zen is a beautiful, fast, and productive web browser. It is designed to be packed with features that make it easy to use and navigate. Zen is built on the latest Firefox engine, providing speed, privacy, and security.",
+      "webpageUrl": {
+        "url": "https://zen-browser.app"
+      },
+      "repositoryUrl": {
+        "url": "https://github.com/zen-browser/desktop",
+        "wellKnown": "https://github.com/zen-browser/desktop/blob/dev/.well-known/funding-manifest-urls"
+      },
+      "licenses": ["MPL-2.0"],
+      "tags": ["browser", "web", "desktop", "open-source"]
+    }
+  ],
+  "funding": {
+    "channels": [
+      {
+        "guid": "patreon",
+        "name": "Patreon",
+        "description": "Patreon is a membership platform that makes it easy for artists and creators to get paid.",
+        "url": "https://www.patreon.com/zen_browser",
+        "type": "other"
+      },
+      {
+        "guid": "ko-fi",
+        "name": "Ko-fi",
+        "description": "Ko-fi is a platform that allows creators to receive donations from their fans.",
+        "url": "https://ko-fi.com/zen_browser",
+        "type": "other"
+      }
+    ],
+    "plans": [
+      {
+        "guid": "licenses-and-hosting",
+        "status": "active",
+        "name": "Licenses and hosting",
+        "description": "Help me pay for the licenses and hosting of the project. This includes self-hosting build servers, cloudflare services, and software lienses.",
+        "amount": 420,
+        "currency": "EUR",
+        "frequency": "yearly",
+        "channels": ["patreon", "ko-fi"]
+      },
+      {
+        "guid": "angel-plan",
+        "status": "active",
+        "name": "Goodwill plan",
+        "description": "Pay anything you wish to show your goodwill for the project.",
+        "amount": 0,
+        "currency": "EUR",
+        "frequency": "one-time",
+        "channels": ["patreon", "ko-fi"]
+      }
+    ]
+  }
 }

src/components/Community.astro

@@ -19,7 +19,7 @@ const {
 
 <section
   id="Community"
-  class="relative flex w-full flex-col items-center text-start md:text-center lg:py-36 gap-6 py-12"
+  class="relative flex w-full flex-col items-center gap-6 py-12 text-start md:text-center lg:py-36"
 >
   <Description class="mb-2 text-6xl font-bold">
     <motion.span client:load {...getTitleAnimation(0.2)}>
@@ -39,9 +39,7 @@ const {
   >
     {community.description}
   </motion.p>
-  <div
+  <div class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center">
-    class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center"
-  >
     <motion.span client:load {...getTitleAnimation(0.8)}>
       <Button class:list={['px-4']} href="https://github.com/zen-browser">
         <Github class="size-4" />

src/components/Features.astro

@@ -32,7 +32,7 @@ const descriptions = Object.values(features.featureTabs).map(
 
 <section
   id="Features"
-  class="relative flex w-full flex-col text-start lg:py-36 py-12"
+  class="relative flex w-full flex-col py-12 text-start lg:py-36"
 >
   <Description class="mb-2 text-6xl font-bold">
     <motion.span client:load {...getTitleAnimation(0.2)}>
@@ -48,9 +48,7 @@ const descriptions = Object.values(features.featureTabs).map(
   <motion.p client:load {...getTitleAnimation(0.6)} className="lg:w-1/2">
     {features.description}
   </motion.p>
-  <div
+  <div class="mt-6 flex flex-col gap-6 lg:flex-row lg:justify-between lg:gap-2">
-    class="mt-6 flex flex-col gap-6 lg:flex-row lg:justify-between lg:gap-2"
-  >
     <div class="flex w-full flex-col lg:w-1/3">
       <!-- Mobile tabs -->
       <div class="flex gap-2 overflow-x-auto overflow-y-clip lg:hidden">

src/components/Footer.astro

@@ -15,11 +15,13 @@ const {
 
 <footer
   id="footer"
-  class="relative flex w-full flex-col gap-16 overflow-hidden border-t border-dark bg-dark px-4 py-12 text-paper lg:p-24 items-center"
+  class="relative flex w-full flex-col items-center gap-16 overflow-hidden border-t border-dark bg-dark px-4 py-12 text-paper lg:p-24"
   role="contentinfo"
   aria-label="Site footer"
 >
-  <div class="flex w-full flex-col items-start justify-between gap-12 container">
+  <div
+    class="container flex w-full flex-col items-start justify-between gap-12"
+  >
     <section
       class="w-full text-center lg:w-1/2 lg:text-left"
       aria-labelledby="footer-title"

src/components/ModsList.tsx

@@ -200,13 +200,13 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 w-full place-items-start gap-12 md:grid-cols-2 xl:grid-cols-3 py-6">
+      <div className="grid w-full grid-cols-1 place-items-start gap-12 py-6 md:grid-cols-2 xl:grid-cols-3">
         {paginatedMods.length > 0 ? (
           paginatedMods.map((mod) => (
             <a
               key={mod.id}
               href={`/mods/${mod.id}`}
-              className="flex flex-col w-full gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
+              className="flex w-full flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
             >
               <div className="relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 border-dark object-cover shadow-md">
                 <img

src/components/NavBar.astro

@@ -21,7 +21,7 @@ const {
 <!-- Desktop Navigation -->
 <Astronav>
   <MenuItems
-    class="relative z-20 grid w-full grid-cols-2 items-center gap-2 bg-paper py-3 lg:grid lg:grid-cols-[auto_1fr_auto] lg:py-6 container"
+    class="container relative z-20 grid w-full grid-cols-2 items-center gap-2 bg-paper py-3 lg:grid lg:grid-cols-[auto_1fr_auto] lg:py-6"
   >
     <a
       class="flex items-center gap-2 text-lg font-bold"

src/components/Sponsors.astro

@@ -21,9 +21,7 @@ const {
 <section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
   <div class="mx-auto flex flex-col text-center">
     <motion.span client:load {...getTitleAnimation(0.2)}>
-      <Description class="mb-2 text-6xl font-bold"
+      <Description class="mb-2 text-6xl font-bold">Our Sponsors</Description>
-        >Our Sponsors</Description
-      >
     </motion.span>
     <motion.span client:load {...getTitleAnimation(0.4)}>
       <Description set:html={sponsors.description} />

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

@@ -15,10 +15,10 @@ const {
 
 <Layout title={notFound.title}>
   <main
-    class="flex min-h-[70vh] container flex-col items-center justify-center gap-6 py-24 text-center"
+    class="container flex min-h-[70vh] flex-col items-center justify-center gap-6 py-24 text-center"
   >
     <Title class="text-7xl font-bold text-coral md:text-9xl">404</Title>
-    <div class="flex flex-col gap-4 items-center">
+    <div class="flex flex-col items-center gap-4">
       <Description class="text-xl md:text-2xl">
         {notFound.title}
       </Description>

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

@@ -14,45 +14,41 @@ const {
 ---
 
 <Layout title={layout.donate.title} description={layout.donate.description}>
-  <main class="pb-52 pt-36 container">
+  <main class="container pb-52 pt-36">
-    <div
+    <div class="flex flex-col items-center justify-center gap-12">
-      class="flex flex-col items-center justify-center gap-12"
+      <div class="flex flex-col gap-4 lg:text-center">
-    >
-      <div class="lg:text-center flex flex-col gap-4">
         <Description class="text-6xl font-bold">{donate.title}</Description>
         <Description class="max-w-3xl">
           {donate.description}
         </Description>
       </div>
-      <div class="grid grid-cols-1 lg:grid-cols-[1fr_1px_1fr] gap-12 text-center max-w-5xl">
+      <div
-        <div class="flex flex-col gap-4 items-center">
+        class="grid max-w-5xl grid-cols-1 gap-12 text-center lg:grid-cols-[1fr_1px_1fr]"
+      >
+        <div class="flex flex-col items-center gap-4">
           <div class="text-6xl font-bold">{donate.patreon.title}</div>
           <Description>
             {donate.patreon.description}
           </Description>
-            <Button
+          <Button
-              isPrimary
+            isPrimary
-              href="https://www.patreon.com/zen_browser"
+            href="https://www.patreon.com/zen_browser"
-              class="w-fit"
+            class="w-fit"
-            >
+          >
-              {donate.patreon.button}
+            {donate.patreon.button}
-              <ArrowRight class="size-4" />
+            <ArrowRight class="size-4" />
-            </Button>
+          </Button>
         </div>
         <hr class="hidden h-72 w-[1px] bg-dark opacity-15 lg:block" />
-        <div class="flex flex-col gap-4 items-center">
+        <div class="flex flex-col items-center gap-4">
           <div class="text-6xl font-bold">{donate.koFi.title}</div>
           <Description>
             {donate.koFi.description}
           </Description>
-            <Button
+          <Button href="https://ko-fi.com/zen_browser" isPrimary class="w-fit">
-              href="https://ko-fi.com/zen_browser"
+            {donate.koFi.button}
-              isPrimary
+            <ArrowRight class="size-4" />
-              class="w-fit"
+          </Button>
-            >
-              {donate.koFi.button}
-              <ArrowRight class="size-4" />
-            </Button>
         </div>
       </div>
     </div>

src/pages/[...locale]/mods/index.astro

@@ -18,12 +18,12 @@ const allMods = (await getAllMods()) || []
 ---
 
 <Layout title={layout.mods.title}>
-  <main class="mt-32 container 2xl:mt-32 flex flex-col gap-10">
+  <main class="container mt-32 flex flex-col gap-10 2xl:mt-32">
-    <header class="flex w-full flex-col border-dark gap-8">
+    <header class="flex w-full flex-col gap-8 border-dark">
-          <Description class="text-6xl font-bold">{mods.title}</Description>
+      <Description class="text-6xl font-bold">{mods.title}</Description>
-          <Description class="max-w-3xl">
+      <Description class="max-w-3xl">
-            {mods.description}
+        {mods.description}
-          </Description>
+      </Description>
     </header>
 
     <!-- Importing ModList component -->

src/pages/[...locale]/release-notes/index.astro

@@ -22,11 +22,11 @@ const {
 
 <Layout title={layout.releaseNotes.title}>
   <main
-    class="flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4 container"
+    class="container flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4"
   >
     <div
       id="release-notes"
-      class="py-42 flex min-h-screen flex-col justify-center w-full"
+      class="py-42 flex min-h-screen w-full flex-col justify-center"
     >
       <Description class="mt-48 text-4xl font-bold">Release Notes</Description>
       <p

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

@@ -13,9 +13,7 @@ const {
 ---
 
 <Layout title={layout.welcome.title} description={layout.welcome.description}>
-  <main
+  <main class="container">
-    class="container"
-  >
     <Features
       title1={welcome.title[0]}
       title2={welcome.title[1]}

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

@@ -37,7 +37,7 @@ if (
   )}
 >
   <main
-    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]"
+    class="xl:mt-22 container flex flex-col gap-12 py-12 xl:grid xl:min-h-[calc(100vh-12rem)] xl:grid-cols-[2fr_3fr]"
   >
     <div class="flex flex-col gap-8">
       <div>
@@ -54,7 +54,7 @@ if (
       <div>
         <Fragment set:html={whatsNewText[0].replace(/\n/g, '<br>')} />
       </div>
-      <ul class="hidden list-disc flex-col gap-2 xl:flex xl:container">
+      <ul class="hidden list-disc flex-col gap-2 xl:container xl:flex">
         <a
           href="https://github.com/zen-browser/desktop/issues/new/choose"
           target="_blank"
@@ -85,15 +85,15 @@ if (
         <SocialMediaStrip gap="6" />
       </div>
     </div>
-    
+
     <Video
-    src={whatsNewVideo}
+      src={whatsNewVideo}
-    autoplay
+      autoplay
-    loop
+      loop
-    muted
+      muted
-    playsinline
+      playsinline
-    preload="none"
+      preload="none"
-    class="rounded-3xl object-cover shadow-lg"
+      class="rounded-3xl object-cover shadow-lg"
-  />
+    />
   </main>
 </Layout>

src/release-notes/stable.json

@@ -363,9 +363,7 @@
     "version": "1.0.0-a.13",
     "date": "05/08/2024",
     "extra": "This is a smaller release to fix some bugs and improve some small details.\n\nIm going to try doing more frequent releases from now on, see how it goes.",
-    "features": [
+    "features": ["Allow to remember sidebar width even after collapsing it."],
-      "Allow to remember sidebar width even after collapsing it."
-    ],
     "fixes": [
       {
         "description": "Task Manager Icon Missing in Flatpak Version",
@@ -921,9 +919,7 @@
     "image": true,
     "workflowId": 11000317603,
     "extra": "This update addresses some significant issues with the previous release.\n\nWe appreciate your patience and support!",
-    "features": [
+    "features": ["Added a new system for handling keyboard shortcuts"],
-      "Added a new system for handling keyboard shortcuts"
-    ],
     "fixes": [
       {
         "description": "The New Tab button is not visible",
@@ -980,9 +976,7 @@
       "Enabled container tabs by default",
       "Improved Expand Tabs on Hover layout"
     ],
-    "themeChanges": [
+    "themeChanges": ["Toggle inputs will not use the themed tertiary color"],
-      "Toggle inputs will not use the themed tertiary color"
-    ],
     "breakingChanges": [
       "The keyboard shortcuts will be overriden by the defaults ones in this update"
     ],
@@ -1279,9 +1273,7 @@
         "issue": 2156
       }
     ],
-    "breakingChanges": [
+    "breakingChanges": ["Removed Show Expand Button option from settings"],
-      "Removed Show Expand Button option from settings"
-    ],
     "themeChanges": [
       "The variable '--zen-main-browser-background' will now contain the generated gradient",
       "Added the 'unread' attribute for background tabs that haven't been accessed yet"
@@ -1384,9 +1376,7 @@
         "description": "Fixed wrong aligment on glance action buttons"
       }
     ],
-    "features": [
+    "features": ["No new features, sorry"]
-      "No new features, sorry"
-    ]
   },
   {
     "version": "1.0.1-a.17",
@@ -2456,9 +2446,7 @@
     "version": "1.10.3b",
     "image": false,
     "extra": "Terribly sorry for the frequent updates, this emergency release simply updates Firefox, fixing a critical vulnerability in chromium's sandboxing system. You can read more here:\n\n<a href='https://cyberinsider.com/firefox-says-its-vulnerable-to-chromes-zero-day-used-in-espionage-attacks/'>https://cyberinsider.com/firefox-says-its-vulnerable-to-chromes-zero-day-used-in-espionage-attacks/</a>",
-    "features": [
+    "features": ["Updated Firefox to 136.0.4"],
-      "Updated Firefox to 136.0.4"
-    ],
     "workflowId": 14109635630,
     "date": "27/03/2025"
   },

src/release-notes/twilight.json

@@ -4,4 +4,4 @@
   "extra": "",
   "fixes": [],
   "features": []
-}
+}

tailwind.config.mjs

@@ -5,17 +5,17 @@ export default {
   theme: {
     container: {
       screens: {
-         sm: "100%",
+        sm: '100%',
-         md: "100%",
+        md: '100%',
-         lg: "1024px",
+        lg: '1024px',
-         xl: "1280px",
+        xl: '1280px',
       },
       padding: {
-        DEFAULT: '1rem',  
+        DEFAULT: '1rem',
-        sm: '1.5rem',       
+        sm: '1.5rem',
-        md: '1.5rem',       
+        md: '1.5rem',
-        lg: '1.5rem',       
+        lg: '1.5rem',
-        xl: '2rem',  
+        xl: '2rem',
       },
       center: true,
     },