diff --git a/.changeset/mean-ways-drum.md b/.changeset/mean-ways-drum.md new file mode 100644 index 0000000000..1a6dab4183 --- /dev/null +++ b/.changeset/mean-ways-drum.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/ui": patch +--- + +Fix `` and `` to never take more than 100% of the container diff --git a/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap index 3d5f5f6924..450059e36e 100644 --- a/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap @@ -4,11 +4,13 @@ exports[`List > Should expand a row by pressing Space 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -708,11 +710,13 @@ exports[`List > Should not collapse a row by clicking on expandable content 1`] .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -1462,6 +1466,7 @@ exports[`List > Should render correctly 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -2001,11 +2006,13 @@ exports[`List > Should render correctly with bad sort value 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -2694,6 +2701,7 @@ exports[`List > Should render correctly with disabled rows 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -3243,6 +3251,7 @@ exports[`List > Should render correctly with expandable rows 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -3802,11 +3811,13 @@ exports[`List > Should render correctly with info 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -4602,11 +4613,13 @@ exports[`List > Should render correctly with isExpandable and autoClose rows the .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -5356,11 +5369,13 @@ exports[`List > Should render correctly with isExpandable rows then click 1`] = .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -6079,6 +6094,7 @@ exports[`List > Should render correctly with loading 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -6810,6 +6826,7 @@ exports[`List > Should render correctly with loading with selectable 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -7901,11 +7918,13 @@ exports[`List > Should render correctly with preventClick cell then click but ev .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -8594,6 +8613,7 @@ exports[`List > Should render correctly with row expanded 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -9133,6 +9153,7 @@ exports[`List > Should render correctly with selectable 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -10784,11 +10805,13 @@ exports[`List > Should render correctly with selectable then click on first row .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -13051,11 +13074,13 @@ exports[`List > Should render correctly with selectable with shift click for mul .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -15316,6 +15341,7 @@ exports[`List > Should render correctly with sentiment rows 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -15870,6 +15896,7 @@ exports[`List > Should render correctly with sort 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } @@ -16409,11 +16436,13 @@ exports[`List > Should render correctly with sort then click 1`] = ` .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } .emotion-0 { min-width: 100%; + width: 100%; overflow-x: auto; } diff --git a/packages/ui/src/components/List/index.tsx b/packages/ui/src/components/List/index.tsx index 711574cbfe..3f991e548a 100644 --- a/packages/ui/src/components/List/index.tsx +++ b/packages/ui/src/components/List/index.tsx @@ -12,6 +12,7 @@ import type { ColumnProps } from './types' const TableContainer = styled.div` min-width: 100%; + width: 100%; overflow-x: auto; ` diff --git a/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap index f3b8fec39d..32a1683059 100644 --- a/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap @@ -5,6 +5,7 @@ exports[`Table > Should render correctly 1`] = ` .emotion-0 { min-width: 100%; overflow-x: auto; + width: 100%; } .emotion-2 { @@ -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 { @@ -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 { @@ -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 { @@ -2266,6 +2273,7 @@ exports[`Table > Should render correctly with loading 1`] = ` .emotion-0 { min-width: 100%; overflow-x: auto; + width: 100%; } .emotion-2 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { diff --git a/packages/ui/src/components/Table/index.tsx b/packages/ui/src/components/Table/index.tsx index 809edcbfa8..f16f034226 100644 --- a/packages/ui/src/components/Table/index.tsx +++ b/packages/ui/src/components/Table/index.tsx @@ -17,6 +17,7 @@ import type { ColumnProps } from './types' const TableContainer = styled.div` min-width: 100%; overflow-x: auto; + width: 100%; ` type StyledTableProps = {