🐛Fix iphone white strip (tinacms#2820)

* add extraSmall class for navbar buttons * drop width of recentPosts
kldavis4 · Jan 31, 2025 · 28107d7 · 28107d7
1 parent 078c6fe
commit 28107d7
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 = ({