gkxk/focus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(controls): ensure primary play button is compactly constrained on short screens

Browse Source 
- 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>
This commit is contained in:
gkxk
2026-10-20 09:41:20 +08:00
parent 47cae39718
commit 06df8744a0
2 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Controls.tsx
View File

@@ -134,7 +134,7 @@ export const Controls: React.FC<ControlsProps> = ({
<button <button
onClick={onTogglePlay} onClick={onTogglePlay}
title="播放 / 暂停 [空格键]" 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 ? ( {isPlaying ? (
<Pause className="w-4 h-4 sm:w-5 sm:h-5 fill-current" /> <Pause className="w-4 h-4 sm:w-5 sm:h-5 fill-current" />

11
src/index.css
View File

@@ -72,6 +72,17 @@ input[type="range"]::-moz-range-thumb {
/* Short / Landscape screen optimizations (< 520px viewport height) */ /* Short / Landscape screen optimizations (< 520px viewport height) */
@media (max-height: 520px) { @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 { .short\:py-0\.5 {
padding-top: 0.125rem !important; padding-top: 0.125rem !important;
padding-bottom: 0.125rem !important; padding-bottom: 0.125rem !important;