style: show event title in info panel (#467)

apps/client/src/features/info/Info.module.scss

@@ -2,11 +2,21 @@
 @use '../../theme/v2Styles' as *;
 
 .panelHeader {
-  font-size: $inner-section-text-size;
-  font-family: $ontime-font-family;
-  color: $label-gray;
   display: flex;
-  justify-content: end;
+  justify-content: space-between;
+  gap: 1rem;
+
+  .title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .selected {
+    min-width: max-content;
+    font-size: $inner-section-text-size;
+    color: $label-gray;
+  }
 }
 
 .labels {

apps/client/src/features/info/Info.tsx

@@ -1,12 +1,11 @@
 import { useInfoPanel } from '../../common/hooks/useSocket';
 
+import InfoHeader from './info-header/InfoHeader';
 import CollapsableInfo from './CollapsableInfo';
 import InfoLogger from './InfoLogger';
 import InfoNif from './InfoNif';
 import InfoTitles from './InfoTitles';
 
-import style from './Info.module.scss';
-
 export default function Info() {
   const data = useInfoPanel();
 
@@ -32,9 +31,7 @@ export default function Info() {
 
   return (
     <>
-      <div className={style.panelHeader}>
+      <InfoHeader selected={selected} />
-        <span>{selected}</span>
-      </div>
       <CollapsableInfo title='Network Info'>
         <InfoNif />
       </CollapsableInfo>

apps/client/src/features/info/info-header/InfoHeader.tsx

@@ -0,0 +1,14 @@
+import useEventData from '../../../common/hooks-query/useEventData';
+
+import style from '../Info.module.scss';
+
+export default function InfoHeader({ selected }: { selected: string }) {
+  const { data } = useEventData();
+
+  return (
+    <div className={style.panelHeader}>
+      <span className={style.title}>{data?.title || ''}</span>
+      <span className={style.selected}>{selected}</span>
+    </div>
+  );
+}