Unexpected Tool Settings Row Layout Styles

[Emi1yZhang]

Clear title

Unexpected Tool Settings Row Layout Styles with Multiple Rows & Columns

Expected vs. actual behavior

In this example below, each row contains 2 items. The 2nd items from every row should line up vertically to form a consistent second column, but currently they do not align properly. Each row’s right element simply sits directly after its left content without shared column positioning.

Reproduction steps

1. Create a tool with tool settings
2. Tool setting items should have priorities of { rowPriority: 0, columnIndex: 0 }, { rowPriority: 0, columnIndex: 1 }, { rowPriority: 1, columnIndex: 0 }, { rowPriority: 1, columnIndex: 1 }
3. Drag to undock toolsetting widget, and tool settings items are in 2 rows.
   ...

Minimal reproducible example

No response

Stack traces and logs

No response

Environment

OpenSite+: 1.12.0

Developer Information:
iTwin Studio: 1.10.4 (f85121a9)
Build: 1.10.4 Beta Build (QA)

iTwin Frameworks:
@itwin/core-frontend: 5.10.3
@itwin/itwinui-react: 3.21.2
@itwin/appui-react: 5.32.0

Design System:
@stratakit/bricks: 0.5.4
@stratakit/foundations: 0.4.8
@stratakit/structures: 0.5.7
@stratakit/mui: 0.4.2
@mui/system: 9.1.0

Core Frameworks:
React: 18.3.1
Node.js: 24.15.0
Electron: 42.0.0

Priority / urgency

Not urgent

AI acknowledgment

• I used AI to generate this issue report.
• (If the above is checked) I have reviewed the AI-generated content before submitting.