Fix PostCardSkeleton widths, mobile menu transforms for compatibility…

… with smallest screens
SSTPIERRE2 · Apr 2, 2024 · 283de5a · 283de5a
1 parent f6cc81f
commit 283de5a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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 */}