The two downloads tables came out 676px and 727px in a 540px window, so Completed At and
Control sat off the right edge and their buttons could not be reached without scrolling
sideways.
`.table-ellipsis` was trying to truncate under `table-layout: auto`, where a table is as
wide as its columns want to be and the container simply overflows. The rule leaned on
`max-width: 0` to force an ellipsis and `min-width: 25em` to keep the text column readable
-- but 25em is 385px, and a floor wider than the screen makes the overflow certain.
Fixed layout inverts it: the columns divide the table's width and the column marked
`column-ellipsis` gives up what it cannot show. Neither the max-width trick nor the floor
is needed then. Columns that must fit something exact -- a checkbox, a group of buttons --
state a width; the rest is the truncating column's.
`table.table-ellipsis`, not the bare class: Mantine sets `table-layout` on its own
`.mantine-Table-table`, the same specificity and later in the cascade, so the first version
of this lost silently. Every other property in the rule applied, which made the table look
fixed while it stayed auto -- the recurring table got *wider* than before, not narrower.
Three things the rework then had to answer for, each of them measured in the browser:
* A header overran its column: "Completed At" printed on top of "Control", because
`.wrolpi-th-sort` is nowrap so a label never splits from its arrow. It wraps here, and
needs `min-width: 0` as well -- the label is an anonymous flex item whose automatic
minimum is its longest word, so without it the label still refuses to go below
"Completed" and still overruns.
* A grouped button was squeezed: `ButtonGroup` is a nowrap flex row whose children shrink,
and the Stop button on a pending download came out 23px against its neighbour's 40 --
clipped, and too small to hit. The columns are sized for the widest group a row can
have, so the buttons no longer give.
* Status's Top Processes table had the same bug. It already asked for `.table-ellipsis`
and already marked its Command cell, so it overflowed a phone too (548px into 503px).
The same rule fixes it, with widths for the three short readings.
A wrapped header is the fallback, not the layout, so every column is sized to hold its own
label on one line -- including on a phone. "Download Frequency" is the exception at 11.7em,
which a phone cannot spare beside four other columns, so it takes a class that widens at the
tablet breakpoint and wraps below it.
Measured, nothing overflowing, no header overrun, no clipped cell, no shrunken button:
540px once 40 / 208 / 146 / 146 recurring 123 / 108 / 131 / 62 / 116
1400px once 40 / 1033 / 146 / 146 recurring 871 / 185 / 131 / 62 / 116
Desktop gains from it as well: the checkbox column drops from 90px to 40 and Completed At
from 291 to 146, so the URL column picks up about 255px.
Covered by five tests in the Cypress layout suite. None of this is checkable in jsdom --
it is all resolved widths, and the central question is whether our `table-layout` beats the
one Mantine sets, which is exactly the part that failed silently.
69 suites / 1214 jest tests pass.
Phase 2, part 2. Baseline 72 -> 63.
Migrated: Tables, SortableTable, DonatePage, Share, Headline, ErrorBoundary,
and the QR code, VIN decoder, and temperature calculators.
New in the library, all in the gallery and tested:
SearchBox Semantic's `<Search category>`, keeping its grouped `results`
shape because four call sites already build it. A real
combobox: arrows move, Enter takes the highlighted suggestion
or submits the raw text, Escape closes without clearing.
Pagination Semantic's prop names, but onPageChange gets the page number
rather than an (event, data) pair.
TabBar the strip and its house style only; routing stays at the call
site, which is what decides what is active.
IconStack two glyphs composed into one symbol, named once for assistive
technology (Semantic's IconGroup).
Table.HeaderCell gains `sorted` and `onSort`.
That last one is a fix, not just a port. Semantic's `sorted` prop set
`aria-sort`; migrating a table by hand dropped it, leaving a clickable <th>
that no keyboard could reach and no screen reader could describe. Putting it
in the library means the next table gets it right without anyone remembering.
Night mode holes closed along the way: the QR codes on the donate, share, and
calculator pages are white by necessity — a scanner needs the contrast — and
they render as SVG, which the media filter does not target. In night mode that
was a lit panel. They now carry `.media`, so the filter remaps the block as a
unit and the contrast survives the mapping.
Also: `paypal` joins the icon map rather than being imported ad hoc in a page,
and FileBrowser stops passing Semantic-only table props into a DOM element.
* A new zim module has been added, this module allows several things to interact with Zim files.
* Allow searching of Zim files using libzim.
* Allow downloading of Kiwix projects (wikipedia, wikibooks, etc) on a schedule which replaces the outdated files.
* Creation of a new zim docker container which allows viewing of the Zim file contents.
* This commit also adds move/rename/mkdir features in the File Browser.
* File tags are preserved when moving/renaming.
Moving FilesRefreshButton and DirectoryRefreshButton out of browser file.
Moving file fetching tino FileBrowser.
Removing sub-folders from Files display when any parent folder is clicked.
Using closed captioning for vtt/srt file icon.
Using my own react-semantic-toasts-2 to use toasts in Node 18.
Fixing bug where more than the last page was displayed.
Upgrading yt-dlp.
Fixing sub-folder file selection.
Adding rowKey to SortableTable to give React a key for each row.
Renaming key to path.
Removing duplicate urls.
Unifying file modals.
Displaying modals for image and text files.
Handling refresh loading in FileBrowser. Creating refreshing_directory flag.
Removing accidental commit.
Sorting by url_count.
Using SortableTable on Domains page.
Using SortableTable for Channels page.
Created new FileBrowser which allows browsing of files in the media directory.
Using Node 18 in pi-gen.
Creating new FileBrowser to replace outdated react-keyed-file-browser.
Returning mimetype with file list.
Do not display 'Do not download' on Channel download in Dashboard.
Allowing null channel download frequency so user can stop downloading a channel.
Bumping version for Node 18.
Using my own semantic-ui-offline to avoid pulling Google fonts.
Upgrading app docker container to use Node 18. This requires the removal of several npm packages. File browser will require re-write. It now pulls fonts from Google, this will need to be fixed.
Testing DownloadsToggle click.
Testing trinary states of DownloadsToggle.
Installing @testing-library/user-event for testing App.
