fix: wrap long dataset titles to prevent horizontal overflow by clombion · Pull Request #7 · datopian/portal-eiti

clombion · 2026-07-19T12:16:48Z

A dataset whose title is a long unbroken token — for example the filename-style
slug Itie_mocambique_8o_relatorio_i2a_consultoria_versao_final_28022020_eng —
has no break opportunity, so it stretches its container wider than the viewport.
On the dataset page the title runs off the right edge. On the mobile home page
the same title stretches a card in the latest-datasets grid, which pushes the
whole document wider than the screen, so the hero no longer spans the viewport
and leaves dead space to the right.

This wraps those titles and lets their grid and flex tracks shrink below their
content width, so a long token can no longer force a track wider than the
viewport.

Changes

fix: wrap long dataset titles

Add break-words to the page title (HeroSection), the home latest-datasets
card title, the search-result title (DatasetItem), and the resource name
(ResourcesList).
→ Long unbroken titles wrap instead of overflowing their container.

fix: constrain grid and flex tracks

Make the home latest-datasets grid single-column on mobile (grid-cols-1)
with min-w-0 cards, and add min-w-0 to the search results column.
→ A long token can no longer stretch a track past the viewport, so the
mobile hero spans the full width again.

Test plan

Home, dataset, and search pages show zero horizontal overflow at a mobile
viewport (DevTools: documentScrollWidth === clientWidth).
The Mozambique dataset title wraps to three lines within the viewport on
its dataset page.
The mobile hero background spans the full viewport width.
Accessibility CI passes on the fork.
eslint clean on all changed files.

Summary by CodeRabbit

Bug Fixes
- Improved text wrapping for long titles across hero sections, resource titles, dataset items, and dataset cards by enabling word-breaking.
- Refined responsive dataset grid behavior on small screens (single-column layout, consistent spacing) to reduce overflow.
- Stabilized the search results layout on constrained widths by ensuring containers can shrink properly (min-width: 0).

vercel · 2026-07-19T12:16:52Z

@clombion is attempting to deploy a commit to the Datopian Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2026-07-19T12:17:03Z

Warning

Review limit reached

@clombion, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 54 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6876ab2e-cefc-409e-a9ec-ebaee748c794

📥 Commits

Reviewing files that changed from the base of the PR and between ecc4bbc and e4aa81f.

📒 Files selected for processing (5)

components/_shared/HeroSection.tsx
components/dataset/individualPage/ResourcesList.tsx
components/dataset/search/DatasetItem.tsx
components/home/mainSection/MainSection.tsx
pages/search.tsx

📝 Walkthrough

Walkthrough

Updated Tailwind classes to wrap long titles and constrain dataset card and search-result layouts across shared, home, and search components.

Changes

Responsive text wrapping

Layer / File(s)	Summary
Title wrapping across dataset views `components/_shared/HeroSection.tsx`, `components/dataset/individualPage/ResourcesList.tsx`, `components/dataset/search/DatasetItem.tsx`	Added `break-words` to hero, resource, and dataset title elements.
Dataset grid and results constraints `components/home/mainSection/MainSection.tsx`, `pages/search.tsx`	Added explicit single-column grid behavior and `min-w-0` constraints to dataset cards and the search results column.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

datopian/portal-eiti#6: Modifies title rendering and styling in shared UI components.

🚥 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 is concise and accurately captures the main fix: wrapping long titles to prevent horizontal overflow.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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

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

A dataset title with a long unbroken token (e.g. a filename-style slug) had no break opportunity, so it stretched its container past the viewport width. On the dataset page the title ran off-screen; on the mobile home page it widened a card in the latest-datasets grid, pushing the whole document wider than the viewport so the hero no longer spanned the screen. Wrap titles and let their grid/flex tracks shrink: - HeroSection h1, MainSection card title, DatasetItem title, and the ResourcesList resource name get break-words. - The home latest-datasets grid is single-column on mobile (grid-cols-1) with min-w-0 cards, and the search results column gets min-w-0, so a long token can no longer force a track wider than the viewport.

coderabbitai · 2026-07-19T14:40:36Z

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai · 2026-07-19T14:46:35Z

✅ Action performed

Full review finished.

Your plan includes PR reviews subject to rate limits. More reviews will be available in 54 minutes.

demenech

LGTM

clombion force-pushed the main branch from 08e5820 to e4aa81f Compare July 19, 2026 12:47

demenech approved these changes Jul 20, 2026

View reviewed changes

demenech merged commit 0f6c3cc into datopian:main Jul 20, 2026
2 of 3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: wrap long dataset titles to prevent horizontal overflow#7

fix: wrap long dataset titles to prevent horizontal overflow#7
demenech merged 1 commit into
datopian:mainfrom
civicliteracies:main

clombion commented Jul 19, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Jul 19, 2026

Uh oh!

coderabbitai Bot commented Jul 19, 2026 •

edited

Loading

Review limit reached

Walkthrough

Changes

Uh oh!

coderabbitai Bot commented Jul 19, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 19, 2026 •

edited

Loading

Uh oh!

demenech left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

clombion commented Jul 19, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Test plan

Summary by CodeRabbit

Uh oh!

vercel Bot commented Jul 19, 2026

Uh oh!

coderabbitai Bot commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Walkthrough

Changes

Uh oh!

coderabbitai Bot commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

demenech left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

clombion commented Jul 19, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 19, 2026 •

edited

Loading

coderabbitai Bot commented Jul 19, 2026 •

edited

Loading

coderabbitai Bot commented Jul 19, 2026 •

edited

Loading