fix: enable horizontal scroll for import history table

[anupam-pandey01]

Summary

Fixes a UI issue on the Import History page where table content overlaps on smaller screens or when importing data with long values.

Proposed changes (including videos or screenshots)

Screen.Recording.2026-02-08.031219.mp4

Issue(s)

Fixes: #38544

Steps to test or reproduce

• Go to Administration → Import
• Upload an import ZIP containing CSV files with long values (e.g. long usernames or file names)
• Navigate to Import History
• Reduce screen width (tablet/mobile size)

Further comments

1. This change improves the usability of the Import History table when handling long text values.
2. Uploaded sample CSV with long text values

Summary by CodeRabbit

• Style
  • Improved import history table scrolling and layout to better handle wide content and horizontal overflow.
  • Added single-line truncation with ellipsis to key fields in import operation summaries for clearer, more consistent display.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: 853273d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

Walkthrough

Added a horizontal scroll container around the Import History table and applied single-line truncation with ellipsis to several table cells to prevent text overlap on small screens.

Changes

Cohort / File(s)	Summary
Import History Page apps/meteor/client/views/admin/import/ImportHistoryPage.tsx	Wrapped the import table in a Box with horizontal scrolling (overflow="auto"), moved the Table inside the Box, and set Table to fixed={false}. Adjusted header column spans (Counters column from 4→5).
Row Cell Truncation apps/meteor/client/views/admin/import/ImportOperationSummary.tsx	Added truncateCellStyle and applied single-line ellipsis truncation to type, updatedAt, status, and fileName cells (including non-small variants) to avoid overlap on narrow viewports.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 Long text once tangled in rows small,
Now scrolls and truncates—no overlap at all!
Ellipsis nibs mark where the long words stop,
Tables breathe easy from bottom to top.
Import history hops along—neat, tidy, and tall.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The changes in ImportOperationSummary.tsx (adding truncateCellStyle) appear to be out-of-scope. The linked issue #38544 and PR objectives focus only on ImportHistoryPage.tsx horizontal scrolling, not on cell truncation styling in a different component.	Review whether ImportOperationSummary.tsx changes are necessary for the horizontal scroll fix. If unrelated, remove them or document their connection to preventing overlap issues.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: enabling horizontal scroll for the import history table, which directly addresses the core issue being fixed.
Linked Issues check	✅ Passed	The pull request implements all key coding requirements from #38544: adds horizontal scrolling to the Import History table via Box wrapper, adjusts table layout (fixed={false}), and modifies column spans to prevent text overlap.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

apps/meteor/client/views/admin/import/ImportHistoryPage.tsx (1)

133-135: Horizontal scroll wrapper looks good; minor indentation nit.

The Box overflow="auto" approach is a clean way to enable horizontal scrolling. Two small things:

1. The <Table> on line 135 appears to be at the same indentation level as <Box> on line 134 — it should be indented one level deeper for readability.
2. Line 133 has a trailing space before > in <PageScrollableContentWithShadow >.

🧹 Indentation / whitespace cleanup

-		<PageScrollableContentWithShadow >
-			<Box overflow="auto">
-			<Table data-qa-id='ImportTable' fixed={false}>
+		<PageScrollableContentWithShadow>
+			<Box overflow='auto'>
+				<Table data-qa-id='ImportTable' fixed={false}>

And correspondingly at the end:

-			</Table>
-			</Box>
+				</Table>
+			</Box>

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3451cec and 853273d.

📒 Files selected for processing (1)

• apps/meteor/client/views/admin/import/ImportHistoryPage.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/views/admin/import/ImportHistoryPage.tsx

🔇 Additional comments (2)

apps/meteor/client/views/admin/import/ImportHistoryPage.tsx (2)

152-152: colSpan fix from 4 → 5 is correct.

There are 5 sub-columns under "Counters" (Users, Contacts, Channels, Messages, Total), so colSpan={5} is the right value. This appears to fix a pre-existing bug.

---

134-135: The fixed={false} prop is supported on the fuselage Table component at version 0.71.0.

The prop is optional (defaults to true) and correctly disables table-layout: fixed to allow columns to size to their content. This is the appropriate setting for a scrollable container, as evidenced by consistent usage across the codebase (e.g., ChannelDesertionTable, PermissionsTable).

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cubic-dev-ai]

No issues found across 2 files