From 743625f66b51f1640b260b2a70d78f6e17a171b7 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 10 Mar 2025 18:00:00 +0100
Subject: [PATCH] ui: fixes for metadata list in sessions

---
 .../shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx    | 6 ++----
 .../shared/SessionItem/SessionMetaList/SessionMetaList.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx b/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
index c94f67310..6b843d636 100644
--- a/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
+++ b/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
@@ -15,7 +15,7 @@ export default function MetaMoreButton(props: Props) {
     <Popover
       render={() => (
         <div
-          className="text-sm grid grid-col gap-3 bg-white"
+          className="text-sm grid grid-col gap-2 bg-white"
           style={{ maxHeight: '200px', overflowY: 'auto' }}
         >
           {list.slice(maxLength).map(({ label, value }, index) => (
@@ -26,9 +26,7 @@ export default function MetaMoreButton(props: Props) {
       placement="bottom"
     >
       <div className="flex items-center">
-        <Button type="link">
-          +{list.length - maxLength}
-          {' '}
+        <Button type="link" size={'small'} className={'h-[17px]'}>
           {t('More')}
         </Button>
       </div>
diff --git a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
index a2f2f72b7..5bed299bf 100644
--- a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
@@ -13,10 +13,10 @@ export default function SessionMetaList(props: Props) {
   const { className = '', metaList, maxLength = 4 } = props;
 
   return (
-    <div className={cn('text-sm flex items-center', className)}>
+    <div className={cn('text-sm flex items-center gap-2', className)}>
       {metaList.slice(0, maxLength).map(({ label, value }, index) => (
         <React.Fragment key={index}>
-          <MetaItem label={label} value={`${value}`} className="mr-3" />
+          <MetaItem label={label} value={`${value}`} />
         </React.Fragment>
       ))}