From 38d3014104d7e1fecb299ec4d96823bb8980a5d3 Mon Sep 17 00:00:00 2001
From: Ryan Hamilton <ryanehamil@outlook.com>
Date: Fri, 25 Jul 2025 17:39:23 +0000
Subject: [PATCH] feat: enhance mobile button usability; adjust padding,
 opacity, and disable hover effects for better touch interaction

---
 public/style.css | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/public/style.css b/public/style.css
index f642c8f..e5b182f 100644
--- a/public/style.css
+++ b/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 */