UxOverflowX
components/ux/OverflowX.vue
Horizontal scroll only when needed: arms overflow-x-auto while its content is wider than the box (measured by scrollWidth, so nested wrappers count) and resets --q-sticky-top inside. Content that fits leaves sticky table headers pinned to the page. c104.
| Endpoint | Harness | User | Team | Model | Provider | Tokens | Cost |
|---|---|---|---|---|---|---|---|
| endpoint 1 | harness 1 | user 1 | team 1 | model 1 | provider 1 | tokens 1 | cost 1 |
| endpoint 2 | harness 2 | user 2 | team 2 | model 2 | provider 2 | tokens 2 | cost 2 |
| endpoint 3 | harness 3 | user 3 | team 3 | model 3 | provider 3 | tokens 3 | cost 3 |
| endpoint 4 | harness 4 | user 4 | team 4 | model 4 | provider 4 | tokens 4 | cost 4 |
box 900px · fits — no overflow, header pins to the page
Scenarios
Typical — the table fits, nothing scrolls
| Endpoint | Harness | User |
|---|---|---|
| endpoint 1 | harness 1 | user 1 |
| endpoint 2 | harness 2 | user 2 |
Overflow — 2000px of content always arms
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
components/ux/OverflowX.vue
Usage
<UxOverflowX>
Content here
</UxOverflowX>
Slots
| Slot | Description |
|---|---|
| default | The content that may overflow — usually a UxTableList |