feat: enhance mobile button usability; adjust padding, opacity, and disable hover effects for better touch interaction

public/style.css

@@ -156,9 +156,14 @@ h1 {
     .theme-toggle {
         top: 12px;
         right: 12px;
-        padding: 6px 10px;
+        padding: 12px 16px;
         font-size: 0.8rem;
         border-radius: 6px;
+        min-width: 44px;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 }
 
@@ -265,9 +270,10 @@ h1 {
 @media (max-width: 480px) {
     .copy-btn,
     .open-btn {
-        padding: 3px 6px;
+        padding: 8px 12px;
         font-size: 0.75rem;
         top: 6px;
+        border-radius: 8px;
     }
     
     .copy-btn {
@@ -278,16 +284,21 @@ h1 {
         right: 6px;
     }
     
-    /* Show buttons on mobile since hover doesn't work well */
+    /* Show buttons more prominently on mobile since hover doesn't work well */
     .image-container .copy-btn,
     .image-container .open-btn {
-        opacity: 0.7;
+        opacity: 0.9;
     }
     
     .image-container:hover .copy-btn,
     .image-container:hover .open-btn {
         opacity: 1;
     }
+    
+    /* Disable hover scale effect on touch devices */
+    .image-container:hover {
+        transform: none;
+    }
 }
 
 /* Desktop hover behavior - only applies when not on mobile */