nit

coinbase · Nov 15, 2024 · 8fc33e5 · 8fc33e5
1 parent 07884e1
commit 8fc33e5
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/site/docs/components/PropsTable.tsx b/site/docs/components/PropsTable.tsx
@@ -13,6 +13,9 @@ export type PropDef = {
 
 const FIXED_PROP_COLUMN_WIDTH = '37%';
 
+const popoverContentClassName =
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 mx-2 rounded-md border border-gray-200 bg-white p-3 text-sm shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-stone-800 dark:bg-stone-900';
+
 const PropsTable = ({ data }: { data: PropDef[] }) => {
   return (
     <table className="w-full">
@@ -43,7 +46,7 @@ const PropsTable = ({ data }: { data: PropDef[] }) => {
                       <Popover.Content
                         side="top"
                         align="center"
-                        className="data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 mx-2 rounded-md border border-gray-200 bg-white p-3 text-sm shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-stone-800 dark:bg-stone-900"
+                        className={popoverContentClassName}
                         style={{ maxWidth: 350 }}
                         onOpenAutoFocus={(event) => {
                           event.preventDefault();
@@ -68,7 +71,7 @@ const PropsTable = ({ data }: { data: PropDef[] }) => {
                     <Popover.Content
                       side="top"
                       align="center"
-                      className="data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 mx-2 rounded-md border border-gray-200 bg-white p-3 text-sm shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-stone-800 dark:bg-stone-900"
+                      className={popoverContentClassName}
                     >
                       <div
                         style={{