fix: matine ui fixes for concistency (#5733)

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

@@ -27,7 +27,11 @@ export function HealthCheckStatus(props: HealthCheckStatusProps) {
           <IconHeartbeat size={16} />
         </Indicator>
       </HoverCard.Target>
-      <HoverCard.Dropdown bg={colorScheme === "light" ? "gray.2" : "dark.8"}>
+      <HoverCard.Dropdown
+        style={{
+          backgroundColor: "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-8))",
+        }}
+      >
         <Stack gap="sm" align="center">
           <Group gap="xs">
             <IconHeartbeat size={18} />

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

@@ -1,4 +1,17 @@
-import { Center, Group, ScrollArea, Table, TableTd, TableTh, TableTr, Text, Title, Tooltip } from "@mantine/core";
+import {
+  Center,
+  Group,
+  ScrollArea,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from "@mantine/core";
 import { IconHeartbeat, IconTransform } from "@tabler/icons-react";
 
 import { humanFileSize } from "@homarr/common";
@@ -25,7 +38,7 @@ export function QueuePanel(props: QueuePanelProps) {
   return (
     <ScrollArea style={{ flex: "1" }}>
       <Table style={{ tableLayout: "fixed" }}>
-        <Table.Thead>
+        <TableThead>
           <TableTr>
             <TableTh ta="start" py={4}>
               <Text size="xs" fw="bold">
@@ -38,8 +51,8 @@ export function QueuePanel(props: QueuePanelProps) {
               </Text>
             </TableTh>
           </TableTr>
-        </Table.Thead>
-        <Table.Tbody>
+        </TableThead>
+        <TableTbody>
           {queue.array.map((item) => (
             <TableTr key={item.id}>
               <TableTd py={2}>
@@ -63,7 +76,7 @@ export function QueuePanel(props: QueuePanelProps) {
               </TableTd>
             </TableTr>
           ))}
-        </Table.Tbody>
+        </TableTbody>
       </Table>
     </ScrollArea>
   );

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

@@ -91,7 +91,7 @@ function StatisticItem(props: StatisticItemProps) {
   const board = useRequiredBoard();
   return (
     <Tooltip label={props.label}>
-      <Card p={0} withBorder radius={board.itemRadius} miw={48} flex={1}>
+      <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 }} />
           <Text size="md">{props.value}</Text>

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

@@ -4,8 +4,10 @@ import {
   Progress,
   ScrollArea,
   Table,
+  TableTbody,
   TableTd,
   TableTh,
+  TableThead,
   TableTr,
   Text,
   Title,
@@ -35,7 +37,7 @@ export function WorkersPanel(props: WorkersPanelProps) {
   return (
     <ScrollArea style={{ flex: "1" }}>
       <Table style={{ tableLayout: "fixed" }}>
-        <Table.Thead>
+        <TableThead>
           <TableTr>
             <TableTh ta="start" py={4}>
               <Text size="xs" fw="bold">
@@ -53,8 +55,8 @@ export function WorkersPanel(props: WorkersPanelProps) {
               </Text>
             </TableTh>
           </TableTr>
-        </Table.Thead>
-        <Table.Tbody>
+        </TableThead>
+        <TableTbody>
           {props.workers.map((worker) => {
             const fileName = worker.filePath.split("\\").pop()?.split("/").pop() ?? worker.filePath;
             return (
@@ -101,7 +103,7 @@ export function WorkersPanel(props: WorkersPanelProps) {
               </TableTr>
             );
           })}
-        </Table.Tbody>
+        </TableTbody>
       </Table>
     </ScrollArea>
   );