fix: card height in grid

This changes the card height to occupy the assigned height in grid/sections view.
The Graph will be stretched to fill this space.
Its aspect ration will change. Change the `height` option to make it look better.

How is it done:

:host.height = 100%
=> fixes height of entire card to fill space, if there is a defined space

graph.flex = auto
=> assigns remaining space in card to the graph itself

graph_container.height = 100%
=> makes the container fill the entire space

graph__container__svg:
.position=relative
.width=100%
.height=100%
=> makes the container use the entire space. Not only in flex width.

The relative positioning changes the z-order of the graph and the labels.
So, this is fixed in the main source code.

The SVG also is freed aspect-ratio-wise, otherwise it could not fill the entire space.

src/main.js

@@ -326,11 +326,11 @@ class MiniGraphCard extends LitElement {
     return this.config.show.graph ? html`
       <div class="graph">
         <div class="graph__container">
-          ${this.renderLabels()}
-          ${this.renderLabelsSecondary()}
           <div class="graph__container__svg">
             ${this.renderSvg()}
           </div>
+          ${this.renderLabels()}
+          ${this.renderLabelsSecondary()}
         </div>
         ${this.renderLegend()}
       </div>` : '';
@@ -510,6 +510,7 @@ class MiniGraphCard extends LitElement {
     const { height } = this.config;
     return svg`
       <svg width='100%' height=${height !== 0 ? '100%' : 0} viewBox='0 0 500 ${height}'
+        preserveAspectRatio='none'
         @click=${e => e.stopPropagation()}>
         <g>
           <defs>

src/style.js

@@ -4,6 +4,7 @@ const style = css`
   :host {
     display: flex;
     flex-direction: column;
+    height: 100%;
   }
   ha-card {
     flex-direction: column;
@@ -231,6 +232,7 @@ const style = css`
     right: 0;
   }
   .graph {
+    flex: auto;
     align-self: flex-end;
     box-sizing: border-box;
     display: flex;
@@ -242,10 +244,13 @@ const style = css`
     display: flex;
     flex-direction: row;
     position: relative;
+    height: 100%;
   }
   .graph__container__svg {
     cursor: default;
-    flex: 1;
+    position: relative;
+    width: 100%;
+    height: 100%;
   }
   svg {
     overflow: hidden;