From 2e842cd3e33b5f9f22a7b3bd40e7cedb11f98ea4 Mon Sep 17 00:00:00 2001
From: jasinco <jasinc90@gmail.com>
Date: Wed, 11 Jun 2025 00:34:04 +0800
Subject: [PATCH] Test Fix the showing of zone block

---
 src/Zone.tsx | 33 +++++++++++++++------------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/Zone.tsx b/src/Zone.tsx
index 9f6d658..ae69878 100644
--- a/src/Zone.tsx
+++ b/src/Zone.tsx
@@ -2,16 +2,15 @@ import { useState } from 'react'
 
 export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
   const [toggle, setToggle] = useState(false)
-  
+
   return (
     <>
       {/* Backdrop with fade animation */}
-      <div 
-        className={`fixed inset-0 z-10 backdrop-blur-sm transition-all duration-300 ${
-          toggle 
-            ? 'bg-black/50 opacity-100 pointer-events-auto' 
-            : 'bg-black/0 opacity-0 pointer-events-none'
-        }`}
+      <div
+        className={`fixed inset-0 z-10 backdrop-blur-sm transition-all duration-300 ${toggle
+          ? 'bg-black/50 opacity-100 pointer-events-auto'
+          : 'bg-black/0 opacity-0 pointer-events-none'
+          }`}
         onClick={() => setToggle(false)}
       />
 
@@ -21,15 +20,15 @@ export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
         w-[min(80dvw,400px)] bg-zinc-800 
         rounded-t-3xl shadow-2xl border-t border-zinc-600
         transition-all duration-500 ease-out
-        ${toggle ? 'h-[45dvh]' : 'h-16'}
+        ${toggle ? 'h-90' : 'h-16'}
       `}>
-        
+
         {/* Drawer handle/button */}
         <div className="relative">
           {/* Visual handle indicator */}
           <div className="w-12 h-1 bg-zinc-500 rounded-full mx-auto mt-3 mb-2" />
-          
-          <button 
+
+          <button
             onClick={() => setToggle(!toggle)}
             className="w-full py-3 px-6 text-white font-medium text-lg
                      hover:bg-zinc-700 transition-colors duration-200
@@ -45,8 +44,7 @@ export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
         {/* Menu content with staggered animations */}
         <div className={`
           px-6 pb-6 overflow-hidden
-          transition-all duration-500 ease-out
-          ${toggle ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'}
+          transition-all duration-500 ease-out h-fit
         `}>
           <div className="grid gap-4 pt-4">
             {[
@@ -57,16 +55,15 @@ export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
               <button
                 key={key}
                 onClick={() => { setZone(key); setToggle(false) }}
-                className={`
+                className="
                   w-full py-4 px-6 bg-zinc-700 hover:bg-zinc-600 
                   rounded-xl text-white text-lg font-medium
                   flex items-center gap-4
                   transform transition-all duration-300 ease-out
                   hover:scale-105 hover:shadow-lg
                   active:scale-95
-                  ${toggle ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}
-                `}
-                style={{ 
+                "
+                style={{
                   transitionDelay: toggle ? delay : '0ms'
                 }}
               >
@@ -79,4 +76,4 @@ export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
       </div>
     </>
   )
-}
\ No newline at end of file
+}