From c7bce195bf2d43d0b6ea38549567cbd0d18fa28c Mon Sep 17 00:00:00 2001
From: Johnny D <jvdomino@gmail.com>
Date: Tue, 21 Jan 2025 13:18:42 -0500
Subject: [PATCH 1/2] open pr


From 787d1cbdc65630327c35dad63452cc556485f3d9 Mon Sep 17 00:00:00 2001
From: Johnny D <jvdomino@gmail.com>
Date: Tue, 21 Jan 2025 13:27:36 -0500
Subject: [PATCH 2/2] prevent overflowing of text chart text

---
 src/components/charts/chart.ts    |  9 ++-------
 src/components/charts/composed.ts | 16 +++++++++-------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/charts/chart.ts b/src/components/charts/chart.ts
index ca2cad07..ef5dcc8f 100644
--- a/src/components/charts/chart.ts
+++ b/src/components/charts/chart.ts
@@ -737,13 +737,8 @@ export default class AstraChart extends ClassifiedElement {
     // Line break (double space followed by a newline)
     markdown = markdown.replace(/  \n/g, '<br>')
 
-    return html`<div
-      variant=${variant}
-      style=${`display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; font-family: Inter, sans-serif;`}
-      class="flex-1 self-start text-neutral-900 dark:text-neutral-100"
-    >
-      ${unsafeHTML(markdown)}
-    </div>`
+    // add `truncate` here to get ellipsis working, but at the cost of losing visibility of most of the content
+    return html`<div variant=${variant} class="flex-1 self-start text-neutral-900 dark:text-neutral-100">${unsafeHTML(markdown)}</div>`
   }
 
   private renderAsSingleValue() {
diff --git a/src/components/charts/composed.ts b/src/components/charts/composed.ts
index bae70c0e..28cbb5e8 100644
--- a/src/components/charts/composed.ts
+++ b/src/components/charts/composed.ts
@@ -201,14 +201,16 @@ export default class AstraComposedChart extends AstraChart {
       >
         <div
           id="composed-chart"
-          class=${`dark:text-neutral-100 text-neutral-950 h-full flex flex-col ${layer?.type === 'table' ? '' : 'p-5'} gap-4 rounded-lg bg-white dark:bg-black group/actions`}
+          class=${`dark:text-neutral-100 text-neutral-950 h-full ${layer?.type === 'table' ? '' : 'p-5'} gap-4 rounded-lg bg-white dark:bg-black group/actions`}
         >
-          ${layer?.type === 'single_value'
-            ? // Single value charts show the highlights at the bottom of the card
-              html`${headerSection} ${chartSection}` // ${highlightSection} - Until more meaningful highlights are available, disabling for single value
-            : // All other charts show the highlights above the chart rendering
-              html`<div class=${`${layer?.type === 'table' ? 'p-5' : ''}`}>${headerSection} ${highlightSection}</div>
-                ${chartSection}`}
+          <div class=${`flex flex-col flex-1 h-full ${layer?.type === 'text' ? 'overflow-hidden' : ''}`}>
+            ${layer?.type === 'single_value'
+              ? // Single value charts show the highlights at the bottom of the card
+                html`${headerSection} ${chartSection}` // ${highlightSection} - Until more meaningful highlights are available, disabling for single value
+              : // All other charts show the highlights above the chart rendering
+                html`<div class=${`${layer?.type === 'table' ? 'p-5' : ''}`}>${headerSection} ${highlightSection}</div>
+                  ${chartSection}`}
+          </div>
         </div>
       </div>
     `