[Bug]: horizontal field: label and values are not vertically aligned

[barbalex]

Library

React Northstar / v0 (@fluentui/react-northstar)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
    Memory: 68.75 GB / 95.75 GB
  Browsers:
    Edge: Chromium (121.0.2277.98)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://codesandbox.io/p/sandbox/affectionate-beaver-8ddjk8?file=%2Fsrc%2FApp.js

Bug Description

Actual Behavior

Label and value are not vertically aligned: The label is higher up than the value in the input. This is visible on your webpage: https://react.fluentui.dev/?path=/docs/components-field--default#horizontal-orientation. Just enter a value in the input, then scroll the content up until the label disappears: the value will still be partly visible. The provided reproduction is not a real one - it is only so that this issue is not auto closed. By the way: Repreductions are hard when you dont link to an existing template. And codesandbox seems to loose free usage.

Expected Behavior

Label and values should vertically align.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

Correcting the issue seems to be as simple as adding align-items: center to the Field grid.

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[behowell]

Hi @barbalex, the current visuals are by design. I'll follow up with our design team to see if they want to change Field's label alignment.

[mltejera]

Is there a way to easily test the other small and large sizes?