Client: document image viewer (DocumentImageDrawer) shows the image too small

Aperta
  • Qualcosa non va?
#4,685 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

@gilgardosh ci sta già lavorando.

Dal 13/10/2026.

  • #4690 di @gilgardosh — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
55/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
frontend

Direzione di ricerca

Start in packages/client/src/components/common/document-image-drawer.tsx, which wraps ImageMagnifier (image-magnifier.tsx) in PopUpDrawer (modals/drawer.tsx), and find where the shared drawer width (w-3/4 sm:max-w-sm) is applied. Check the four callers: documents-table/cells/preview.tsx, documents-table/cells/files.tsx, documents-table/document-actions-menu.tsx and common/forms/edit-document.tsx. Done means an opened invoice is readable on a desktop screen without the magnifier, tall scans can still be scrolled or fitted, and mobile is no worse.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Problem

The client's document image viewer, DocumentImageDrawer, is awkward to use: the document image it shows is too small to read without the hover magnifier.

Context: https://guild-oss.slack.com/archives/D01DQ8VJ8KX/p1791886282658719

Where

  • packages/client/src/components/common/document-image-drawer.tsx wraps ImageMagnifier (image-magnifier.tsx) in PopUpDrawer (modals/drawer.tsx).
  • It is used in:
    • documents-table/cells/preview.tsx
    • documents-table/cells/files.tsx
    • documents-table/document-actions-menu.tsx
    • common/forms/edit-document.tsx

Likely cause

PopUpDrawer uses the shared drawer width (w-3/4 sm:max-w-sm), which caps the drawer at about 384px on desktop. The component's own comment says the old Mantine size="30%" was not carried over, so on a wide screen the drawer is now narrower than before. The image fills that narrow column, so it is hard to read without hovering over it with the magnifier.

Suggested direction

  • Make the image drawer much wider on desktop (for example, roughly 50% of the viewport, or a resizable width), or let PopUpDrawer accept a size prop so this drawer can override the house width without changing other drawers.
  • Make the image fit the available height and width (object-contain) so a full page fits on screen.
  • Consider an "open full size" or "fit width / fit page" control, and keep the existing zoom and magnifier.
  • Check the result in all four places that use the component.

Acceptance criteria

  • On a typical desktop screen, an opened document (an invoice or receipt) is readable without the magnifier.
  • Tall scans can still be scrolled or fitted to the page; nothing is cut off.
  • Mobile layout is no worse than it is today.
Lingua principale
TypeScript
Stelle
30
Fork
9
Merge medio
1g 13h
PR unite (30g)
198

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Urigo/accounter-fullstack

Tutte le issue di Urigo/accounter-fullstack

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.