hit area expanded, leaving the elements

apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss

@@ -4,8 +4,7 @@
 
 .grw-page-path-nav-layout :global {
   .grw-page-path-nav-copydropdown {
-    visibility: hidden; /* 通常時は非表示（スペースは維持） */
-    // display: none;
+    visibility: hidden;
     @include bs.media-breakpoint-down(md) {
       display: block;
     }
@@ -16,9 +15,7 @@
   &:global {
     &:hover {
       .grw-page-path-nav-copydropdown {
-        visibility: visible; /* ホバー時に表示 */
-        // opacity: 1;
-        // display: block;
+        visibility: visible;
       }
     }
   }

apps/app/src/components/Common/PagePathNav/PagePathNavLayout.tsx

@@ -1,4 +1,3 @@
-// import type { ReactNode } from 'react';
 import React, { useState } from 'react';
 
 import dynamic from 'next/dynamic';
@@ -41,16 +40,21 @@ export const PagePathNavLayout = (props: Props): JSX.Element => {
 
   const copyDropdownId = `copydropdown-${pageId}`;
 
-  const [, setIsHovered] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
   const [hideTimeout, setHideTimeout] = useState<NodeJS.Timeout | null>(null);
 
   const handleMouseEnter = () => {
-    if (hideTimeout) clearTimeout(hideTimeout); // 非表示タイマーをリセット
-    setIsHovered(true); // ボタンを表示
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+      setHideTimeout(null);
+    }
+    setIsHovered(true);
   };
 
   const handleMouseLeave = () => {
-    const timeout = setTimeout(() => setIsHovered(false), 3000); // 3秒後にボタンを非表示
+    const timeout = setTimeout(() => {
+      setIsHovered(false);
+    }, 1000);
     setHideTimeout(timeout);
   };
 
@@ -70,7 +74,7 @@ export const PagePathNavLayout = (props: Props): JSX.Element => {
               <span className="badge text-bg-secondary ms-1 me-1">WIP</span>
             )}
             <span
-              className=" grw-page-path-nav-copydropdown"
+              className={`grw-page-path-nav-copydropdown ${isHovered ? 'visible' : ''}`}
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
             >

apps/app/src/components/Common/PagePathNavTitle/PagePathNavTitle.module.scss

@@ -2,9 +2,4 @@
 
 .grw-page-path-nav-title :global {
   min-height: 75px;
-  padding-right: 70px;
-}
-
-.grw-page-path-nav-title:hover {
-  background-color: rgba(0, 0, 0, 0.05); /* ホバー範囲を視覚的に確認したい場合の背景 */
 }