ui: add tooltip to group element duration

apps/client/src/features/rundown/rundown-group/RundownGroup.tsx

@@ -16,6 +16,7 @@ import { TbClockPin } from 'react-icons/tb';
 
 import IconButton from '../../../common/components/buttons/IconButton';
 import Tag from '../../../common/components/tag/Tag';
+import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
@@ -190,16 +191,18 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
             <div className={style.metaLabel}>End</div>
             <div>{formatTime(data.timeEnd)}</div>
           </div>
-          <div className={style.metaEntry}>
+          <Tooltip text={'Group has target duration'} disabled={data.targetDuration === null}>
-            <div className={style.metaLabel}>
+            <div className={style.metaEntry}>
-              Duration
+              <div className={style.metaLabel}>
-              {data.targetDuration !== null && <IoLockClosed className={style.lockIcon} />}
+                Duration
+                {data.targetDuration !== null && <IoLockClosed className={style.lockIcon} />}
+              </div>
+              <div className={cx([style.duration, planOffset && style.warning])}>
+                <span className={style.strike}>{formatDuration(data.duration)}</span>
+                {planOffset && <Tag className={style.offsetLabel}>{planOffset}</Tag>}
+              </div>
             </div>
-            <div className={cx([style.duration, planOffset && style.warning])}>
+          </Tooltip>
-              <span className={style.strike}>{formatDuration(data.duration)}</span>
-              {planOffset && <Tag className={style.offsetLabel}>{planOffset}</Tag>}
-            </div>
-          </div>
         </div>
       </div>
     </div>