fix(loadpage): wrap top 6 rows of preview table in horizontal scrollbar

[tonywu1999]

Motivation and Context

When displaying the top 6 rows of preview tables during data upload, tables that contain many columns can exceed the width of their container, causing horizontal overflow and poor user experience. This PR addresses the issue by enabling horizontal scrolling for these preview tables, allowing users to view all columns without horizontal page overflow affecting the page layout.

Changes

• Wrapped preview table outputs with horizontal scrollbar containers: Three preview tables (summary, summary_ptm, summary_prot) are now wrapped in div elements with style = "overflow-x: auto;" CSS applied
  • Line 609: Non-PTM dataset preview table (summary)
  • Line 613: PTM dataset preview table (summary_ptm)
  • Line 616: Unmodified protein dataset preview table (summary_prot)
• The underlying table rendering logic and data sources remain unchanged; only the container styling is modified
• Change applies to the summary tables UI rendered within the summary_tables reactive output in the loadpage server module

Unit Tests

No unit tests were added or modified. The existing test suite in tests/testthat/test-module-loadpage-ui.R covers UI structure validation but does not include specific tests for the server-side rendering of preview tables or their container styling.

Coding Guidelines

The changes follow the project's established patterns and do not introduce any violations of the coding guidelines documented in .github/CONTRIBUTING.md. The modification uses standard Shiny tag manipulation with CSS styling consistent with the codebase's approach to layout management.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce2804ca-9606-4138-8db2-d65c5d1d01ed

📥 Commits

Reviewing files that changed from the base of the PR and between d7e7355 and d640a62.

📒 Files selected for processing (1)

• R/module-loadpage-server.R

---

📝 Walkthrough

Walkthrough

The PR adjusts the UI rendering of three "Top 6 rows" preview tables by wrapping each tableOutput in a div with overflow-x: auto CSS styling. This enables horizontal scrolling for tables that exceed their container width, without altering the underlying table data or logic.

Changes

Cohort / File(s)	Summary
Table Output Styling R/module-loadpage-server.R	Wrapped summary, summary_ptm, and summary_prot table outputs in divs with horizontal scroll styling for improved layout when tables are wider than their container.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 Hop hop, tables now scroll side to side,
No more cramped views, content rides with pride,
A gentle CSS touch, simple and clean,
The prettiest data preview you've ever seen!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: wrapping preview table outputs in a div with horizontal scrollbar styling to handle wide tables.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-overflow

---

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.}