Page MenuHomePhabricator

[web] Make `Input` component `box-sizing: border-box;`
ClosedPublic

Authored by atul on Mar 23 2022, 11:56 AM.
Tags
None
Referenced Files
F3737607: D3502.id10695.diff
Thu, Jan 9, 8:19 AM
F3737606: D3502.id10694.diff
Thu, Jan 9, 8:19 AM
F3737604: D3502.id10625.diff
Thu, Jan 9, 8:19 AM
F3737594: D3502.id.diff
Thu, Jan 9, 8:18 AM
F3737544: D3502.diff
Thu, Jan 9, 8:09 AM
F3728545: D3502.diff
Wed, Jan 8, 9:57 PM
Unknown Object (File)
Nov 18 2024, 12:50 AM
Unknown Object (File)
Nov 16 2024, 10:21 PM

Details

Summary

Noticed width of Input in LoginForm was behaving weirdly. Found this: https://stackoverflow.com/a/628912, and it seems like box-sizing: border-box is what we want for the Input component.

Test Plan

Input looks right in the context of LoginForm. I will look at other instances of Input in web to make sure that things continue to look as expected before landing.

Diff Detail

Repository
rCOMM Comm
Branch
master
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

atul published this revision for review.Mar 23 2022, 11:56 AM

cc @benschac I think you probably have the most context on this sort of CSS thing, so wondering what you think of making this change?

Setting @benschac as a blocking reviewer is a good way to make sure he takes a look

Normally the kind of thing I'd apply to every element in a CSS reset or something similar. Because we don't have a reset for web doing something like this:

*, *:before, *:after {
   box-sizing: border-box;
}

Would probably change the layout pretty dramatically. Makes sense why input fields were looking weird.

This revision is now accepted and ready to land.Mar 24 2022, 5:37 AM
This revision now requires review to proceed.Mar 24 2022, 10:31 AM

Makes sense to me. Agree that applying it in a CSS reset would be better, but I don't think we can prioritize that right now – I imagine there would be a lot of "fallout" to a change like that

This revision is now accepted and ready to land.Mar 24 2022, 6:05 PM
This revision was landed with ongoing or failed builds.Mar 25 2022, 8:21 AM
This revision was automatically updated to reflect the committed changes.