Card Dynamically Keeps Growing and Growing in Size

[kaijk]

I'm using this card within the custom:layout-card to create a weather page using a grid layout like this:

  - type: custom:layout-card
    layout_type: grid-layout
    layout:
     grid-template-columns: 3fr 3fr repeat(6, 1fr) 
     grid-column-gap: 0px
     grid-row-gap: 0px
     grid-template-rows: 30px 235px 235px 200px 200px
     grid-template-areas: |
       "   .           .        .        .       .      . temp-hist header"
       "windy       windy   graph1   graph1 graph1 summary summary summary"
       "windy       windy   graph2   graph2 graph2 summary summary summary"
       "windrose   rain2   hour1    hour2   hour3    hour4   hour5  hour6"
       "windrose   rain2   hour7    hour8   hour9   hour10  hour11 hour12"  

When I include the windrose card the view starts dynamically growing. The windrose card expands compressing the fields to the right as if ignoring the frs.

I've tried both with and without the max_width parameter and replacing the windy iframe with a markdown card. (Windy grows as well, but not until the windrose is included.) This all worked fine until I included the windrose. Note, the black areas in the screenshot are other graphs that don't render after including the windrose.

Of course, this may not be an issue with this card, but it happens when adding the card to an existing layout.
This is immediately after a View Refresh:

Then, a few seconds after the View Refresh:
Windrose grows only to the right (with the max_width set) which drags the iframe down and right proportionally.

This is the happy and stable view without including the windrose card into the lower left corner.

Here is the complete windrose card definition.

type: custom:windrose-card
title: Wind direction
view_layout:
  grid-row-start:       windrose
  grid-row-end:        windrose
  grid-column-start: windrose
  grid-column-end:  windrose
data_period:
  hours_to_show: 24
refresh_interval: 60
max_width: 350
windspeed_bar_full: true
windspeed_bar_location: right
wind_direction_entity:
  entity: sensor.gw2000b_wind_direction
  direction_unit: degrees
  use_statistics: false
  direction_compensation: 0
windspeed_entities:
  - entity: sensor.gw2000b_wind_speed
    name: Average
    speed_unit: auto
    use_statistics: false
  - entity: sensor.gw2000b_wind_gust
    name: Gust
    speed_unit: auto
    use_statistics: false
output_speed_unit: mph
speed_range_beaufort: false
speed_ranges:
  - from_value: 0
    color: rgb(0,255,0)
  - from_value: 1
    color: yellow
  - from_value: 5
    color: hsl(200, 100%, 60%)
  - from_value: 10
    color: orange
  - from_value: 20
    color: red
#speed_range_beaufort: true
windrose_draw_north_offset: 0
cardinal_direction_letters: NESW
matching_strategy: direction-first
center_calm_percentage: true

[kaijk]

Drilling down into the Insepctor, I see this for the card:

                <div class="card-content">
                    <canvas id="windRose" width="13861" height="186">
                    </canvas>
                </div>

Width just keeps growing, by itself

[kaijk]

I find that specifying width: and height: using card_mod stops the behavior. It appears that the card does not play well when the grid is defined using fr notation (see grid-template-columns: at the beginning above).

The challenge and why I'm using fr notation is that I'm deploying this on devices having differed screen widths. Fixing this card at 400px wide won't work. I like the card and would appreciate any insights.

card_mod:
  style: |
    ha-card {
      width: 400px;
      heigth: 400px;
    }

[daaf84]

Same here... Used Cardmod for now, but it messes uptime alignment of the rose in the border of the card.

[aukedejong]

I'm trying to find the time to rewrite the render code to use vector graphics.
Hopefully this will fix the problems described here.