Skip to content

Adjust the styles of the converter tools #1580

@zoglo

Description

@zoglo

Description

TL;DR - Migration to the relearn theme removed input styles so user agent stylesheets take over. iOS 18.4.1 adds new styles with even more prominent borders due to a11y I assume:

Image

Two things that need to be fixed:

  1. The inline-size width for the particular inputs does not work on safari anymore on mobile and expands. The .env-converter should have a max-width: 600px and a width: 100% now.

  2. The label could use a clip-path polygon. That was left out for simplicity but the original idea came from:
    https://www.beercss.com/#:~:text=Label-,Custom%20inputs,-code. I'd rather remove the floating label nowadays (simplicity + a11y vs. "looks cool") -> https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions