Skip to content

Show the breadcrumb in medium resolutions (700px)#15863

Merged
andreslucena merged 3 commits intodecidim:developfrom
i-need-another-coffee:chore/header/breadcrumbs
Jan 21, 2026
Merged

Show the breadcrumb in medium resolutions (700px)#15863
andreslucena merged 3 commits intodecidim:developfrom
i-need-another-coffee:chore/header/breadcrumbs

Conversation

@alecslupu
Copy link
Copy Markdown
Contributor

@alecslupu alecslupu commented Dec 30, 2025 •
edited by coderabbitai bot
Loading

🎩 What? Why?

In this PR i am fixing the position of the breacrumb in certain pages.

📌 Related Issues

Link your PR to an issue

Testing

  1. On develop branch, visit any participatory processs about page
  2. Switch to mobile
  3. See breadcrumb is not shown
  4. Apply patch
  5. Repeat 1, 2
  6. See the breadcrumb is clearly shown

📷 Screenshots

Please add screenshots of the changes you are proposing

Before

image #### After image

♥️ Thank you!

Summary by CodeRabbit

  • Bug Fixes
    • Enhanced header and menu bar positioning for improved display consistency across medium and small screen sizes
    • Updated mobile breadcrumb navigation rendering for better usability on mobile devices

✏️ Tip: You can customize this high-level summary in your review settings.

@alecslupu alecslupu force-pushed the chore/header/breadcrumbs branch from 6fef9eb to 5cd9ff3 Compare December 30, 2025 08:09
@alecslupu alecslupu mentioned this pull request Dec 30, 2025
Merged
6 tasks
@github-actions github-actions bot added module: core type: internal PRs that aren't necessary to add to the CHANGELOG for implementers labels Dec 30, 2025
github-actions[bot]
github-actions bot previously approved these changes Dec 30, 2025
View reviewed changes
@alecslupu alecslupu marked this pull request as ready for review December 30, 2025 08:54
Copilot AI review requested due to automatic review settings December 30, 2025 08:54
Copilot AI reviewed Dec 30, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes breadcrumb visibility issues at certain screen resolutions (~700 pixels width) by adjusting responsive breakpoints and creating a dedicated mobile breadcrumb template. The changes shift the mobile/desktop transition point from the lg (1024px) and md (768px) breakpoints down to sm (640px) throughout the header styling.

Key Changes:

  • Created new mobile-specific breadcrumb template (_menu_breadcrumb_mobile.html.erb) to replace the previous mobile-tablet version
  • Updated CSS breakpoints from lg: and md: to sm: across header components for consistent mobile behavior at 640px
  • Modified JavaScript sticky header logic to use md breakpoint instead of sm

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.

File Description
decidim-core/app/views/layouts/decidim/header/_menu_breadcrumb_mobile.html.erb New mobile breadcrumb template with back navigation and mobile action support
decidim-core/app/views/layouts/decidim/header/_menu.html.erb Updated partial reference to use new mobile breadcrumb template
decidim-core/app/packs/stylesheets/decidim/_header.scss Comprehensive breakpoint updates from lg:/md: to sm: for mobile menu, dropdown, and breadcrumb visibility
decidim-core/app/packs/src/decidim/controllers/sticky_header/controller.js Changed screen size check from sm to md for sticky header margin calculation

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@alecslupu alecslupu mentioned this pull request Dec 30, 2025
Merged
@alecslupu alecslupu self-assigned this Dec 30, 2025
@alecslupu alecslupu marked this pull request as draft December 30, 2025 09:14
@alecslupu alecslupu assigned alecslupu and unassigned alecslupu Dec 30, 2025
alecslupu and others added 2 commits January 8, 2026 13:36
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Jan 19, 2026 •
edited
Loading

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

This pull request adjusts responsive design breakpoints in the header layout to address a visibility issue at 700 pixels width. Changes include shifting the JavaScript sticky header margin calculation from small to medium screens, updating SCSS header styling from large to small breakpoints, and switching the mobile breadcrumb component rendered in the header template.

Changes

Cohort / File(s) Summary
JavaScript Controller Breakpoint
decidim-core/app/packs/src/decidim/controllers/sticky_header/controller.js		 Adjusted menu bar container margin calculation breakpoint from sm to md, extending the responsive behavior to medium-sized screens.
SCSS Header Styling
decidim-core/app/packs/stylesheets/decidim/_header.scss		 Updated multiple responsive breakpoints from lg:* to sm:* and related spacing rules, affecting visibility and layout transitions for menu-mobile, links-desktop, dropdowns, and associated padding/spacing.
Template Breadcrumb Component
decidim-core/app/views/layouts/decidim/header/_menu.html.erb		 Changed rendered mobile breadcrumb partial from menu_breadcrumb_mobile_tablet to menu_breadcrumb_mobile.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 At 700 pixels, the breadcrumb had to hide,
But this clever fix brings it back with pride,
From lg to sm, the breakpoints realign,
Making mobile navigation look just fine!
hops with glee ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check ✅ Passed The code changes (breakpoint adjustments from lg to sm, menu bar margin calculation, and mobile breadcrumb partial) directly address the issue of breadcrumb visibility at 700px resolution.
Out of Scope Changes check ✅ Passed All changes focus on header styling and responsive breakpoints to fix breadcrumb visibility; no unrelated modifications detected.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check ✅ Passed The title directly and clearly summarizes the main objective: making the breadcrumb visible at medium resolutions (700px width). It matches the core purpose described in PR objectives and linked issue.

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

✨ Finishing touches
  • 📝 Generate docstrings

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

@alecslupu alecslupu marked this pull request as ready for review January 19, 2026 15:25
@alecslupu alecslupu assigned andreslucena and unassigned alecslupu Jan 19, 2026
andreslucena
andreslucena approved these changes Jan 21, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@andreslucena andreslucena left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Before

Image

After

Image

@andreslucena
Copy link
Copy Markdown
Member

andreslucena commented Jan 21, 2026

Merging with the failure from the flaky introduced with #15881

@andreslucena andreslucena changed the title On some resolutions (700 pixels width) the breadcrumb isn't shown Show the breadcrumb in medium resolutions (700px) Jan 21, 2026
@andreslucena andreslucena merged commit 304038b into decidim:develop Jan 21, 2026
82 of 86 checks passed
@alecslupu alecslupu linked an issue Jan 21, 2026 that may be closed by this pull request
in medium screen sizes the old Menu is still visible #15852
Closed
@alecslupu alecslupu mentioned this pull request Jan 21, 2026
Closed
@coderabbitai coderabbitai bot mentioned this pull request Jan 23, 2026
Merged
@coderabbitai coderabbitai bot mentioned this pull request Jan 23, 2026
Merged
@coderabbitai coderabbitai bot mentioned this pull request Mar 2, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@andreslucena andreslucena andreslucena approved these changes

@github-actions github-actions[bot] github-actions[bot] approved these changes

Assignees

@andreslucena andreslucena

Labels

module: core type: internal PRs that aren't necessary to add to the CHANGELOG for implementers

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

On some resolutions (700 pixels width) the breadcrumb isn't shown in medium screen sizes the old Menu is still visible

3 participants

@alecslupu @andreslucena