[Feature]: Better usability for the DetailsList

[PQ-AJ]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

Hi,

I've used this component in our web application, and I understand that it's not designed to handle small windows or low resolutions. However, I hope the component can have better usability in a relatively cramped display.

Currently, the column width values for this component are manually specified, and I assume the overall list width is calculated based on these individual column widths. This causes the vertical scrollbar to become invisible when the display is very small (since the overall width exceeds the display width), e.g.

Is there a way to make users aware of interactive components on the right side, such as the vertical scrollbar?

Thanks,
AJ

Have you discussed this feature with our team

Sean Monahan

Additional context

No response

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[behowell]

Hi @PQ-AJ, since this is more of a question about how to configure DetailsList, rather than a specific bug report or feature request, I'm going to convert it to a discussion.

[behowell]

Here are some simple suggestions:

• Use isCollapsible on the columns to hide them when there is insufficient space. It's used in some of the documentation examples, such as https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist
• Adjust the column widths in your own code, based on screen size.
• Use overflow-x: auto to make sure the vertical scrollbar doesn't get pushed over by extra-wide content. And possibly use display: flex or grid on the container, if there are other items to the right that you want to control how much space they get.

I have limited experience with DetailsList myself; perhaps others have better ideas!