tui: prevent Go pricing graph from overflowing on medium screens by constraining width and moving axis labels outside SVG for sharper rendering

2 files changed, 46 insertions, 13 deletions

diff --git a/packages/console/app/src/routes/go/index.css b/packages/console/app/src/routes/go/index.css
index f70bf981f..d3239d482 100644
--- a/packages/console/app/src/routes/go/index.css
+++ b/packages/console/app/src/routes/go/index.css
@@ -442,9 +442,9 @@ body {
       padding: 58px var(--padding) 56px;
       --bar-go: var(--color-go-2);
 
-      @media (max-width: 48rem) {
-        width: 100%;
-        max-width: 100%;
+      @media (max-width: 60rem) {
+        width: 50%;
+        max-width: 50%;
       }
 
       [data-slot="plot"] {
@@ -452,11 +452,7 @@ body {
         overflow: visible;
         width: 100%;
         margin: 0 auto;
-        margin-left: -40px;
-
-        @media (max-width: 60rem) {
-          margin-left: 0;
-        }
+        margin-left: -56px;
       }
 
       [data-slot="ylabels"] {
@@ -465,6 +461,27 @@ body {
         pointer-events: none;
       }
 
+      [data-slot="xlabels"] {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+
+      [data-slot="xlabels"] [data-xlabel] {
+        position: absolute;
+        left: var(--x);
+        top: var(--y);
+        transform: translate(-50%, -50%);
+        color: var(--color-text-weak);
+        font-size: 12px;
+        line-height: 1;
+        white-space: nowrap;
+
+        @media (prefers-color-scheme: light) {
+          color: color-mix(in srgb, var(--color-text-weak) 82%, var(--color-text-strong));
+        }
+      }
+
       [data-slot="ylabels"] [data-ylabel] {
         position: absolute;
         left: var(--x);
@@ -475,6 +492,10 @@ body {
         font-weight: 700;
         line-height: 1;
         white-space: nowrap;
+
+        @media (max-width: 60rem) {
+          font-size: 13px;
+        }
       }
 
       [data-slot="pills"] {
@@ -715,8 +736,12 @@ body {
       [data-slot="caption-meta"] {
         display: flex;
         flex-direction: row;
+        flex-wrap: nowrap;
         gap: 16px;
         align-items: baseline;
+        width: 100%;
+        max-width: none;
+        justify-content: center;
       }
 
       [data-slot="caption-label"] {
@@ -731,6 +756,7 @@ body {
         text-decoration-thickness: 1px;
         width: fit-content;
         line-height: 1;
+        white-space: nowrap;
       }
 
       [data-slot="caption-note"] {
diff --git a/packages/console/app/src/routes/go/index.tsx b/packages/console/app/src/routes/go/index.tsx
index eb954bd99..7c5981cbc 100644
--- a/packages/console/app/src/routes/go/index.tsx
+++ b/packages/console/app/src/routes/go/index.tsx
@@ -84,6 +84,7 @@ function LimitsGraph(props: { href: string }) {
     }
     return set
   })()
+  const shown = ticks.filter((t) => labels.has(t))
   const bh = 8
   const gap = 16
   const step = bh + gap
@@ -94,6 +95,7 @@ function LimitsGraph(props: { href: string }) {
   const px = (n: number) => `${(n / w) * 100}%`
   const py = (n: number) => `${(n / h) * 100}%`
   const lx = px(left - 16)
+  const ty = py(h - 18)
 
   return (
     <figure
@@ -116,11 +118,6 @@ function LimitsGraph(props: { href: string }) {
               {(t) => (
                 <g>
                   <line x1={x(t)} y1={top} x2={x(t)} y2={h - bottom} data-grid />
-                  {labels.has(t) ? (
-                    <text x={x(t)} y={h - 18} text-anchor="middle" data-tick>
-                      {i18n.t("go.graph.tick", { n: t })}
-                    </text>
-                  ) : null}
                 </g>
               )}
             </For>
@@ -160,6 +157,16 @@ function LimitsGraph(props: { href: string }) {
           </span>
         </div>
 
+        <div data-slot="xlabels" aria-hidden="true">
+          <For each={shown}>
+            {(t) => (
+              <span data-xlabel style={{ "--x": px(x(t)), "--y": ty } as any}>
+                {i18n.t("go.graph.tick", { n: t })}
+              </span>
+            )}
+          </For>
+        </div>
+
         <div data-slot="pills" aria-hidden="true">
           <span data-item data-kind="free" style={{ "--x": px(x(1)), "--y": py(fy), "--d": "0ms" } as any}>
             <span data-name>{i18n.t("go.graph.freePill")}</span>