From 28107d706d65c297d1806a41a35291e41e5b070d Mon Sep 17 00:00:00 2001
From: "Josh Berman [SSW]" <137844305+joshbermanssw@users.noreply.github.com>
Date: Fri, 31 Jan 2025 17:05:36 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9BFix=20iphone=20white=20strip=20(#28?=
 =?UTF-8?q?20)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add extraSmall class for navbar buttons

* drop width of recentPosts
---
 components/AppRouterMigrationComponents/AppNavBar.tsx | 2 +-
 components/blocks/Container.tsx                       | 4 ++--
 components/blocks/RecentPosts/RecentPosts.tsx         | 6 +++---
 components/ui/Button.tsx                              | 3 ++-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/AppRouterMigrationComponents/AppNavBar.tsx b/components/AppRouterMigrationComponents/AppNavBar.tsx
index 7845373a8b..ea955546c3 100644
--- a/components/AppRouterMigrationComponents/AppNavBar.tsx
+++ b/components/AppRouterMigrationComponents/AppNavBar.tsx
@@ -144,7 +144,7 @@ export function AppNavBar({ sticky = true }) {
                 <Button
                   key={index}
                   color={item.color as ValidColors}
-                  size="small"
+                  size="extraSmall"
                   onClick={() => openModal(item.modal)}
                 >
                   {item.icon2 && iconMapping[item.icon2] && (
diff --git a/components/blocks/Container.tsx b/components/blocks/Container.tsx
index 7676c35481..fc51d5f543 100644
--- a/components/blocks/Container.tsx
+++ b/components/blocks/Container.tsx
@@ -17,8 +17,8 @@ export const Container = ({
       <style jsx>{`
         .container {
           margin: 0 auto;
-          padding: 0 var(--container-padding);
-          width: 100%;
+          padding: 0 20px;
+          
 
           @media (min-width: 800px) {
             width: 80%;
diff --git a/components/blocks/RecentPosts/RecentPosts.tsx b/components/blocks/RecentPosts/RecentPosts.tsx
index baabc8081d..594815d434 100644
--- a/components/blocks/RecentPosts/RecentPosts.tsx
+++ b/components/blocks/RecentPosts/RecentPosts.tsx
@@ -10,7 +10,7 @@ export const RecentPostsBlock = ({ data, index, recentPosts }) => {
       key={'recent-posts-' + index}
       className={'bg-white relative z-10 py-20 lg:py-28'}
     >
-      <Container width="wide">
+      <Container width="narrow">
         {data.title && (
           <div className="flex items-center mb-12 lg:mb-14 gap-6">
             <h3 className="font-tuner flex-shrink-0 inline-block mx-auto text-center text-3xl lg:text-4xl lg:leading-tight bg-gradient-to-br from-blue-200 via-blue-300 to-blue-500 bg-clip-text text-transparent">
@@ -19,12 +19,12 @@ export const RecentPostsBlock = ({ data, index, recentPosts }) => {
             <hr className="my-0" />
           </div>
         )}
-        <div className="w-full flex flex-wrap gap-12 lg:gap-16">
+        <div className= "flex flex-wrap gap-12 lg:gap-16">
           {recentPosts.edges.map(({ node: post }) => {
             const slug = post._sys.filename;
             return (
               <DynamicLink key={slug} href={`/blog/${slug}`} passHref>
-                <div className="group flex-1 flex flex-col gap-6 items-start min-w-[24rem]">
+                <div className="group flex-1 flex flex-col gap-6 items-start min-w-[20rem]">
                   <h3 className="font-tuner inline-block text-3xl lg:text-4xl lg:leading-tight bg-gradient-to-br from-blue-700/70 via-blue-900/90 to-blue-1000 group-hover:from-orange-300 group-hover:via-orange-500 group-hover:to-orange-700 bg-clip-text text-transparent">
                     {post.title}
                   </h3>
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 7917affcd4..7de0d21f89 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   color?: 'white' | 'blue' | 'orange' | 'seafoam' | 'ghost' | 'ghostBlue';
-  size?: 'large' | 'small' | 'medium';
+  size?: 'large' | 'small' | 'medium' | 'extraSmall';
   className?: string;
   href?: string;
   type?: 'button' | 'submit' | 'reset';
@@ -38,6 +38,7 @@ const sizeClasses = {
   large: 'px-8 pt-[14px] pb-[12px] text-lg font-medium',
   medium: 'px-6 pt-[12px] pb-[10px] text-base font-medium',
   small: 'px-5 pt-[10px] pb-[8px] text-sm font-medium',
+  extraSmall: 'px-4 pt-[8px] pb-[6px] text-xs font-medium',
 };
 
 export const Button = ({