Sitelet https://github.com/Mindfeast/feastdocs/commit/c063059044d9491e7ca7fae6d0f23bb6909f64eb
Skip to content

Commit c063059

Browse files
joaoppacoomnijoaoppacoomni
committed
fix: tables were stretched to the column, inflating every cell
`width: 100%` forces a table to fill whatever holds it, and auto layout then hands the surplus to every column in proportion. A three-column table holding a date, a short code and a name came out at 216, 139 and 143px — widths that have nothing to do with the content and read as arbitrary, or as though the columns were fixed. Sized to content instead, capped at the column. Where one column really is long it still takes everything left: on a release page No. sits at 52px and Script Name at 676px, filling the full 730px. Where the whole table is small it now stops early — that same three-column table is 389px, and an Application Name / Version pair 246px instead of 500. The wrapper hugs the table too, or a small table would sit in a large empty bordered box. Verified on a page and in the editor preview, which lays out the same table in 500px: No. 52px in both, nothing clipped, no table scrolling sideways and no horizontal overflow on the page. All 14 tests pass.
1 parent 4468ac6 commit c063059

1 file changed

Lines changed: 13 additions & 5 deletions

File tree

‎src/styles/_content.scss‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -187,17 +187,25 @@
187187
// --- Tables ----------------------------------------------------------------
188188

189189
.fd-table-wrap {
190+
// Only as wide as the table needs, up to the column width. A table forced to
191+
// fill would hand the surplus to every column in proportion, so three short
192+
// columns come out at 216, 139 and 143px holding a date, a code and a name —
193+
// even-looking widths that read as arbitrary. The card hugs the table so a
194+
// small table does not sit in a large empty box.
195+
width: fit-content;
196+
max-width: 100%;
190197
margin: 1.25rem 0;
191198
border: 1px solid var(--fd-border);
192199
border-radius: var(--fd-radius);
193200
overflow-x: auto;
194201

195202
table {
196-
width: 100%;
197-
// Auto layout on purpose: a column should be as wide as what it holds, so a
198-
// row number or a duration stays narrow and the one long column takes the
199-
// rest. The cost is that two tables size independently and the same column
200-
// can land in different places on the same page.
203+
// Sized by its content, not stretched: a row number or a duration stays
204+
// narrow and the one long column takes what is left. The cost is that two
205+
// tables size independently and the same column can land in different
206+
// places on the same page.
207+
width: auto;
208+
min-width: 100%;
201209
border-collapse: collapse;
202210
font-size: 0.9375rem;
203211
}

0 commit comments

Comments
 (0)