Skip to content

Commit

Permalink
fix: table and list to take 100% of container (#4594)
Browse files Browse the repository at this point in the history
  • Loading branch information
@matthprost
matthprost authored Dec 16, 2024
1 parent 907b477 commit bd99975
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/mean-ways-drum.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@ultraviolet/ui": patch
---

Fix `<List />` and `<Table />` to never take more than 100% of the container
29 changes: 29 additions & 0 deletions packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ exports[`List > Should expand a row by pressing Space 1`] = `
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -708,11 +710,13 @@ exports[`List > Should not collapse a row by clicking on expandable content 1`]
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -1462,6 +1466,7 @@ exports[`List > Should render correctly 1`] = `
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -2001,11 +2006,13 @@ exports[`List > Should render correctly with bad sort value 1`] = `
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -2694,6 +2701,7 @@ exports[`List > Should render correctly with disabled rows 1`] = `
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -3243,6 +3251,7 @@ exports[`List > Should render correctly with expandable rows 1`] = `
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -3802,11 +3811,13 @@ exports[`List > Should render correctly with info 1`] = `
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -4602,11 +4613,13 @@ exports[`List > Should render correctly with isExpandable and autoClose rows the
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -5356,11 +5369,13 @@ exports[`List > Should render correctly with isExpandable rows then click 1`] =
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -6079,6 +6094,7 @@ exports[`List > Should render correctly with loading 1`] = `
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -6810,6 +6826,7 @@ exports[`List > Should render correctly with loading with selectable 1`] = `
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -7901,11 +7918,13 @@ exports[`List > Should render correctly with preventClick cell then click but ev
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -8594,6 +8613,7 @@ exports[`List > Should render correctly with row expanded 1`] = `
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -9133,6 +9153,7 @@ exports[`List > Should render correctly with selectable 1`] = `
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -10784,11 +10805,13 @@ exports[`List > Should render correctly with selectable then click on first row
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -13051,11 +13074,13 @@ exports[`List > Should render correctly with selectable with shift click for mul
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -15316,6 +15341,7 @@ exports[`List > Should render correctly with sentiment rows 1`] = `
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -15870,6 +15896,7 @@ exports[`List > Should render correctly with sort 1`] = `
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down Expand Up @@ -16409,11 +16436,13 @@ exports[`List > Should render correctly with sort then click 1`] = `
<DocumentFragment>
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
.emotion-0 {
min-width: 100%;
width: 100%;
overflow-x: auto;
}
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/components/List/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import type { ColumnProps } from './types'

const TableContainer = styled.div`
min-width: 100%;
width: 100%;
overflow-x: auto;
`

Expand Down
18 changes: 18 additions & 0 deletions packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`Table > Should render correctly 1`] = `
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-2 {
Expand Down Expand Up @@ -492,11 +493,13 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-2 {
Expand Down Expand Up @@ -1099,11 +1102,13 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-2 {
Expand Down Expand Up @@ -1680,11 +1685,13 @@ exports[`Table > Should render correctly with info 1`] = `
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-2 {
Expand Down Expand Up @@ -2266,6 +2273,7 @@ exports[`Table > Should render correctly with loading 1`] = `
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-2 {
Expand Down Expand Up @@ -2905,11 +2913,13 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-2 {
Expand Down Expand Up @@ -3502,11 +3512,13 @@ exports[`Table > Should render correctly with selectable and shift click 1`] = `
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-2 {
Expand Down Expand Up @@ -5165,11 +5177,13 @@ exports[`Table > Should render correctly with selectable then click on first row
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-2 {
Expand Down Expand Up @@ -6830,11 +6844,13 @@ exports[`Table > Should render correctly with sort then click 1`] = `
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-2 {
Expand Down Expand Up @@ -7562,11 +7578,13 @@ exports[`Table > Should render correctly with stipped 1`] = `
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-0 {
min-width: 100%;
overflow-x: auto;
width: 100%;
}
.emotion-2 {
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/components/Table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import type { ColumnProps } from './types'
const TableContainer = styled.div`
min-width: 100%;
overflow-x: auto;
width: 100%;
`

type StyledTableProps = {
Expand Down

0 comments on commit bd99975

Please sign in to comment.