Mobile workspaces: why is the first record so far down?

Larger text can push the records away

When reviewing the mobile pages, I looked at what appears before the first record. A heading, introduction, statistics and filters can each make sense while taking up an entire screen together. Enlarging the text can make that delay worse.

The FieldLens v1.9.3 README records the first row moving from about 1368px to 765px in a 390px-wide browser viewport. This describes one demo layout, not an improvement in every task. The code keeps search visible, folds the other filters and places backup controls below the list.

Fold the controls while keeping the filter visible

After the filter panel closes, the user still needs to know why only a few rows remain. FieldLens keeps active filter chips and a count visible. Opening or closing the panel changes presentation; resizing to desktop keeps the filter values and selection.

The repository's layout check follows that sequence: select pending review on mobile, select a record, fold the filters, then resize to 1440px and verify both values. It checks more than whether the page has horizontal overflow.

await page.setViewportSize({ width: 1440, height: 960 });
ok(await page.locator("#record-review").isVisible(),
  "desktop exposes filter controls after resizing");
ok(await page.locator("#record-review").inputValue() === "pending",
  "resizing preserves filters");
ok(await page.locator("[data-select-record]").first().isChecked(),
  "resizing preserves selected records");

Try larger text in tables and dialogs too

The archive demo offers 16, 18 and 20px body-text settings, plus sans-serif and serif choices. Its component converts the chosen size to --reader-scale, which the type sizes use to retain their relationship.

The selection is saved in the current browser when storage permits. With storage blocked, the current page can still change size, but the preference may not survive a reload. Long filenames, review comments, detail panels and confirmation buttons need inspection at the largest setting.

Show fewer labels without dropping the data

MeteoFormer's hourly chart measures its container with ResizeObserver. Below 480px it labels every eighth row; wider containers use every fourth row. The final label is retained. This changes labels only: the temperature path and rainfall bars still use the input rows, with full values available in a table.

That choice fits the hourly data here. For irregular samples, positions and labels should be calculated from timestamps. The source also breaks the temperature path at missing values instead of drawing an unsupported continuous line.

const tickIndices = computed(() => {
  const last = props.rows.length - 1;
  if (last < 0) return [];
  const step = width.value < 480 ? 8 : 4;
  return [...new Set([
    ...Array.from({ length: Math.floor(last / step) + 1 },
      (_, i) => i * step),
    last,
  ])];
});

Review the layout through a complete task

For the next layout review, I would follow one task: find a record, filter, open its details and return to the list. Screenshots reveal hierarchy and spacing; the sequence exposes lost state, obscured buttons and misplaced focus.

• Switch between 390px and 1440px and check filters, pagination and selection against the product rules.
• Use long filenames and the largest text setting to inspect details, close controls and the next action.
• Open and close panels with the keyboard, then check landscape orientation, the software keyboard and touch on a phone. A simulated viewport does not replace those checks.