fix(dashboard): table width:auto so Character column sizes to content only
With width:100%, the table stretched to fill the container — and the Character column (the only one with stretchable text) absorbed all the extra space, looking much wider than the longest name needed. width:auto lets each column size to its content. Table now fits its data; container still scrolls horizontally if content ever exceeds the viewport. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
5f43ddce93
commit
87e4f2ff62
14 changed files with 18 additions and 15 deletions
|
|
@ -71,7 +71,10 @@ export const PlayerDashboardContent: React.FC<ContentProps> = ({ characters }) =
|
|||
|
||||
return (
|
||||
<div style={{ flex: 1, overflow: 'auto', fontSize: '0.73rem' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
{/* width:auto so each column sizes to content — without this, width:100%
|
||||
forced the leftmost text column (Character) to absorb all extra slack
|
||||
and look way wider than its longest name actually needs. */}
|
||||
<table style={{ width: 'auto', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ position: 'sticky', top: 0, background: '#1a1a1a', zIndex: 1 }}>
|
||||
<th style={{ ...thStyle('name'), textAlign: 'left' }} onClick={() => toggleSort('name')}>Character{arrow('name')}</th>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue