From 6530ab1fd39bc70ebc694937de494ed8251e67f8 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 8 Jul 2022 09:58:10 +0200
Subject: [PATCH] fix(ui): fix meta popup

---
 .../MetaMoreButton/MetaMoreButton.tsx            | 16 ++++++++--------
 .../SessionMetaList/SessionMetaList.tsx          |  1 +
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx b/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
index e425cd9ae..0b6450f86 100644
--- a/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
+++ b/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
@@ -10,14 +10,8 @@ export default function MetaMoreButton(props: Props) {
     const { list, maxLength } = props
     return (
         <Popup
-            trigger={ (
-                <div className="flex items-center">
-                <span className="rounded bg-active-blue color-teal px-2 color-gray-dark cursor-pointer">
-                    +{list.length - maxLength} More
-                </span>
-                </div>
-            ) }
             className="p-0"
+            theme="light"
             content={ 
                 <div className="text-sm grid grid-col p-4 gap-3" style={{ maxHeight: '200px', overflowY: 'auto'}}>
                     {list.slice(maxLength).map(({ label, value }, index) => (
@@ -27,6 +21,12 @@ export default function MetaMoreButton(props: Props) {
             }
             on="click"
             position="center center"
-        />
+        >
+            <div className=" flex items-center">
+                    <span className="rounded bg-active-blue color-teal p-2 color-gray-dark cursor-pointer whitespace-nowrap">
+                        +{list.length - maxLength} More
+                    </span>
+                </div>
+        </Popup>
     )
 }
diff --git a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
index b843134c5..599eac3e2 100644
--- a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
@@ -12,6 +12,7 @@ interface Props {
 
 export default function SessionMetaList(props: Props) {
   const { className = '', metaList, maxLength = 4 } = props
+
   return (
     <div className={cn("text-sm flex items-center", className)}>
       {metaList.slice(0, maxLength).map(({ label, value }, index) => (