fix: improve responsiveness of buttons and formfields
- Vorherrschende Sprache
- TypeScript
- Sterne
- 1
- Forks
- 10
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
## Description
The form layout in `src/app/findmysgpa/sgpaform.tsx` and `src/app/findmycgpa/cgpaform.tsx` is not responsive across all screen sizes and is poorly styled with arbitrary, hard-coded widths, spacing and a lack of proper `flex` or `grid` layout rules.
## Steps to reproduce
- Visit the /findmycgpa` or `/findmysgpa` pages on the [deployed site](https://mygpa.vercel.app) or a local instace.
- Open your browser dev tools
- Open device / responsive mode and play around with different screen resolutions (particularly mobile, iPad and larger monitor sizes) to see the inconsistencies.
## Expected Behaviour
- A well designed and styled approach to the forms with inputs, labels and buttons sized and spaced consistently and predictably, retain the same 3 column layout across all screen sizes
- Consistency and no loss of visual appeal across all screen sizes ranging from mobile (<= 360×640) to larger screens (>= 1920×1080)
## Images / Videos
Beitragsleitfaden
Rechercherichtung
Start with src/app/findmysgpa/sgpaform.tsx and src/app/findmycgpa/cgpaform.tsx, then inspect /findmycgpa and /findmysgpa in the deployed site or a local instance using browser responsive mode. Compare mobile, iPad and large-screen layouts while locating the hard-coded widths and spacing. Done means consistent input, label and button sizing, spacing and a retained three-column layout from 360×640 through 1920×1080.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- next.js, tailwindcss, typescript
- Bereich
- design, frontend, web-dev
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100