[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