fix(console): keep Go limits chart headers from overflowing in long locales (#55054)

packages/console/app/src/component/go-plan-chart.css

@@ -102,7 +102,6 @@
   table {
     width: 100%;
     min-width: 48rem;
-    table-layout: fixed;
     border-spacing: 0;
     font-size: 0.8125rem;
   }
@@ -254,10 +253,10 @@
   }
   /* Phones stack each model name above its bar so the table fits without horizontal scrolling. */
   @media (max-width: 40rem) {
-    /* Rows share the table's columns through subgrid, so number columns size to their unwrapped headers. */
+    /* Rows share the table's columns through subgrid, so number columns size to their headers, which wrap in longer languages. */
     table {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) auto auto;
+      grid-template-columns: minmax(min-content, 1fr) auto auto;
       min-width: 0;
     }
     thead,
@@ -284,6 +283,7 @@
       border: 0;
       padding-inline: 0.375rem;
       font-size: 0.75rem;
+      white-space: normal;
     }
     /* The bars are too narrow to label 100 and 1K apart from 10K. */
     [data-slot="gridline"],

packages/console/app/src/component/go-plan-chart.tsx

@@ -50,7 +50,7 @@ export function GoPlanChart(props: { href: string }) {
         <table id={id}>
           <colgroup>
             <col style={{ width: "26%" }} />
-            <col style={{ width: "44%" }} />
+            <col />
             <col style={{ width: "16%" }} />
             <col style={{ width: "14%" }} />
           </colgroup>