[Bug]: Vertical divider min-width is always 86px

[codysorgenfrey]

Library

Web Components (@fluentui/web-components)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 37.52 GB / 63.91 GB
  Browsers:
    Edge: Chromium (125.0.2535.92)
    Internet Explorer: 11.0.22621.3527

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/p/sandbox/vertical-divider-min-width-is-always-86px-83qxkr?file=%2Fsrc%2Fstyles.css%3A6%2C23&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clx4x4nge00063j6xgnql3lq8%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clx4x4ngd00023j6x92q8vasf%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clx4x4ngd00033j6xhr3immvr%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clx4x4ngd00053j6x4mrzegof%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clx4x4ngd00023j6x92q8vasf%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clx4x4ngd00013j6xguz683m5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clx4xbggk00023j6wadqqfnrh%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A7%252C%2522startColumn%2522%253A70%252C%2522endLineNumber%2522%253A7%252C%2522endColumn%2522%253A70%257D%255D%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clx4xgt1w00023j72jkbgav3b%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A6%252C%2522startColumn%2522%253A23%252C%2522endLineNumber%2522%253A6%252C%2522endColumn%2522%253A23%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fstyles.css%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clx4x4ngd00023j6x92q8vasf%2522%252C%2522activeTabId%2522%253A%2522clx4xgt1w00023j72jkbgav3b%2522%257D%252C%2522clx4x4ngd00053j6x4mrzegof%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clx4x4ngd00043j6xwq5b9lyd%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clx4x4ngd00053j6x4mrzegof%2522%252C%2522activeTabId%2522%253A%2522clx4x4ngd00043j6xwq5b9lyd%2522%257D%252C%2522clx4x4ngd00033j6xhr3immvr%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clx4x4ngd00033j6xhr3immvr%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Bug Description

Actual Behavior

fluentui/packages/web-components/src/divider/divider.styles.ts

Line 63 in 9e39039

:host([orientation='vertical']):empty {

This selector never gets used and the min-height of the vertical divider even if empty is always 86px.

Expected Behavior

Empty vertical divider should have min-height of 20px.

Logs

No response

Requested priority

Low

Products/sites affected

Edge

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.