ui: fix max meta length, add horizontal layout for player

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=""
+              horizontal
               metaList={_metaList}
               maxLength={2}
             />
-            </div>
           )}
         </div>
         {uiPlayerStore.showSearchEventsSwitchButton ? (

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 }}
       />

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}`} />