From 18f8ee9d15f12d2a6b089706ef1c715d397025ed Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 6 May 2025 16:21:02 +0200
Subject: [PATCH] ui: fix max meta length, add horizontal layout for player

---
 .../Player/ReplayPlayer/PlayerBlockHeader.tsx        | 12 +++++-------
 .../shared/SessionItem/MetaItem/MetaItem.tsx         |  2 ++
 .../SessionItem/SessionMetaList/SessionMetaList.tsx  |  5 +++--
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
index ef769ec5f..b7060595b 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
+++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
@@ -116,13 +116,11 @@ function PlayerBlockHeader(props: any) {
           )}
 
           {_metaList.length > 0 && (
-            <div className="h-full flex items-center px-2 gap-1">
-              <SessionMetaList
-                className=""
-                metaList={_metaList}
-                maxLength={2}
-              />
-            </div>
+            <SessionMetaList
+              horizontal
+              metaList={_metaList}
+              maxLength={2}
+            />
           )}
         </div>
         {uiPlayerStore.showSearchEventsSwitchButton ? (
diff --git a/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx b/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx
index 4812bd122..f661d8a77 100644
--- a/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx
+++ b/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx
@@ -19,11 +19,13 @@ export default function MetaItem(props: Props) {
       <TextEllipsis
         text={label}
         className="p-0"
+        maxWidth={'300px'}
         popupProps={{ size: 'small', disabled: true }}
       />
       <span className="bg-neutral-200 inline-block w-[1px] min-h-[17px]"></span>
       <TextEllipsis
         text={value}
+        maxWidth={'350px'}
         className="p-0 text-neutral-500"
         popupProps={{ size: 'small', disabled: true }}
       />
diff --git a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
index 3c7608138..4f4c96578 100644
--- a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
@@ -8,13 +8,14 @@ interface Props {
   metaList: any[];
   maxLength?: number;
   onMetaClick?: (meta: { name: string, value: string }) => void;
+  horizontal?: boolean;
 }
 
 export default function SessionMetaList(props: Props) {
-  const { className = '', metaList, maxLength = 14 } = props;
+  const { className = '', metaList, maxLength = 14, horizontal = false } = props;
 
   return (
-    <div className={cn('flex items-center flex-wrap gap-1', className)}>
+    <div className={cn('flex items-center gap-1', horizontal ? '' : 'flex-wrap', className)}>
       {metaList.slice(0, maxLength).map(({ label, value }, index) => (
           <div key={index} className='cursor-pointer' onClick={() => props.onMetaClick?.({ name: `_${label}`, value })}>
             <MetaItem label={label} value={`${value}`} />