Chart fullscreen legend shows all items and is scrollable

Author: matt-aitken

apps/webapp/app/components/metrics/QueryWidget.tsx

@@ -1,15 +1,19 @@
-import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from "@heroicons/react/20/solid";
-import { ArrowsPointingOutIcon } from "@heroicons/react/24/solid";
+import {
+  DocumentDuplicateIcon,
+  PencilIcon,
+  PencilSquareIcon,
+  TrashIcon,
+} from "@heroicons/react/20/solid";
+import { ChartBarIcon } from "@heroicons/react/24/solid";
 import { type OutputColumnMetadata } from "@internal/tsql";
 import { DialogClose } from "@radix-ui/react-dialog";
-import { IconChartHistogram, IconResize } from "@tabler/icons-react";
 import { assertNever } from "assert-never";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { cn } from "~/utils/cn";
 import { Maximize2 } from "lucide-react";
 import { useState, type ReactNode } from "react";
 import { z } from "zod";
 import { Card } from "~/components/primitives/charts/Card";
-import { SimpleTooltip } from "~/components/primitives/Tooltip";
-import { cn } from "~/utils/cn";
 import { QueryResultsChart } from "../code/QueryResultsChart";
 import { TSQLResultsTable } from "../code/TSQLResultsTable";
 import { Button } from "../primitives/Buttons";
@@ -26,6 +30,7 @@ import {
   PopoverMenuItem,
   PopoverVerticalEllipseTrigger,
 } from "../primitives/Popover";
+import { IconChartHistogram } from "@tabler/icons-react";
 
 const ChartType = z.union([z.literal("bar"), z.literal("line")]);
 export type ChartType = z.infer<typeof ChartType>;
@@ -187,7 +192,6 @@ export function QueryWidget({
                 </span>
               }
               content="Maximize"
-              disableHoverableContent
               asChild
             />
             {accessory}
@@ -210,8 +214,6 @@ export function QueryWidget({
                           onEdit(props.data);
                           setIsMenuOpen(false);
                         }}
-                        className="pl-1"
-                        leadingIconClassName="-mr-1"
                       />
                     )}
                     {onRename && (
@@ -259,8 +261,8 @@ export function QueryWidget({
           {isResizing ? (
             <div className="flex h-full flex-1 items-center justify-center p-3">
               <div className="flex flex-col items-center gap-1 text-text-dimmed">
-                <IconResize className="size-10 text-text-dimmed/50" />
-                <span className="text-base font-medium">Resizing…</span>
+                <ChartBarIcon className="size-10 text-text-dimmed" />{" "}
+                <span className="text-base font-medium">Resizing...</span>
               </div>
             </div>
           ) : error ? (
@@ -394,7 +396,8 @@ function QueryWidgetBody({
                   columns={data.columns}
                   config={config}
                   timeRange={timeRange}
-                  onViewAllLegendItems={() => setIsFullscreen(true)}
+                  fullLegend
+                  legendScrollable
                   isLoading={showLoading}
                 />
               </div>