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:
Erik 2026-05-23 19:37:49 +02:00
parent 5f43ddce93
commit 87e4f2ff62
14 changed files with 18 additions and 15 deletions

View file

@ -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>