Use small thumbnail size in the Concierge side panel by MelvinBot · Pull Request #104288 · Expensify/App

MelvinBot · 2026-10-16T23:36:34Z

Explanation of Change

Image and video thumbnails in the Concierge side panel were cut off on the right on wide screens.

useThumbnailDimensions picked the thumbnail size only from shouldUseNarrowLayout. The side panel is not a narrow layout on wide screens, so thumbnails used the 350px wide-screen size. The side panel is only 375px wide, which leaves about 282px for message content, so the thumbnail was clipped.

This change also checks useIsInSidePanel() and uses the 250px small-screen size when the hook runs inside the side panel. HeaderView already uses the same shouldUseNarrowLayout || isInSidePanel pattern. Thumbnails in the main chat view keep the 350px size.

Added unit tests for the hook that cover the main chat, the side panel (landscape and portrait), and the narrow layout.

AI tests run by MelvinBot

✅ npm test -- tests/unit/hooks/useThumbnailDimensions.test.tsx (4 tests pass)
✅ npm test -- --findRelatedTests src/hooks/useThumbnailDimensions.ts: every suite that ran passed; the run hit the 10-minute local timeout before it finished
✅ npm run lint on changed files, npm run typecheck, npm run fmt (no changes), npm run spell-changed
✅ npm run react-compiler-compliance-check check src/hooks/useThumbnailDimensions.ts
⚠️ Web UI check could not run: the automated test browser session loaded a blank page
Not run locally: full npm test and the Storybook smoke test (left to CI)

Fixed Issues

$ #103533
PROPOSAL: #103533 (comment)

Tests

On desktop web (Chrome), ensure your browser window is wider than 1300px
Click the Concierge sparkle button (bottom-left of the sidebar) to open the side panel
Send or view a landscape image attachment in the side panel
Verify the image is fully visible and not clipped on the right edge
Open the same chat in the main center pane and verify the image still renders at full desktop size (350px)
Resize the browser to a narrow width (<800px) and verify images still render correctly at 250px

Verify that no errors appear in the JS console

Offline tests

N/A — this is a pure layout fix with no network dependency.

QA Steps

On desktop web (Chrome), ensure your browser window is wider than 1300px
Click the Concierge sparkle button (bottom-left of the sidebar) to open the side panel
Send or view a landscape image attachment in the side panel
Verify the image is fully visible and not clipped on the right edge
Open the same chat in the main center pane and verify the image still renders at full desktop size

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

TODO

Android: mWeb Chrome

TODO

iOS: Native

TODO

iOS: mWeb Safari

TODO

MacOS: Chrome / Safari

TODO

…t cut off Co-authored-by: Abdelrahman Khattab <abzokhattab@users.noreply.github.com>

MelvinBot · 2026-10-16T23:36:49Z

I created this PR from an upstream branch since I don't have push access to your fork.

To take ownership of this branch and be able to push updates, run:

git remote add upstream https://github.com/Expensify/App.git
git fetch upstream claude-sidePanelThumbnailSize
git checkout -b claude-sidePanelThumbnailSize upstream/claude-sidePanelThumbnailSize
git push -u origin claude-sidePanelThumbnailSize

Then you can close this PR and open a new one from your fork.

MelvinBot · 2026-10-16T23:51:37Z

🤖 Android test steps verification results: ⚠️ partial

The image sent in the Concierge chat showed fully, with no clipping on the right. The self DM check could not finish because the emulator camera screen froze, which looks like an emulator problem, not a bug in this PR. The PR's Tests section only lists the JS console check, so the steps also follow the repro steps from the linked issue.

Step	Status
Open Concierge chat and use + > Add attachment to send an image Opened the Concierge chat from Inbox, then used + > Add attachment > Take photo. The photo sent as an attachment message.	✅
Sent image thumbnail in Concierge chat is shown fully, not cut off on the right side The thumbnail shows inside a rounded bubble with a visible right edge. Nothing is clipped, in both the Concierge chat and the thread view.	✅
Send an image in another chat (self DM) and confirm thumbnail is not clipped Not completed. After Take photo in the self DM, the photo preview screen (Close / Retake / Use photo) stopped responding to all input. The app was still in the foreground, not crashed. The gallery saved the captures as long videos, which points to the emulator camera, not this PR.	❌
No errors/red boxes or crash during the flow (JS console check) No red box error or crash appeared. The Metro log showed no errors, only routine warnings unrelated to this flow.	✅

MelvinBot · 2026-10-17T00:01:32Z

🤖 Web test steps verification results: ⚠️ partial

The Concierge side panel opened correctly at a 1440x900 viewport. The web test tool cannot upload files, so no image was sent and the thumbnail clipping checks could not run. The tool does not support the browser file picker, clipboard image paste, or drag and drop. The PR's Tests section lists only the JS console check, so the steps also follow the repro steps from the linked issue.

Step	Status
The Concierge side panel opens from the top icon while in a non-Concierge chat From the "Melvin Tester's expenses" chat, clicking the Help icon at the top right opened the Concierge panel next to the main chat.	✅
An image sends from the side panel via + > Add attachment Not completed. The + menu shows Add attachment, but it opens the browser's native file picker, which the test tool cannot control. Clipboard image paste and drag and drop are also unsupported. This is a test tool limit, not an app defect.	❌
Sent image thumbnail in the Concierge side panel is not cut off on the right Not tested because no image could be sent.	❌
Sent image thumbnail in the main chat view still shows at the larger size and is not clipped Not tested because no image could be sent.	❌
No errors appear in the JS console during the flow No error banners or toasts appeared. The tool cannot read the browser console on web, so this check covers only what was visible on screen.	✅

abzokhattab · 2026-10-17T00:41:27Z

@MelvinBot please update the PR description with the following: