Enhance button interactions and styling for mobile

Author: Alex Front

src/App.css

@@ -1,6 +1,7 @@
 .button, .toggleButton, .githubLink {
   cursor: pointer !important;
-  z-index: 10;
+  z-index: 100;
+  position: relative;
 }
 
 .toggleButton, .githubLink {
@@ -44,10 +45,11 @@
   user-select: none;
   touch-action: manipulation;
   min-height: 36px;
+  -webkit-tap-highlight-color: transparent;
 }
 
-.button:hover {
-  background: rgba(255,255,255,0.15);
+.button:active {
+  background: rgba(255,255,255,0.2);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 }

src/App.tsx

@@ -334,7 +334,16 @@ const App: React.FC = () => {
           return (
             <button
               key={key}
-              onClick={() => setCurrentPreset(key)}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setCurrentPreset(key);
+              }}
+              onTouchEnd={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setCurrentPreset(key);
+              }}
               className={`button ${currentPreset === key ? 'active' : ''}`}
             >
               {preset.name}