ZenNotes/zennotes v2.81.1 on GitHub

ZenNotes 2.81.1 fixes databases on touch screens and in narrow panes. 2.81.0 shows the controls that appear on hover all the time where nothing can hover, and in the Table that put a row's Open button over the end of a long name and squeezed the select column against the edge. Checking that fix found two older problems in a narrow pane, and they are fixed here too. It is a patch for 2.81.0, whose notes have everything 2.81 brings.

Draft, not released: the release line, channels and validation get filled in at the cut.

Fixes

The Table's Open no longer covers a long name on a touch screen. Before: the Open button that a mouse brings up over the right end of a row's name sat on every row, hiding the end of a long name ("Book the venue for the spring lau…"). After: a touch screen leaves it out, since the page icon left of the name already opens the page; with a mouse it still appears on hover. The web app on a phone or tablet had it, and so did the desktop app on a touch-first device such as a Surface in tablet mode.
The Table's select column keeps its width. Before: a long title made the Table wider than a phone's screen, and the select column, shown all the time on touch since 2.81.0, shrank from 40 px to 18 px with its box against the edge. After: it keeps 40 px.
A Table with a long name opens at its first column. Before: in a narrow pane, a first cell wider than the pane scrolled the Table 40 px as it opened, so the select column was off screen and "New row" read "ew row". After: it opens at the start and scrolls only when the cursor moves. This one is older than 2.81.
+ Row and the header's menu stay on screen in a narrow pane. Before: under about 490 px the database header's tools ran past the pane's edge, and + Row and the … menu could not be reached. After: the tools wrap inside the pane. A wide pane still draws one line.

The phone apps already carry the first two fixes (iPhone 1.36.0, Android 1.1.52) in their own styles, so they stay on core 2.81.0 and take the rest with their next core update.

For contributors

zn-hover-only (17bd43d8): the counterpart of 2.81.0's zn-hover-reveal, for a hover shortcut to something already on screen. The no-hover block in styles/index.css sets it to display: none, so the control neither covers anything nor takes an unseen tap. The Table row's overlay Open is the only user so far.
The Table's select header and cells add min-w-10 beside w-10 (1f816456), since a table squeezes a column's width but not its minimum.
Tests (f11c3b81): lib/touch-hover-style.test.ts reads the no-hover block, and DatabaseTableView.test.ts checks the overlay Open, the page glyph and the select column. All three are red on 2.81.0.
Opening scroll (416fbb4a): the effect that scrolls the active cell into view compares row and column by value and skips an unchanged cursor, because the effect that keeps the cursor in bounds hands back a new object with the same numbers on every open. Its test is red without the fix.
Header tools (e69ea716): the group is max-w-full flex-wrap justify-end. Checked on the web app; no unit test, since jsdom lays nothing out.

Verification

How to test locally:

Run the web app with npm run dev:web-stack and open it in Chrome.
Open DevTools, turn on the device toolbar, pick a phone, and reload, so the page sees a touch screen that cannot hover.
Make a database (:kanban, or New Kanban from a folder's menu), switch it to Table, and give a row a long name.
Before: an Open button covers the end of every row's name, and the select boxes sit against the left edge. After: the name reads to its end, the select column stays 40 px wide, and the page icon left of the name opens the page.
Still on the phone or a narrow window with the sidebar open: before, the Table opened 40 px scrolled (the select boxes off screen, "New row" reading "ew row") and + Row and … sat past the pane's edge. After, it opens at its first column and both buttons are on screen.
Turn the device toolbar off, widen the window and reload: hovering a row with the mouse still shows Open, and the header's tools sit on one line.

Distribution channels

Filled in at the cut.

Release validation