fix(ffe-form): stabler telefon-inputs over hverandre på små skjermer #1934
Conversation
| @@ -1,5 +1,11 @@ | |||
| .ffe-phone-number { | |||
| &__input-group { | |||
| @media (min-width: @breakpoint-sm) { | |||
There was a problem hiding this comment.
burde vi bruke container queries istellet for media queries når vi liks er i gang. Det har veldig fint browserstøtte. Hvis man har 3 kolumner på desktop feks.
There was a problem hiding this comment.
Det kan godt være fornuftigere ja. Men kanskje vi kan gjøre den forbedringen i en ny PR, så vi kan se på om breakpointene fortsatt gir mening i den konteksten
| @@ -1,5 +1,11 @@ | |||
| .ffe-phone-number { | |||
| &__input-group { | |||
| @media (min-width: @breakpoint-sm) { | |||
| display: flex; | |||
There was a problem hiding this comment.
Når vi har flex burde vi ha flex-wrap for og klare zoom?
There was a problem hiding this comment.
Usikker på hva du mener? Flex-wrap er default/nowrap fordi inputene skal ligge ved siden av hverandre. De tåler zoom godt på større skjermer så vidt jeg har kunnet teste meg frem til.
| margin-right: @ffe-spacing-sm; | ||
|
|
||
| @media (min-width: @breakpoint-sm) { | ||
| max-width: 60px; |
There was a problem hiding this comment.
bredde i rem? tåler den alle zoom nivåer?
|
Burde det |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-1934.westeurope.2.azurestaticapps.net |
antidecaf
force-pushed
the
phone-number-zoom-fix
branch
from
b953cdd to
2e098a9
Compare
inputene stables i høyden på små skjermer, for å unngå overflow-issues ved zoom og tekstskalering
antidecaf
force-pushed
the
phone-number-zoom-fix
branch
from
2e098a9 to
8d1aa41
Compare
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-1934.westeurope.2.azurestaticapps.net |
1 similar comment
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-1934.westeurope.2.azurestaticapps.net |
Beskrivelse
Inputene for landskode og telefonnummer stables i høyden på små skjermer, for å unngå overflow-issues ved zoom og tekstskalering.
Før:
Etter:
Motivasjon og kontekst
Fixes #1731
Testing
Testet i component-overview