[Bug]: Stored Column width is not reflecting in DetailsList Column

[nishila2]

Package

react

Package version

8.124.0

React version

18.3.1

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 9.46 GB / 31.71 GB
  Browsers:
    Chrome: 143.0.7499.170
    Edge: Chromium (143.0.3650.75)
    Firefox: 145.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.26100.7309
  npmPackages:
    @fluentui/react: 8.124.0 => 8.125.3
    @fluentui/react-components: 9.72.2 => 9.72.9
    @types/react: 18.3.26 => 18.3.27
    @types/react-dom: 18.3.7 => 18.3.7
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1

Current Behavior

I added an onColumnResize handler to ShimmeredDetailsList. It is doing its job by storing the new width in session storage. I acquire those cached values from the session storage during the second render of this list to show it in a scaled width. It works when there is no horizontal scrollbar. Unfortunately, when there is a scrollbar, it automatically adjusts its width. I need to resize, but it's automatically adjusting the width.

So, my issue is, is this behavior as expected, or is there any property I am missing in IColumn?

I think the problem is when layoutMode={DetailsListLayoutMode.justified}

Expected Behavior

If a value for width exists, column width should not be automatically changed.

Reproduction

https://codepen.io/nishil-athikkal/pen/JoKXGJJ?editors=0010

Steps to reproduce

• Any view that has ShimmeredDetailsList should have a column that creates horizontal scroll
• onColumnResize Pass a function to store the new width to local storage.
• Try to reload the view
• Column width should stay as it is. (after the column resize)
• layoutMode={DetailsListLayoutMode.justified}

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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

[ValentinaKozlova]

Hey @nishila2, thanks for reporting this issue. Currently the core team doesn't have the capacity to work on this, but if you are willing to contribute, we are happy to help!