[openstreetmap/openstreetmap-website] Fix element navbar visibility (PR #6864)
Arpan Mukherjee
notifications at github.com
Thu Mar 5 12:09:44 UTC 2026
### Description
This change improves the visibility of the element navigation bar in the sidebar.
Previously, the navigation (`Node / History / Versions`) appeared after the element content (tags, changeset details, etc.), which meant users often had to scroll to access it when elements had many tags.
This PR moves the navigation `<nav>` block directly below the sidebar header and applies Bootstrap utility classes to keep it visible while scrolling.
Changes made:
* Reordered the HTML layout so the navigation appears above the element content.
* Added Bootstrap utility classes (`sticky-top`, `bg-body`, `border-bottom`, `pb-2`, `z-1`) so the navigation remains visible while scrolling.
Files modified:
* `app/views/elements/show.html.erb`
* `app/views/old_elements/index.html.erb`
* `app/views/old_elements/_actions.html.erb`
This improves usability when browsing elements with long tag lists or version histories.
### How has this been tested?
Tested locally using the development environment with Docker.
Steps:
1. Started the Rails server locally.
2. Created a test node in the Rails console.
3. Added many tags to the node to create a long scrollable sidebar.
4. Verified that the navigation bar now appears directly below the element title and remains visible while scrolling.
Test pages checked:
* `/node/:id`
* `/node/:id/history`
* `/node/:id/:version`
<img width="349" height="631" alt="image" src="https://github.com/user-attachments/assets/2dcc3392-6ad4-452b-b966-73df26d1b432" />
You can view, comment on, or merge this pull request online at:
https://github.com/openstreetmap/openstreetmap-website/pull/6864
-- Commit Summary --
* Add Codeberg social link icon and URL pattern support issue #6814
* Simplify Codeberg SVG to remove gradients and inline styles
* Fix RuboCop indentation and whitespace
* Remove accidental file
* Move element navigation above content and make it sticky
-- File Changes --
A app/assets/images/social_link_icons/codeberg.svg (16)
M app/models/social_link.rb (1)
M app/views/elements/show.html.erb (28)
M app/views/old_elements/_actions.html.erb (28)
M app/views/old_elements/index.html.erb (43)
M test/models/social_link_test.rb (9)
-- Patch Links --
https://github.com/openstreetmap/openstreetmap-website/pull/6864.patch
https://github.com/openstreetmap/openstreetmap-website/pull/6864.diff
--
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6864
You are receiving this because you are subscribed to this thread.
Message ID: <openstreetmap/openstreetmap-website/pull/6864 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260305/c7693ad6/attachment.htm>
More information about the rails-dev
mailing list