From d6142c54de5a6bdf9b0ea02c3d35358bea68c3ff Mon Sep 17 00:00:00 2001
From: Waled Khatiz <waledkhatiz@waleds-air.lan>
Date: Fri, 30 Aug 2024 11:28:55 +1000
Subject: [PATCH 1/2] fix: Responsive design on medium windows

---
 src/components/features.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/features.tsx b/src/components/features.tsx
index dcfc642..160bc07 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -80,7 +80,7 @@ export default function Features() {
   return (
     <section className="flex-col w-full" id="features">
       <div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-16 shadow'>
-        <div className="md:w-1/2 p-5 lg:p-12">
+        <div className="p-5 lg:p-12 flex-1">
           <div className="flex p-12 flex-col justify-center">
             <h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Your Browser, your way <PaintBucket className='inline w-10 h-10'></PaintBucket></h3>
             <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>With Zen's Theme Store, you can customize your browsing experience to reflect your unique style and preferences. Choose from a wide array of themes, colors, and layouts to make Zen truly your own, transforming your browser into a personalized digital space.</p>
@@ -91,7 +91,7 @@ export default function Features() {
           </div>
         </div>
         <div className="border-t lg:border-t-0 lg:border-l h-[1px] lg:h-[unset] lg:w-[1px] mx-2"></div>
-        <div className="md:w-1/2 p-5 lg:p-12">
+        <div className="p-5 lg:p-12 flex-1">
           <div className="flex p-12 flex-col justify-center">
             <h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Community driven and Open Source <Link1Icon className='inline w-10 h-10'></Link1Icon></h3>
             <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen thrives on the contributions of its vibrant community. As an open-source project, Zen encourages collaboration and innovation, allowing users and developers alike to shape the future of the browser.</p>
@@ -144,7 +144,7 @@ export default function Features() {
         </div>
         <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-1.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
       </div>
-      <div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md lg:mx-auto bg-surface mt-36 shadow'>
+      <div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
         <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-2.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
         <div className='p-16 lg:w-1/2 flex flex-col justify-center'>
           <h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Split Views</h1>

From c97d4344ab67dada71d224888f8d7cf5806d1c52 Mon Sep 17 00:00:00 2001
From: Waled Khatiz <waledkhatiz@waleds-air.lan>
Date: Fri, 30 Aug 2024 11:48:12 +1000
Subject: [PATCH 2/2] fix: Disable flex warping on checkboxes

---
 src/components/features.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/features.tsx b/src/components/features.tsx
index 160bc07..2cd7e13 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -53,7 +53,7 @@ import { getAllThemes, ZenTheme } from '@/lib/themes';
 
 function Checkmark() {
   return (
-    <CheckIcon className="text-black rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7" />
+    <CheckIcon className="text-black rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7 flex-none" />
   );
 }