From 283de5af38a2e97d3126c0720e129af708fb398f Mon Sep 17 00:00:00 2001
From: "Steve St.Pierre" <stephencstpierre@gmail.com>
Date: Tue, 2 Apr 2024 15:49:17 -0400
Subject: [PATCH] Fix PostCardSkeleton widths, mobile menu transforms for
 compatibility with smallest screens

---
 packages/web/components/MobileMenu/MobileMenu.tsx           | 4 ++--
 .../web/components/PostCardSkeleton/PostCardSkeleton.tsx    | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web/components/MobileMenu/MobileMenu.tsx b/packages/web/components/MobileMenu/MobileMenu.tsx
index c4acca5..15cbcc7 100644
--- a/packages/web/components/MobileMenu/MobileMenu.tsx
+++ b/packages/web/components/MobileMenu/MobileMenu.tsx
@@ -73,9 +73,9 @@ const MobileMenu = () => {
                     style={{
                       transform:
                         isMobileMenuOpen ? 'translateX(0%)' : (
-                          'translateX(-100%)'
+                          'translateX(-125%)'
                         ),
-                      transition: 'transform 300ms',
+                      transition: 'transform 350ms',
                       transitionDelay:
                         isMobileMenuOpen ? `${index * 100}ms` : '0ms',
                     }}
diff --git a/packages/web/components/PostCardSkeleton/PostCardSkeleton.tsx b/packages/web/components/PostCardSkeleton/PostCardSkeleton.tsx
index 59d0bc3..e66f213 100644
--- a/packages/web/components/PostCardSkeleton/PostCardSkeleton.tsx
+++ b/packages/web/components/PostCardSkeleton/PostCardSkeleton.tsx
@@ -5,7 +5,7 @@ const PostCardSkeleton = () => {
   return (
     <section className={styles.wrapper}>
       <h2>
-        <Skeleton height={50} width={300} />
+        <Skeleton height={50} width="85%" />
       </h2>
 
       {/* Publish date */}
@@ -15,12 +15,12 @@ const PostCardSkeleton = () => {
 
       {/* Tag list */}
       <div>
-        <Skeleton height={20} width={250} />
+        <Skeleton height={20} width="60%" />
       </div>
 
       {/* Abstract */}
       <p>
-        <Skeleton height={100} width={400} />
+        <Skeleton height={100} />
       </p>
 
       {/* Read more */}