[#noissue] fix: GlobalSearch, Inspector styles

pinpoint-apm · Jul 17, 2024 · a5e322f · a5e322f
1 parent 2fc0d37
commit a5e322f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/GlobalSearch/GlobalSearch.tsx b/web-frontend/src/main/v3/packages/ui/src/components/GlobalSearch/GlobalSearch.tsx
@@ -63,7 +63,11 @@ export const GlobalSearch = ({ services }: GlobalSearchProps) => {
   return (
     portalTargetElement &&
     createPortal(
-      <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandDialog
+        open={open}
+        onOpenChange={setOpen}
+        dialogClassName="max-w-[40rem] data-[state=open]:!slide-in-from-top-[0%] data-[state=closed]:!slide-out-to-top-[0%] top-[15%] translate-y-0"
+      >
         <Command
           loop
           filter={(value, search, keywords) => {

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Inspector/charts/InspectorChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Inspector/charts/InspectorChart.tsx
@@ -9,7 +9,7 @@ export interface InspectorChartProps extends ChartCoreProps {
 export const InspectorChart = ({ data, children, ...props }: InspectorChartProps) => {
   return (
     <Card className="rounded-lg">
-      <CardHeader className="px-5 py-4">
+      <CardHeader className="px-4 py-3 text-sm">
         <CardTitle>{data?.title}</CardTitle>
       </CardHeader>
       <Separator />

diff --git a/...d/src/main/v3/packages/ui/src/components/SystemMetric/charts/SystemMetricChartFetcher.tsx b/...d/src/main/v3/packages/ui/src/components/SystemMetric/charts/SystemMetricChartFetcher.tsx
@@ -142,7 +142,7 @@ export const SystemMetricChartFetcher = ({
 
   return (
     <Card className="rounded-lg">
-      <CardHeader className="px-5 py-4">
+      <CardHeader className="px-4 py-3 text-sm">
         <CardTitle>{title}</CardTitle>
         {tagGroup && (
           <CardDescription className="flex items-center gap-2.5 !mt-3">

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/ui/command.tsx b/web-frontend/src/main/v3/packages/ui/src/components/ui/command.tsx
@@ -21,12 +21,14 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-interface CommandDialogProps extends DialogProps {}
+interface CommandDialogProps extends DialogProps {
+  dialogClassName?: string;
+}
 
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+const CommandDialog = ({ children, dialogClassName, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="p-0 overflow-hidden">
+      <DialogContent className={cn('p-0 overflow-hidden', dialogClassName)}>
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>