Fix mobile safe area and button active state

hankhsu1996 · claude · hankhsu1996 · commit c5ae913ec89d · 2026-01-01T15:35:50.000-08:00
- Add viewport-fit=cover for safe area CSS to work - Disable button brightness filter on touch devices 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/web/index.html b/web/index.html
@@ -2,7 +2,7 @@
 <html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 
     <!-- Primary Meta Tags -->
     <title>Blackjack Basic Strategy</title>
diff --git a/web/src/app.css b/web/src/app.css
@@ -17,4 +17,12 @@
   * {
     -webkit-tap-highlight-color: transparent;
   }
+
+  /* Disable button active state darkening on touch devices */
+  @media (hover: none) {
+    .btn:active:not(:focus-visible) {
+      --tw-brightness: none;
+      filter: none;
+    }
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -17,4 +17,12 @@`
`17`	`17`	`* {`
`18`	`18`	`-webkit-tap-highlight-color: transparent;`
`19`	`19`	`}`
	`20`	`+`
	`21`	`+ /* Disable button active state darkening on touch devices */`
	`22`	`+ @media (hover: none) {`
	`23`	`+ .btn:active:not(:focus-visible) {`
	`24`	`+ --tw-brightness: none;`
	`25`	`+ filter: none;`
	`26`	`+ }`
	`27`	`+ }`
`20`	`28`	`}`