Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#4,685 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@gilgardosh is already working on this.

Since Oct 13, 2026.

  • #4690 by @gilgardosh — open

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
55/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

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.

Written by the indexing model from the issue text.

Description

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.
Dominant language
TypeScript
Stars
30
Forks
8
Avg merge
1d 14h
Merged PRs (30d)
198

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Urigo/accounter-fullstack

All issues in Urigo/accounter-fullstack

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.