fix(media-server): stack user details reliably

packages/widgets/src/media-server/component.module.css

@@ -44,6 +44,20 @@
   overflow: hidden;
 }
 
+.userIdentity {
+  display: grid;
+  flex: 1 1 0;
+  grid-template-rows: auto auto;
+  min-width: 0;
+  overflow: hidden;
+  row-gap: 1px;
+}
+
+.userIdentityLine {
+  min-width: 0;
+  line-height: 1.2;
+}
+
 .sessionRow {
   cursor: pointer;
 

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

@@ -304,16 +304,16 @@ export default function MediaServerWidget({
                 >
                   {columnVisibility.user && (
                     <Table.Td>
-                      <Group gap="xs" wrap="nowrap">
-                        <Avatar size={28} src={session.user?.profilePictureUrl} />
-                        <Stack gap={0} className={classes.cellContent}>
-                          <Text size="xs" truncate>
+                      <Group gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
+                        <Avatar size={28} src={session.user?.profilePictureUrl} style={{ flexShrink: 0 }} />
+                        <div className={classes.userIdentity}>
+                          <Text component="div" size="xs" truncate className={classes.userIdentityLine}>
                             {session.user?.username ?? t("items.unknownUser")}
                           </Text>
-                          <Text size="10px" c="dimmed" truncate>
+                          <Text component="div" size="10px" c="dimmed" truncate className={classes.userIdentityLine}>
                             {session.sessionName}
                           </Text>
-                        </Stack>
+                        </div>
                       </Group>
                     </Table.Td>
                   )}