Sidebar home button (logo) shows no tooltip in the collapsed icon rail, unlike menu items

Open Beginner friendly
  • Is something wrong?
#7,879 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
Under an hour
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, php, symfony
Domain
frontend

Research direction

Read the header_logo block in templates/layout.html.twig and compare it with templates/components/Sidebar/Item.html.twig, where the .ea-sidebar-item-tooltip span is emitted for menu entries. Add the same aria-hidden tooltip span with {{ ea.dashboardTitle|striptags }} next to the logo anchor so it inherits the existing tooltip rules in assets/css/easyadmin-theme/sidebar.css. The secondary design-token note in sidebar.css:332 and base.css is optional. Done: hovering the logo in the collapsed icon rail shows a tooltip identical to menu items.

Written by the indexing model from the issue text.

Description

design

Summary

In the collapsed icon rail (body.ea-sidebar-width-compact), every sidebar menu entry reveals a tooltip with its label on hover, but the sidebar header logo - the "home" button that links to the dashboard - does not.

Steps to reproduce

  1. Open any EasyAdmin page (e.g. a CRUD index) as an admin.
  2. Collapse the sidebar to the icon rail (window under 992px, or the width toggle).
  3. Hover any menu item: a tooltip with its label appears.
  4. Hover the logo at the very top of the sidebar: no tooltip appears.

Expected

The home button shows the same tooltip as every other entry (the dashboard title).

Actual

No tooltip. It only carries a plain browser title (title="{{ ea.dashboardTitle|striptags }}" in layout.html.twig), which uses neither the styling nor the positioning of EasyAdmin's tooltip.

Root cause

templates/components/Sidebar/Item.html.twig emits, for every item that is not a submenu parent, a dedicated element:

{# mirrors the label so the compact (icon rail) mode can show it as a pure-CSS tooltip; the <a> element already provides the accessible name #}
<span class="ea-sidebar-item-tooltip" aria-hidden="true">{{ label|raw }}</span>

The header logo is not built from that component (templates/layout.html.twig, header_logo block):

<a class="logo" title="{{ ea.dashboardTitle|striptags }}" href="{{ path(ea.dashboardRouteName) }}">
    <span class="logo-custom">{{ ea.dashboardTitle|raw }}</span>
    <span class="logo-compact"><twig:ea:Icon name="internal:home" /></span>
</a>

so no .ea-sidebar-item-tooltip element is ever created for it.

Suggested fix

Emit the same tooltip element next to the logo:

<span class="ea-sidebar-item-tooltip" aria-hidden="true">{{ ea.dashboardTitle|striptags }}</span>

It would then inherit the existing .ea-sidebar-item-tooltip rules (positioning, opacity, inline offset) that already apply to the menu entries.

Secondary note: alignment

assets/css/easyadmin-theme/sidebar.css:332 aligns the header with the icon column through a hardcoded number:

body.ea-sidebar-width-compact .ea-sidebar-header {
    padding-inline-start: calc((64px - var(--icon-size-lg)) / 2);
}

The nearby comment explains why (the rail is 64px, see .wrapper in base.css), but that 64px is duplicated from the grid definition grid-template-columns: 64px auto (base.css:140). Exposing it as a design token (e.g. --sidebar-rail-width) would keep the two in sync when the theme scale changes. Measured on a 5.6.1 install: the logo icon sits at x=20px and the first menu icon at x=20px, i.e. perfectly aligned today, so this is a maintainability note rather than a visible defect.

Environment

  • EasyAdminBundle 5.6.1
  • Symfony 7.x, default theme, no custom templates
Dominant language
PHP
Stars
4.3k
Forks
1.1k
Avg merge
1d 23h
Merged PRs (30d)
28

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from EasyCorp/EasyAdminBundle

All issues in EasyCorp/EasyAdminBundle

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.