fixed some alignment

flightscore/src/components/line-chart.ts

@@ -10,8 +10,9 @@ export interface LineSeries {
 @customElement('line-chart')
 export class LineChart extends LitElement {
   static styles = css`
-:host {
-      display: inline-flex;
+    :host {
+      display: block;
+      width: 100%;
     }
 
     .chart-wrapper {
@@ -23,6 +24,8 @@ export class LineChart extends LitElement {
       flex-direction: column;
       gap: 1.25rem;
       transition: border-color 0.25s ease;
+      height: 100%;
+      box-sizing: border-box;
     }
 
     .chart-wrapper:hover {
@@ -37,6 +40,7 @@ export class LineChart extends LitElement {
       display: flex;
       justify-content: space-between;
       align-items: baseline;
+      flex-shrink: 0;
     }
 
     .title {
@@ -52,10 +56,16 @@ export class LineChart extends LitElement {
       margin: 0;
     }
 
-.svg-container {
+    .svg-container {
       width: 100%;
-      overflow: visible;
+      min-height: 0;
+      flex: 1 1 auto;
       aspect-ratio: 500 / 300;
+      overflow: visible;
+    }
+
+    :host([style*='height']) .svg-container {
+      aspect-ratio: unset;
     }
 
     svg {
@@ -64,6 +74,7 @@ export class LineChart extends LitElement {
       overflow: visible;
       display: block;
     }
+
     .grid-line {
       stroke: var(--color-border);
       stroke-width: 0.5;
@@ -97,6 +108,7 @@ export class LineChart extends LitElement {
       display: flex;
       gap: 1rem;
       flex-wrap: wrap;
+      flex-shrink: 0;
     }
 
     .legend-item {
@@ -173,9 +185,7 @@ export class LineChart extends LitElement {
     const sx = (v: number) =>
       p.left + ((v - xScale.min) / (xScale.max - xScale.min)) * w;
     const sy = (v: number) =>
-            p.top +
-            h -
-            ((v - yScale.min) / (yScale.max - yScale.min)) * h;
+      p.top + h - ((v - yScale.min) / (yScale.max - yScale.min)) * h;
 
     const gridLines = [];
     for (
@@ -209,7 +219,10 @@ export class LineChart extends LitElement {
       if (!sorted.length) return svg``;
 
       const d = sorted
-                .map((pt, j) => `${j === 0 ? 'M' : 'L'}${sx(pt.x)},${sy(pt.y)}`)
+        .map(
+          (pt, j) =>
+            `${j === 0 ? 'M' : 'L'}${sx(pt.x)},${sy(pt.y)}`
+        )
         .join(' ');
 
       const areaD =
@@ -238,13 +251,26 @@ export class LineChart extends LitElement {
             `
           : null}
         <div class="svg-container">
-            <svg viewBox="0 0 ${this.width} ${this.height}">
+          <svg
+            viewBox="0 0 ${this.width} ${this.height}"
+            preserveAspectRatio="none"
+          >
             ${gridLines} ${lines}
-                <text class="axis-label" x="${this.width / 2}" y="${this.height - 4}" text-anchor="middle">
+            <text
+              class="axis-label"
+              x="${this.width / 2}"
+              y="${this.height - 4}"
+              text-anchor="middle"
+            >
               ${this.xLabel}
             </text>
-                <text class="axis-label" x="12" y="${this.height / 2}" text-anchor="middle"
-                    transform="rotate(-90, 12, ${this.height / 2})">
+            <text
+              class="axis-label"
+              x="12"
+              y="${this.height / 2}"
+              text-anchor="middle"
+              transform="rotate(-90, 12, ${this.height / 2})"
+            >
               ${this.yLabel}
             </text>
           </svg>
@@ -255,10 +281,13 @@ export class LineChart extends LitElement {
                 ${this.series.map(
                   (s, i) => html`
                     <div class="legend-item">
-                <span class="legend-line" style="background: ${s.color ||
+                      <span
+                        class="legend-line"
+                        style="background: ${s.color ||
                         this.defaultColors[
                           i % this.defaultColors.length
-                            ]}"></span>
+                        ]}"
+                      ></span>
                       <span class="legend-label">${s.label}</span>
                     </div>
                   `