From e49918e8bbf7ee2ddf3f3be248192a9d92bb1675 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 23 Jul 2023 15:41:58 +0200
Subject: [PATCH] style: show event title in info panel (#467)

---
 apps/client/src/features/info/Info.module.scss | 18 ++++++++++++++----
 apps/client/src/features/info/Info.tsx         |  7 ++-----
 .../features/info/info-header/InfoHeader.tsx   | 14 ++++++++++++++
 3 files changed, 30 insertions(+), 9 deletions(-)
 create mode 100644 apps/client/src/features/info/info-header/InfoHeader.tsx

diff --git a/apps/client/src/features/info/Info.module.scss b/apps/client/src/features/info/Info.module.scss
index 9f7f6940e..c98851b7d 100644
--- a/apps/client/src/features/info/Info.module.scss
+++ b/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 {
diff --git a/apps/client/src/features/info/Info.tsx b/apps/client/src/features/info/Info.tsx
index a67f61611..68d37a014 100644
--- a/apps/client/src/features/info/Info.tsx
+++ b/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}>
-        <span>{selected}</span>
-      </div>
+      <InfoHeader selected={selected} />
       <CollapsableInfo title='Network Info'>
         <InfoNif />
       </CollapsableInfo>
diff --git a/apps/client/src/features/info/info-header/InfoHeader.tsx b/apps/client/src/features/info/info-header/InfoHeader.tsx
new file mode 100644
index 000000000..a1efea41a
--- /dev/null
+++ b/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>
+  );
+}