Detailed view: first card cut off on the left when the column count ignores the gap #126

In Detailed view, at some window widths, the first column of cards is pushed past the left edge of the grid and clipped.

Cause: detailedColumnCount() in grid-refresh.js (and the fallback in renderer.js detailedColumnsForWidth()) divides the available width by the card width only:

return Math.max(Math.floor(available / item), 1);

The layout then centres the row with (availableWidth - usedWidth) / 2, where usedWidth includes the gaps. When the cards fit but the cards plus gaps don't, that offset is negative. Example: 2160 px grid, 20 px padding, 2120 px available, 300 px cards, 20 px gap gives 7 columns, but 7 x 300 + 6 x 20 = 2220 px, so the offset is -50 and the first card lands at left: -30px.

Fix: count the gap with each card:

function detailedColumnCount(availableWidth, itemWidth, gap = 20) {
  const item = Math.max(1, Number(itemWidth) || 300);
  const available = Math.max(0, Number(availableWidth) || 0);
  const g = Math.max(0, Number(gap) || 0);
  return Math.max(Math.floor((available + g) / (item + g)), 1);
}

The same change applies to the renderer.js fallback. Tested on the Docker image v3.0.3 in server mode: the card returns to a positive offset and is fully visible.

PR #125 would also hide this, since it drops the centring offset and stretches the cards, but the column count itself still ignores the gap.