fix(ui): application pane layer issue

sawaYch · Apr 9, 2024 · 5f2fb36 · 5f2fb36
1 parent 3098be9
commit 5f2fb36
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -103,7 +103,7 @@ const ApplicationMenu = ({
       <motion.div
         id="application-pane-overlay"
         className={cn(
-          '!z-[58] !overflow-y-auto bottom-0 top-0 w-screen py-12 left-0 bg-dracula-darker',
+          '!z-[58] bottom-0 top-0 w-screen py-12 left-0 bg-dracula-darker',
           {
             'pb-24': !isIOS,
           }
@@ -145,7 +145,7 @@ const ContentWrapper = forwardRef<
     id="main"
     ref={ref}
     className={cn(
-      '!z-[60] flex flex-col items-center w-dvw flex-auto overflow-x-hidden min-h-dvh relative',
+      'z-[40] flex flex-col items-center w-dvw flex-auto overflow-x-hidden min-h-dvh relative',
       {
         '!touch-none !overflow-y-hidden': isOpen,
       }

diff --git a/src/components/skill-card.tsx b/src/components/skill-card.tsx
@@ -104,7 +104,7 @@ const SkillCard = ({ className }: SkillCardProps) => (
         className
       )}
     >
-      <div className="grid grid-cols-1 gap-x-24 gap-y-24 sm:grid-cols-2 sm:w-2/3">
+      <div className="grid grid-cols-1 gap-x-24 gap-y-24 sm:grid-cols-2 md:w-2/3">
         {skillData.map((data) => (
           <SkillCardItem key={data.title} {...data} />
         ))}

diff --git a/src/pages/artworks.tsx b/src/pages/artworks.tsx
@@ -125,7 +125,10 @@ const ArtworksPage = ({
         imageHeight="480"
         imageWidth="1200"
       />
-      <div className="flex items-center justify-center pt-10">
+      <div
+        id="artwork-page-heading"
+        className="flex items-center justify-center pt-10"
+      >
         <div className="w-fit">
           <div className="-mx-10 h-[1.5rem] -mb-8 bg-dracula-buffy-400/30 -skew-x-12 backdrop-blur-sm" />
           <div className="flex">
@@ -138,10 +141,11 @@ const ArtworksPage = ({
         </div>
       </div>
       <motion.div
+        id="artwork-page-container"
         variants={variants}
         initial="closed"
         animate="open"
-        className="grid grid-cols-2 gap-2 px-10 pb-10 sm:grid-cols-4"
+        className="grid grid-cols-2 gap-2 px-10 mb-20 sm:grid-cols-4"
       >
         {data &&
           data.map((it) => (

diff --git a/src/pages/gallery.tsx b/src/pages/gallery.tsx
@@ -136,7 +136,7 @@ const GalleryPage = ({
         variants={variants}
         initial="closed"
         animate="open"
-        className="grid grid-cols-2 gap-2 px-10 pb-10 sm:grid-cols-4"
+        className="grid grid-cols-2 gap-2 px-10 mb-20 sm:grid-cols-4"
       >
         {data &&
           data.map((it) => (