'Styled badge' demo keeps pushing the scroll to the bottom in v25 #51

Activity

1. Totremont

   added

   bugSomething isn't workingSomething isn't working

   on Jul 6, 2026
2. Totremont

   added this to Flowing Code Addonson Jul 6, 2026
3. Totremont

   added the

   Bug

   issue type on Jul 6, 2026
4. github-project-automation

   moved this to Inbox (needs triage) in Flowing Code Addonson Jul 6, 2026
5. javier-godoy commented on Jul 13, 2026

   

   javier-godoy

   on Jul 13, 2026

   Contributor

   More actions

   Confirmed
6. javier-godoy

   moved this from Inbox (needs triage) to To Do in Flowing Code Addonson Jul 13, 2026
7. paodb commented on Oct 16, 2026

   

   paodb

   on Oct 16, 2026

   Last edited by paodb

   Member

   More actions

   The issue is not in BadgeList nor in Commons Demo, but in AddonsDemo25. It can be reproduced in both staging and production, both running BadgeList 2.1.1-SNAPSHOT on Vaadin 25.3.0.

   Root cause

   In AddonsDemo25, addons-info.json still lists BadgeList with "auraSupported": false. Because of that, DemoLayout doesn't place the TabbedDemo directly in the AppLayout, but inside the wrapper Div created by createUnsupportedThemeWrapper. That wrapper has no height, so the height: 100% of the TabbedDemo (and its split layout) can't be resolved and the layout grows to the full height of the source code. The code viewer then doesn't scroll on its own and the whole app-layout content becomes scrollable.

   When hovering an example, the code viewer highlights the matching block with scrollIntoView, which now scrolls the whole page down to the code. Scrolling back up with the wheel puts the mouse over an example again, so the page jumps down again. That's why the scroll looks stuck at the bottom. The v24 demo doesn't wrap the content, which is why it doesn't happen there.

   How to fix it

   BadgeList already supports Aura (see #54), but AddonsDemo25 was never updated to reflect that. Setting "auraSupported": true for BadgeList in AddonsDemo25 addons-info.json removes the wrapper and fixes this issue (verified by giving the wrapper a full height in the browser: the page no longer scrolls on hover).

   Separately, the wrapper in createUnsupportedThemeWrapper should also get a full size (setSizeFull()), otherwise the same problem will affect any Lumo-only add-on that uses TabbedDemo with source highlighting.
8. paodb

   removed the

   Bug

   issue type on Oct 16, 2026
9. paodb

   removed

   bugSomething isn't workingSomething isn't working

   on Oct 16, 2026
10. paodb

    self-assigned this

    on Oct 16, 2026
11. paodb commented on Oct 19, 2026

    

    paodb

    on Oct 19, 2026

    Member

    More actions

    Fixed in https://github.com/FlowingCode/AddonsDemo/pull/497
12. paodb

    closed this as completedon Oct 19, 2026
13. github-project-automation

    moved this from To Do to Done in Flowing Code Addonson Oct 19, 2026