Skip to content

Fix SenseCard horizontal overflow in MergeDupsCompleted WordCard#4206

Draft
Copilot wants to merge 2 commits intomasterfrom
copilot/fix-sense-x-overflowing-word
Draft

Fix SenseCard horizontal overflow in MergeDupsCompleted WordCard#4206
Copilot wants to merge 2 commits intomasterfrom
copilot/fix-sense-x-overflowing-word

Conversation

Copy link
Contributor

Copilot AI commented Mar 16, 2026

In Data Cleanup's completed Merge Duplicates view, SenseCard could overflow its WordCard horizontally when the word card was narrow — producing an unwanted horizontal scrollbar.

Root cause: SenseCard had minWidth: 150. With MUI CardContent's 16px left/right padding, a WordCard ~190px wide leaves only ~158px of usable space, but the sense card with m: 1 margins needed ≥166px minimum.

Changes (MergeDupsCompleted.tsx)

  • Remove minWidth: 150 from SenseCard — sense card should size to available width; maxWidth: 300 is retained to cap width in wider layouts
  • Add overflowX: "hidden" to WordCard content div — guards against any residual horizontal overflow
- <div style={{ maxHeight: "55vh", overflowY: "auto" }}>
+ <div style={{ maxHeight: "55vh", overflowX: "hidden", overflowY: "auto" }}>

  sx={{
    bgcolor: "white",
    m: 1,
    maxWidth: 300,
-   minWidth: 150,
    userSelect: "none",
  }}
Original prompt

This section details on the original issue you should resolve

<issue_title>[MergeDupsComplete>MergeChange] Sense x-overflowing word</issue_title>
<issue_description>Describe the bug

In Data Cleanup, under "You've Completed", you can click on a "Merge Duplicates" tile to see completed merges. The MergeChange component uses the WordCard component. When the sense and its surrounding word are both narrow, there is somehow a horizontal overflow triggered. See screenshot example:

Image Image

Comments on the Issue (you are @copilot in this section)


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.


This change is Reviewable

- Remove minWidth: 150 from SenseCard to prevent overflow when container is narrow
- Add overflowX: hidden to WordCard's content div as a safety measure

Co-authored-by: imnasnainaec <6411521+imnasnainaec@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix horizontal overflow in MergeChange component Fix SenseCard horizontal overflow in MergeDupsCompleted WordCard Mar 16, 2026
Copilot AI requested a review from imnasnainaec March 16, 2026 19:49
@github-actions
Copy link

⚠️ Commit Message Format Issues ⚠️
commit b3ebc0c26b:
3: B1 Line exceeds max length (82>80): "- Remove minWidth: 150 from SenseCard to prevent overflow when container is narrow"

@codecov
Copy link

codecov bot commented Mar 16, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 66.34%. Comparing base (c6afad4) to head (b3ebc0c).

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #4206      +/-   ##
==========================================
- Coverage   75.15%   66.34%   -8.81%     
==========================================
  Files         302      246      -56     
  Lines       11099     6254    -4845     
  Branches     1394      791     -603     
==========================================
- Hits         8341     4149    -4192     
+ Misses       2357     1846     -511     
+ Partials      401      259     -142     
Flag Coverage Δ
backend ?
frontend 66.34% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[MergeDupsComplete>MergeChange] Sense x-overflowing word

2 participants