Skip to content

fix: use min-width so Firefox respects applied column widths #9871

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LFDanLu merged 5 commits into from
Apr 3, 2026
+114 −62
Merged

fix: use min-width so Firefox respects applied column widths #9871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
df19224
fix: use min-width so Firefox respects applied column widths
LFDanLu Apr 1, 2026
3f80e4a
code comment to FF bug
LFDanLu Apr 2, 2026
50dc384
add RAC story to chromatic
LFDanLu Apr 2, 2026
2856576
chromatic without fix
LFDanLu Apr 3, 2026
f25ca63
bring back fix for chromatic
LFDanLu Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/@react-spectrum/s2/chromatic/TableView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
import {action} from 'storybook/actions';
import {Cell, Column, Row, TableBody, TableHeader, TableView, TableViewProps} from '../src/TableView';
import {Content, Heading} from '../src/Content';
import {FixedColumnWidths} from '../../../react-aria-components/stories/Table.stories';
import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
import {IllustratedMessage} from '../src/IllustratedMessage';
import {Link} from '../src/Link';
Expand Down Expand Up @@ -501,3 +502,14 @@ export const TableWithNestedRows: StoryObj<typeof TableView> = {
defaultExpandedKeys: ['apps']
}
};

export const RACFixedWidth = {
render: FixedColumnWidths,
parameters: {
chromaticProvider: {
locales: ['en-US'],
scales: ['medium'],
colorSchemes: ['light']
}
}
};
6 changes: 4 additions & 2 deletions packages/react-aria-components/src/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,7 @@ class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T
if (k == null) {
k = node.parentKey;
}

if (k != null && this.getItem(k)?.type === 'tablebody') {
return null;
}
Expand Down Expand Up @@ -687,7 +687,9 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
style = {
...style,
tableLayout: 'fixed',
width: 'fit-content'
// due to https://bugzilla.mozilla.org/show_bug.cgi?id=1959353, we can't use "fit-content".
Copy link
Copy Markdown
Member

@snowystinger snowystinger Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we adde a chromatic story as a test against this? we run against FF there, so should be reproducible

Copy link
Copy Markdown
Member Author

@LFDanLu LFDanLu Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added the RAC story to the S2 chromatic since we don't have a RAC chromatic. Would've just added a S2 story but our S2 table doesn't actually exhibit the original issue.

// Causes the table columns to grow to fill the available space in Firefox, ignoring user set column widths
width: 'min-content'
Copy link
Copy Markdown
Contributor

@nwidynski nwidynski Apr 2, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add a code comment pointing to the upstream issue? We may want to revisit this once it gets resolved. Also, for future reference, the reason why I didn't suggest the "extended" version of fit-content, e.g. min(max-content, max(min-content, stretch)), is because max-content is actually the value causing the issue - not fit-content itself, which is basically an alias for the above.

};
}
}
Expand Down
158 changes: 98 additions & 60 deletions packages/react-aria-components/stories/Table.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,68 +141,106 @@ const TableExample: TableStory = (args) => {
});

return (
<ResizableTableContainer style={{width: 400, overflow: 'auto'}}>
<Table aria-label="Example table" {...args}>
<TableHeader>
<Column width={30} minWidth={0}><MyCheckbox slot="selection" /></Column>
<MyColumn isRowHeader defaultWidth="30%">Name</MyColumn>
<MyColumn>Type</MyColumn>
<MyColumn>Date Modified</MyColumn>
<MyColumn>Actions</MyColumn>
</TableHeader>
<TableBody items={list.items}>
{item => (
<Row>
<Cell><MyCheckbox slot="selection" /></Cell>
<Cell>{item.name}</Cell>
<Cell>{item.type}</Cell>
<Cell>{item.date}</Cell>
<Cell>
<DialogTrigger>
<Button>Delete</Button>
<ModalOverlay
style={{
position: 'fixed',
zIndex: 100,
top: 0,
left: 0,
bottom: 0,
right: 0,
background: 'rgba(0, 0, 0, 0.5)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<Modal
<div style={{width: 600, overflow: 'auto'}}>
<ResizableTableContainer>
<Table aria-label="Example table" {...args}>
<TableHeader>
<Column width={30} minWidth={0}><MyCheckbox slot="selection" /></Column>
<MyColumn isRowHeader defaultWidth="30%">Name</MyColumn>
<MyColumn>Type</MyColumn>
<MyColumn>Date Modified</MyColumn>
<MyColumn>Actions</MyColumn>
</TableHeader>
<TableBody items={list.items}>
{item => (
<Row>
<Cell><MyCheckbox slot="selection" /></Cell>
<Cell>{item.name}</Cell>
<Cell>{item.type}</Cell>
<Cell>{item.date}</Cell>
<Cell>
<DialogTrigger>
<Button>Delete</Button>
<ModalOverlay
style={{
background: 'Canvas',
color: 'CanvasText',
border: '1px solid gray',
padding: 30
position: 'fixed',
zIndex: 100,
top: 0,
left: 0,
bottom: 0,
right: 0,
background: 'rgba(0, 0, 0, 0.5)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<Dialog>
{({close}) => (<>
<Heading slot="title">Delete item</Heading>
<p>Are you sure?</p>
<Button onPress={close}>Cancel</Button>
<Button
onPress={() => {
close();
list.remove(item.id);
}}>
Delete
</Button>
</>)}
</Dialog>
</Modal>
</ModalOverlay>
</DialogTrigger>
</Cell>
</Row>
)}
</TableBody>
</Table>
</ResizableTableContainer>
<Modal
style={{
background: 'Canvas',
color: 'CanvasText',
border: '1px solid gray',
padding: 30
}}>
<Dialog>
{({close}) => (<>
<Heading slot="title">Delete item</Heading>
<p>Are you sure?</p>
<Button onPress={close}>Cancel</Button>
<Button
onPress={() => {
close();
list.remove(item.id);
}}>
Delete
</Button>
</>)}
</Dialog>
</Modal>
</ModalOverlay>
</DialogTrigger>
</Cell>
</Row>
)}
</TableBody>
</Table>
</ResizableTableContainer>
</div>
);
};

export const FixedColumnWidths: TableStory = (args) => {
let list = useListData({
initialItems: [
{id: 1, name: 'Games', date: '6/7/2020', type: 'File folder'},
{id: 2, name: 'Program Files', date: '4/7/2021', type: 'File folder'},
{id: 3, name: 'bootmgr', date: '11/20/2010', type: 'System file'},
{id: 4, name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
]
});

return (
<div style={{width: 600, overflow: 'auto'}}>
<ResizableTableContainer>
<Table aria-label="Example table with fixed column widths" {...args}>
<TableHeader>
<Column width={30} minWidth={0}><MyCheckbox slot="selection" /></Column>
<MyColumn isRowHeader width={100}>Name</MyColumn>
<MyColumn width={100}>Type</MyColumn>
<MyColumn width={100}>Date Modified</MyColumn>
</TableHeader>
<TableBody items={list.items}>
{item => (
<Row>
<Cell><MyCheckbox slot="selection" /></Cell>
<Cell>{item.name}</Cell>
<Cell>{item.type}</Cell>
<Cell>{item.date}</Cell>
</Row>
)}
</TableBody>
</Table>
</ResizableTableContainer>
</div>
);
};

Expand Down
Loading