Update the month dropdown variant

Layout improvement for the dev usage message
Change the chart data to UTC
2025-10-04 08:04:31 -07:00 · 2025-10-04 08:04:19 -07:00 · 2025-10-04 08:03:35 -07:00
1 changed files with 10 additions and 13 deletions
@@ -126,7 +126,7 @@ export default function Page() {
                replace({ month: value });
              }}
              dropdownIcon
-              variant="tertiary/small"
+              variant="secondary/small"
            >
              {(matches) =>
                matches.map((month) => (
@@ -197,9 +197,13 @@ export default function Page() {
            </div>
          </div>
          <div>
-            <Header2 spacing className="pl-3">
-              Tasks
-            </Header2>
+            <div className="flex w-full items-center justify-between gap-2 px-3 pb-2">
+              <Header2>Tasks</Header2>
+              <Paragraph variant="extra-small">
+                Dev runs are excluded from the data below since they do not have an associated
+                compute cost.
+              </Paragraph>
+            </div>
            <Suspense fallback={<Spinner />}>
              <Await
                resolve={tasks}
@@ -262,14 +266,6 @@ export default function Page() {
                          )}
                        </TableBody>
                      </Table>
-                      <InfoPanel
-                        icon={InformationCircleIcon}
-                        variant="minimal"
-                        panelClassName="max-w-full"
-                      >
-                        Dev environment runs are excluded from the usage data above, since they do
-                        not have an associated compute cost.
-                      </InfoPanel>
                    </>
                  );
                }}
@@ -290,6 +286,7 @@ const chartConfig = {
 } satisfies ChartConfig;

 const tooltipDateFormatter = new Intl.DateTimeFormat("en-US", {
+  weekday: "short",
  month: "short",
  day: "numeric",
 });
@@ -311,7 +308,7 @@ function UsageChart({ data }: { data: UsageSeriesData }) {
          tickFormatter={(value) => {
            if (!value) return "";
            const date = new Date(value);
-            return `${date.getDate()}`;
+            return `${date.getUTCDate()}`;
          }}
          className="text-xs"
        />
Author	SHA1	Message	Date
James Ritchie	b02caa3698	Update the month dropdown variant	2025-10-04 08:04:31 -07:00
James Ritchie	08a0a5038e	Layout improvement for the dev usage message	2025-10-04 08:04:19 -07:00
James Ritchie	8cbc4c2b4f	Change the chart data to UTC	2025-10-04 08:03:35 -07:00