From 06df8744a0b70f4bb3d8c6b25bf9bcd615ee4ec4 Mon Sep 17 00:00:00 2001
From: gkxk <sxlgkxk@gmail.com>
Date: Tue, 20 Oct 2026 09:41:20 +0800
Subject: [PATCH] style(controls): ensure primary play button is compactly
 constrained on short screens

- Add .btn-play-primary media query in index.css to enforce 2.25rem (36px) on height <= 520px
- Prevent wider screen landscape viewports from overriding height constraints

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 src/components/Controls.tsx |  2 +-
 src/index.css               | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
index a300b72..c112da7 100644
--- a/src/components/Controls.tsx
+++ b/src/components/Controls.tsx
@@ -134,7 +134,7 @@ export const Controls: React.FC<ControlsProps> = ({
         <button
           onClick={onTogglePlay}
           title="播放 / 暂停 [空格键]"
-          className="w-10 h-10 sm:w-14 sm:h-14 short:w-9 short:h-9 rounded-full bg-neutral-900 hover:bg-black dark:bg-neutral-100 dark:hover:bg-white text-white dark:text-black flex items-center justify-center shadow-lg active:scale-95 transition-all"
+          className="btn-play-primary w-10 h-10 sm:w-14 sm:h-14 rounded-full bg-neutral-900 hover:bg-black dark:bg-neutral-100 dark:hover:bg-white text-white dark:text-black flex items-center justify-center shadow-lg active:scale-95 transition-all"
         >
           {isPlaying ? (
             <Pause className="w-4 h-4 sm:w-5 sm:h-5 fill-current" />
diff --git a/src/index.css b/src/index.css
index 9c6bfbd..d611ea0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -72,6 +72,17 @@ input[type="range"]::-moz-range-thumb {
 
 /* Short / Landscape screen optimizations (< 520px viewport height) */
 @media (max-height: 520px) {
+  .btn-play-primary {
+    width: 2.25rem !important; /* 36px */
+    height: 2.25rem !important;
+  }
+
+  .short\:w-9 {
+    width: 2.25rem !important;
+  }
+  .short\:h-9 {
+    height: 2.25rem !important;
+  }
   .short\:py-0\.5 {
     padding-top: 0.125rem !important;
     padding-bottom: 0.125rem !important;