ux: optimize mobile search result tap responsiveness and drawer closing animation smoothness

webapp/tipitaka-web/src/components/layout/NavDrawer.tsx

@@ -48,9 +48,17 @@ const NavDrawer: React.FC = () => {
   }, [activeTab, currentVolume]);
 
   const jumpToPage = (volumeNumber: number, pageNum: number) => {
-    setVolume(volumeNumber);
-    setPage(pageNum);
-    if (window.innerWidth < 1024) setNavOpen(false);
+    if (window.innerWidth < 1024) {
+      setNavOpen(false);
+      // Delay state updates to let the drawer slide-out animation run smoothly on mobile
+      setTimeout(() => {
+        setVolume(volumeNumber);
+        setPage(pageNum);
+      }, 250);
+    } else {
+      setVolume(volumeNumber);
+      setPage(pageNum);
+    }
   };
 
   // Debounced suggestion fetch
@@ -314,10 +322,17 @@ const NavDrawer: React.FC = () => {
                     {results.map((res, i) => {
                       const vol = volumes.find(v => v.id === res.volume_id);
                       return (
-                        <button
+                        <div
                           key={i}
+                          role="button"
+                          tabIndex={0}
                           onClick={() => vol && jumpToPage(vol.volume_number, res.page_number)}
-                          className={`w-full text-left p-3 rounded-xl border ${s.border} ${s.tab} hover:border-[#c8860a] hover:shadow-sm transition-all`}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              vol && jumpToPage(vol.volume_number, res.page_number);
+                            }
+                          }}
+                          className={`w-full text-left p-3 rounded-xl border ${s.border} ${s.tab} hover:border-[#c8860a] hover:shadow-sm transition-all cursor-pointer touch-action-manipulation`}
                         >
                           <div className="text-[10px] font-bold text-[#c8860a] mb-1">
                             เล่ม {vol?.volume_number} • หน้า {res.page_number}
@@ -326,7 +341,7 @@ const NavDrawer: React.FC = () => {
                             className="text-xs text-[#aaa] line-clamp-3 leading-relaxed"
                             dangerouslySetInnerHTML={{ __html: res.snippet }}
                           />
-                        </button>
+                        </div>
                       );
                     })}
                   </div>