Fixed history popover scrolling + improved the styling

Author: samejr

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx

@@ -1,9 +1,12 @@
 import { useState } from "react";
 import { ClockRotateLeftIcon } from "~/assets/icons/ClockRotateLeftIcon";
 import { Button } from "~/components/primitives/Buttons";
-import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
+import { Popover, PopoverTrigger } from "~/components/primitives/Popover";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import type { QueryHistoryItem } from "~/presenters/v3/QueryPresenter.server";
 import { timeFilterRenderValues } from "~/components/runs/v3/SharedFilters";
+import { ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import { cn } from "~/utils/cn";
 
 const SQL_KEYWORDS = [
   "SELECT",
@@ -91,23 +94,32 @@ export function QueryHistoryPopover({
       <PopoverTrigger asChild>
         <Button
           type="button"
-          variant="tertiary/small"
+          variant="secondary/small"
           LeadingIcon={ClockRotateLeftIcon}
+          leadingIconClassName="-mr-1.5"
+          TrailingIcon={ChevronUpDownIcon}
           disabled={history.length === 0}
         >
           History
         </Button>
       </PopoverTrigger>
-      <PopoverContent
-        className="w-[400px] min-w-0 overflow-hidden p-0"
+      <PopoverPrimitive.Content
+        className={cn(
+          "z-50 w-[400px] min-w-0 overflow-hidden rounded border border-charcoal-700 bg-background-bright p-0 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        )}
         align="start"
         sideOffset={6}
+        style={{ maxHeight: "var(--radix-popover-content-available-height)" }}
       >
-        <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="max-h-[40rem] overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
           <div className="p-1">
             {history.map((item) => {
               // Format time filter display
-              const { valueLabel } = timeFilterRenderValues({ period: item.filterPeriod ?? undefined, from: item.filterFrom ?? undefined, to: item.filterTo ?? undefined });
+              const { valueLabel } = timeFilterRenderValues({
+                period: item.filterPeriod ?? undefined,
+                from: item.filterFrom ?? undefined,
+                to: item.filterTo ?? undefined,
+              });
 
               return (
                 <button
@@ -117,21 +129,16 @@ export function QueryHistoryPopover({
                     onQuerySelected(item);
                     setIsOpen(false);
                   }}
-                  className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900"
+                  className="flex w-full flex-col gap-1 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-750"
                 >
-                  <div className="flex flex-1 flex-col items-start gap-0.5 overflow-hidden">
+                  <div className="flex w-full flex-col items-start">
                     {item.title ? (
-                      <>
-                        <p className="w-full truncate text-left text-sm font-medium text-text-bright">
-                          {item.title}
-                        </p>
-                        <p className="line-clamp-4 w-full whitespace-pre-wrap text-left font-mono text-xs text-text-dimmed">
-                          {highlightSQL(item.query)}
-                        </p>
-                      </>
+                      <p className="mb-1 truncate text-left text-sm font-medium text-text-bright">
+                        {item.title}
+                      </p>
                     ) : (
-                      <p className="line-clamp-4 w-full whitespace-pre-wrap text-left font-mono text-xs text-[#9b99ff]">
-                        {highlightSQL(item.query)}
+                      <p className="mb-1 truncate text-left font-mono text-xs text-text-bright">
+                        {item.query.split("\n")[0].slice(0, 60)}
                       </p>
                     )}
                     <div className="flex items-center gap-1.5 text-xs text-text-dimmed">
@@ -140,13 +147,17 @@ export function QueryHistoryPopover({
                       {item.userName && <span>· {item.userName}</span>}
                     </div>
                   </div>
+                  <div className="w-full border-l-2 border-charcoal-600 pl-2.5">
+                    <p className="line-clamp-4 w-full whitespace-pre-wrap text-left font-mono text-xs text-text-dimmed">
+                      {highlightSQL(item.query)}
+                    </p>
+                  </div>
                 </button>
               );
             })}
           </div>
         </div>
-      </PopoverContent>
+      </PopoverPrimitive.Content>
     </Popover>
   );
 }
-