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 = {