Fluentui: Panel padding

[paylord]

Environment Information

• __Package version(s)__: 7.7.1
• __Browser and OS versions__: n/a

Please provide a reproduction of the bug in a codepen:

See const sharedPaddingStyles line 157 in Panel.styles.ts

Actual behavior:

Using PanelType: smallFixedFar it is a fixed width of 340px.

As the screen size changes the padding changes from 32px to 40px.

It does not seem to make sense to adjust the padding as screen width changes for a fixed width panel?

Expected behavior:

Maintain padding while panel is fixed width.

Priorities and help requested:

Are you willing to submit a PR to fix? I am not clear if there is some other reason for the change?

Requested priority: Normal

Products/sites affected: SPFx, Panels

[khmakoto]

@paylord thanks for filing this issue!

@kkjeer @micahgodbolt @Jahnp what do you think about this? Seems like something reasonable but I would like to know what was the original reasoning for this before making any changes.

[micahgodbolt]

@khmakoto the main question is if we are to spec with our designs or not. If we are to spec, then it's a design question if they want to make that change. If we aren't to spec, we want to align. Ping me if you need the link to figma.

[khmakoto]

@micahgodbolt if you could share those figma files with me it would be great. Thanks!

[khmakoto]

@micahgodbolt I've checked the figma files and the current implementation seems to be to spec with our designs. Do you know what's the process moving forward in terms of engaging with design to ask this question?

[micahgodbolt]

I usually would pull @betrue-final-final in for these questions. What was the logic in changing the internal padding of a fixed width panel at different breakpoints. I'm guessing this causes an unnecessary content reflow.

[betrue-final-final]

Actually it’s Christopher Wymer. I’ll contact him elsewhere as I don’t know his tag here.

[betrue-final-final]

It should not change size. Make it match the current toolkit, which I believe is 16px.

[msft-github-bot]

:tada:This issue was addressed in #9825, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[paylord]

Awesome - thanks all :)