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 ( <> -
- {selected} -
+ 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 ( +
+ {data?.title || ''} + {selected} +
+ ); +}