fix(media widget): text size fix and added season + Episode info (#6605)

Co-authored-by: Thomas <thomas@ajnart.fr>

packages/widgets/src/media-transcoding/component.tsx

@@ -153,7 +153,7 @@ export default function MediaTranscodingWidget({
             return {
               label: (
                 <Center style={{ gap: 4 }}>
-                  <Icon size={12} />
+                  <Icon size="var(--mantine-font-size-xs)" style={{ flexShrink: 0 }} />
                   {footerLayout.showTabLabels ? (
                     <Text span size="xs">
                       {t(`tab.${value}`)}
@@ -259,7 +259,7 @@ export const resolveQueuePagination = (
 const AdvancedPanel = ({ title, icon: Icon, children }: { title: string; icon: TablerIcon; children: ReactNode }) => (
   <Paper withBorder radius="sm" p="xs" mih={280} style={{ display: "flex", flexDirection: "column" }}>
     <Group gap="xs" mb="xs">
-      <Icon size={16} />
+      <Icon size="var(--mantine-font-size-md)" style={{ flexShrink: 0 }} />
       <Text size="sm" fw={600}>
         {title}
       </Text>

packages/widgets/src/media-transcoding/health-check-status.tsx

@@ -27,7 +27,7 @@ export function HealthCheckStatus(props: HealthCheckStatusProps) {
       <Popover.Target>
         <ActionIcon className={actionTargetClasses.root} variant="subtle" size="sm" aria-label={t("title")}>
           <Indicator color={textColor(indicatorColor, colorScheme)} size={6} display="flex">
-            <IconHeartbeat size={16} />
+            <IconHeartbeat size="var(--mantine-font-size-md)" />
           </Indicator>
         </ActionIcon>
       </Popover.Target>
@@ -38,7 +38,7 @@ export function HealthCheckStatus(props: HealthCheckStatusProps) {
       >
         <Stack gap="sm" align="center">
           <Group gap="xs">
-            <IconHeartbeat size={18} />
+            <IconHeartbeat size="var(--mantine-font-size-lg)" />
             <Text size="sm">{t("title")}</Text>
           </Group>
           <Divider

packages/widgets/src/media-transcoding/panels/queue.panel.tsx

@@ -59,11 +59,11 @@ export function QueuePanel(props: QueuePanelProps) {
                 <Group gap={4} wrap="nowrap">
                   {item.type === "transcode" ? (
                     <Tooltip label={t("table.transcode")}>
-                      <IconTransform size={12} />
+                      <IconTransform size="var(--mantine-font-size-xs)" style={{ flexShrink: 0 }} />
                     </Tooltip>
                   ) : (
                     <Tooltip label={t("table.healthCheck")}>
-                      <IconHeartbeat size={12} />
+                      <IconHeartbeat size="var(--mantine-font-size-xs)" style={{ flexShrink: 0 }} />
                     </Tooltip>
                   )}
                   <Text lineClamp={1} size="xs">

packages/widgets/src/media-transcoding/panels/statistics.panel.tsx

@@ -94,7 +94,7 @@ function StatisticItem(props: StatisticItemProps) {
     <Tooltip label={props.label}>
       <Card p={0} radius={board.itemRadius} miw={48} flex={1}>
         <Group justify="center" align="center" gap="xs" w="100%" wrap="nowrap">
-          <props.icon size={16} style={{ minWidth: 16 }} />
+          <props.icon size="var(--mantine-font-size-md)" style={{ flexShrink: 0 }} />
           <Text size="md">{props.value}</Text>
         </Group>
       </Card>

packages/widgets/src/media-transcoding/panels/workers.panel.tsx

@@ -66,11 +66,11 @@ export function WorkersPanel(props: WorkersPanelProps) {
                     <div>
                       {worker.jobType === "transcode" ? (
                         <Tooltip label={t("table.transcode")}>
-                          <IconTransform size={14} />
+                          <IconTransform size="var(--mantine-font-size-sm)" style={{ flexShrink: 0 }} />
                         </Tooltip>
                       ) : (
                         <Tooltip label={t("table.healthCheck")}>
-                          <IconHeartbeat size={14} />
+                          <IconHeartbeat size="var(--mantine-font-size-sm)" style={{ flexShrink: 0 }} />
                         </Tooltip>
                       )}
                     </div>