Formulus: make Observations and Forms tables usable on small screens #921

Summary

The list tables on Observations and Forms are too wide / poorly proportioned on small devices. They should adapt by dropping lower-priority columns on narrow layouts so rows stay readable without horizontal scroll or crushed text.

Current behavior

• Observations (ObservationListTable): five columns in one row — form, created, sync, author, id — flex-based but still too dense on phones.
• Forms (FormListTable): form name plus fixed-width count (216) and New (160) columns — far wider than a typical phone viewport, so layout looks broken.

Proposed fix

Prefer responsive column dropping (not cards, not horizontal scroll).

Observations (narrow)

Keep:

• Form
• Created (short datetime — existing formatDateTimeShort style)
• Sync

Drop on narrow:

• Author
• Id (still available on observation detail)

Forms (narrow)

• Keep form name
• Drop observation count column
• New control: icon-only (no wide header label / fixed 160px column)

Wide / tablet

Keep the full column sets as today (once widths are sane).

Breakpoint: implementer’s choice of a simple narrow vs wide split (e.g. content width / ~phone vs tablet); document the chosen threshold in the PR.

Acceptance criteria

• On a typical phone width, Observations shows form + created + sync only; no crushed/overflowing row layout.
• On a typical phone width, Forms shows name + icon-only New; count column hidden; no oversized fixed column widths.
• On wider layouts, full columns remain available and look balanced.
• Author / id remain reachable via observation detail; count remains available on wide Forms (or elsewhere if already shown).

Implementation notes

• Primary files: formulus/src/components/common/ObservationListTable.tsx, formulus/src/components/common/FormListTable.tsx.
• Fix Forms fixed width: 216 / width: 160 as part of the responsive pass.