Make game creation wizard fit viewport without scrolling

Replace scrollable form content with responsive sizing that
automatically scales elements to fit available viewport height.

CSS improvements:
- Disable scrolling: overflow-y:auto → overflow:hidden in form-content
- Implement fluid typography with clamp() for titles, labels, buttons
- Add responsive spacing using clamp() for margins and padding
- Scale progress dots from 10px-16px based on viewport height
- Reduce button dimensions (60px min-width, 36px min-height)
- Enable element shrinking with flex-shrink:1 and min-height:0

Component cleanup:
- Remove auto-focus useEffect from Player1/2/3Step components
- Prevents unwanted layout shifts on wizard mount

Benefits:
- All elements visible without scrolling
- Responsive design scales smoothly across viewport sizes
- Cleaner UX with no scrollbars in form wizard
- Better space utilization on small screens
This commit is contained in:
Frank Schwenk
2025-11-07 14:30:39 +01:00
parent 076d6ced36
commit 99be99d120
4 changed files with 30 additions and 36 deletions

View File

@@ -14,13 +14,6 @@ export const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue
const [filteredNames, setFilteredNames] = useState(playerNameHistory);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
const el = inputRef.current;
if (el) {
el.focus();
}
}, []);
useEffect(() => {
if (!player3) {
setFilteredNames(playerNameHistory);