Skip to content

fix(breadcrumb): added horizontal scrolling to prevent overflow#818

Open
RealPhobia wants to merge 4 commits into
crynta:mainfrom
RealPhobia:fix-breadcrumb-overflow
Open

fix(breadcrumb): added horizontal scrolling to prevent overflow#818
RealPhobia wants to merge 4 commits into
crynta:mainfrom
RealPhobia:fix-breadcrumb-overflow

Conversation

@RealPhobia

@RealPhobia RealPhobia commented Jun 17, 2026

Copy link
Copy Markdown

What

Added horizontal scrolling to the Breadcrumb component so that long file paths no longer overflow the screen.

Why

Before, deeply nested paths would break the flex-box layout, causing the breadcrumb UI to expand beyond the window bounds and become non-visible. Also half fulfills #616 (fixes breadcrumb overflow issue)

How

Added min-w-0 to the parent nav wrapper in breadcrumb.tsx to allow the flex-box children to shrink below their content size so when I added overflow-x-auto, whitespace-nowrap, and flex-nowrap to the BreadcrumbList, it would allow for horizontal scrolling and not allow for the flex-box to expand past a single line.

Testing

I tried it on my mac from pnpm tauri dev.

  • pnpm exec tsc --noEmit clean
  • Manual smoke-test of the affected feature
  • (If you touched src-tauri/) cargo test --locked and cargo clippy --all-targets --locked -- -D warnings clean
  • (If you changed a #[tauri::command] signature) called out below so the FE caller can be updated in lockstep
  • (If UI) tested in pnpm tauri dev
  • Platforms tested: macOS
  • Shells tested (if relevant):

Screenshots / GIFs

Before: Screenshot 2026-06-16 at 8 59 12 PM

After:
GIF for terax breadcrumb contribution
(its more smooth than in the gif)

Summary by CodeRabbit

  • Style
    • Updated breadcrumb layout to prevent text wrapping and enable horizontal scrolling for improved display on narrower screens.

@RealPhobia RealPhobia requested a review from crynta as a code owner June 17, 2026 04:40
@coderabbitai

coderabbitai Bot commented Jun 17, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: baab36d8-2818-42a7-a30e-11bb03af73e1

📥 Commits

Reviewing files that changed from the base of the PR and between 4a6d803 and fc1227b.

📒 Files selected for processing (1)
  • src/components/ui/breadcrumb.tsx

📝 Walkthrough

Walkthrough

Breadcrumb's root nav element gains a min-w-0 default class. BreadcrumbList replaces flex-wrap and wrap-break-word with flex-nowrap and overflow-x-auto, changing breadcrumb overflow behavior from line-wrapping to horizontal scrolling.

Changes

Breadcrumb Layout Update

Layer / File(s) Summary
Breadcrumb nav min-w-0 and list horizontal scroll
src/components/ui/breadcrumb.tsx
Breadcrumb nav adds min-w-0 to its default className. BreadcrumbList swaps flex-wrap + wrap-break-word for flex-nowrap + overflow-x-auto, making long breadcrumb paths scroll horizontally instead of wrapping.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related issues

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ 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 accurately summarizes the main change: adding horizontal scrolling to the Breadcrumb component to prevent overflow, which directly matches the core objective and code modifications.
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.


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

@RealPhobia RealPhobia closed this Jun 19, 2026
@RealPhobia RealPhobia reopened this Jun 19, 2026
@RealPhobia

Copy link
Copy Markdown
Author

I accidently closed the pr.

@coderabbitai

coderabbitai Bot commented Jun 20, 2026

Copy link
Copy Markdown

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

CodeRabbit commands

These commands are invoked using PR/Issue comments.

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai rate limit to show your current review rate limit status.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai evaluate custom pre-merge check --instructions <custom-checks-instructions> --name <custom-checks-title> [--mode <error|warning>] to validate the custom pre-merge checks instructions. Defaults to error when --mode is omitted.
  • @coderabbitai ignore pre-merge checks to override pre-merge checks and get an approval on PR.
  • @coderabbitai run pre-merge checks to run pre-merge checks on the pull request.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai emit path instructions to emit generated path-specific review instructions for this repository.
  • @coderabbitai resolve merge conflict to automatically resolve merge conflicts.
  • @coderabbitai autofix to automatically fix issues identified in unresolved review comments.
  • @coderabbitai resolve to resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai generate configuration to create a PR that adds the current resolved configuration as .coderabbit.yaml (or show it if already present).
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, support, documentation and community

  • Visit our status page to check the current availability of CodeRabbit.
  • Create a ticket on our support page for assistance with any issues or questions.
  • Visit our documentation site for detailed information on how to use CodeRabbit.
  • Join our Discord community to connect with other users and get help from the community.
  • Follow us on X/Twitter for updates and announcements.

@RealPhobia

Copy link
Copy Markdown
Author

@coderabbitai resolve

@coderabbitai

coderabbitai Bot commented Jun 20, 2026

Copy link
Copy Markdown
✅ Action performed

Comments resolved. Approval is disabled; enable reviews.request_changes_workflow to allow explicit top-level @coderabbitai resolve or @coderabbitai approve commands.

@coderabbitai

coderabbitai Bot commented Jun 20, 2026

Copy link
Copy Markdown

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Get PR details and checks
echo "=== PR Status ==="
gh pr view 818 --repo crynta/terax-ai --json state,title,statusCheckRollup

echo ""
echo "=== Pre-merge checks / reviews ==="
gh pr checks 818 --repo crynta/terax-ai 2>&1 || true

echo ""
echo "=== PR comments ==="
gh pr view 818 --repo crynta/terax-ai --comments --json comments 2>&1 | head -200

Length of output: 16758


🏁 Script executed:

#!/bin/bash
# Look at the breadcrumb.tsx file
cat src/components/ui/breadcrumb.tsx 2>/dev/null || fd -i breadcrumb.tsx --exec cat {}

Length of output: 2838



@RealPhobia The failing pre-merge check requires ≥80% docstring coverage on src/components/ui/breadcrumb.tsx. Currently none of the 7 exported components have JSDoc comments. Here's the fix:

  • Add JSDoc comments to all 7 exported functions in src/components/ui/breadcrumb.tsx

  • 📌 Commit the changes to this branch

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant