Windrose card somehow breaks vertical scrolling

AndLindemann commented 3 weeks ago

For any feature request you can open a new discussion here:
https://github.com/Clooos/Bubble-Card/discussions/categories/feature-requests

For any question you can open a new discussion here:
https://github.com/Clooos/Bubble-Card/discussions/categories/q-a

Describe the bug
I have the windrose card in a bubble popup on my dashboard (https://github.com/aukedejong/lovelace-windrose-card). However when this card is included, I can scroll down on my dashboard much farther than the container should usually allow and I'm seeing direction arrows from the windrose card on blank backgrounds down there. Not sure if it is an issue with the windrose card (it doesn't do this on non-bubble-card dashboards as far as I've seen), but maybe we can track this down and allocate it to where the fix needs to be done.

To Reproduce

---
title: "Mobile Dashboard"
kiosk_mode:
  hide_header: false
theme: "blue"
views:
  - title: Home
    path: home
    cards:
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: "#wetter"
            name: Wetter
            show_last_updated: false
            show_state: false
            show_attribute: false
            tap_action:
              action: none
            double_tap_action:
              action: none
            hold_action:
              action: none
            show_icon: true
            "false": []
            entity: weather.wetter
            icon: mdi:weather-partly-cloudy
            bg_opacity: "10"
            hide_backdrop: false
            shadow_opacity: "0"
            bg_blur: "14"
            margin_top_mobile: "-56px"
            button_type: name
            scrolling_effect: true
        - type: custom:windrose-card
            title: Windrichtung
            data_period:
              hours_to_show: 3
            max_width: 350
            refresh_interval: 300
            windspeed_bar_location: bottom
            windspeed_bar_full: true
            wind_direction_entity:
              entity: sensor.weatherly_wind_direction
              direction_unit: degrees
              use_statistics: false
              direction_compensation: 0
            current_direction:
              show_arrow: true
            windspeed_entities:
              - entity: sensor.weatherly_wind_gust
                name: ""
                speed_unit: auto
                use_statistics: false
            output_speed_unit: kph
            speed_range_beaufort: false
            windrose_draw_north_offset: 0
            cardinal_direction_letters: NESW
            matching_strategy: direction-first
            center_calm_percentage: true

It looks like the svg element of the windrose wind direction arrow is breaking out of the card into the main dashboard space, see developer console in second screenshot.

Expected behavior
Including the windrose card should not alter the vertical scrolling on the dashboard and should not allow the user to scroll down much farther into otherwise blank space on the dashboard

Screenshots

YAML
s above

Informations (please complete the following information):

OS: iOS, MacOS
Browser/App: Safari
Bubble Card version: 2.3.0-beta1
Home Assistant version: 2024.9.3

Thank you! 🍻

AndLindemann commented 3 weeks ago

Looks like a Windrose Update from today fixed this.

Clooos commented 3 weeks ago

Perfect! That's the kind of issue that I like to close 🤓

AndLindemann commented 1 week ago

It looks like the issue is still there @Clooos. Not sure what the relationship to bubble-card is, but I can only reproduce it when the windrose card is used inside a bubble-card popup. See https://github.com/aukedejong/lovelace-windrose-card/issues/87 - maybe you have an idea?

Clooos / Bubble-Card

Windrose card somehow breaks vertical scrolling #834