Keep the conversation header's meta on one line with the workspace

src/components/general/workspace-avatar.tsx

@@ -5,9 +5,9 @@ import { twMerge } from "tailwind-merge";
 import profileImageUrls from "@/src/utils/profile-image-urls";
 
 const WorkspaceAvatarSizes = {
-    xs: { box: "size-[18px] rounded-[4px]", icon: 12 },
+    xs: { box: "size-[18px] min-w-[18px] rounded-[4px]", icon: 12 },
-    sm: { box: "size-8 rounded-default-sm", icon: 16 },
+    sm: { box: "size-8 min-w-8 rounded-default-sm", icon: 16 },
-    lg: { box: "size-14 rounded-default", icon: 24 },
+    lg: { box: "size-14 min-w-14 rounded-default", icon: 24 },
 } as const;
 
 type Props = {

src/pages/admin/bots/[bot_id]/(partials)/conversation-header.tsx

@@ -57,35 +57,40 @@ export default function ConversationHeader({
                     {bot.name}
                 </H1>
 
-                {workspace?.id ? (
+                <Row className="flex-nowrap w-full">
-                    <Row className="min-w-0 w-full gap-2! flex-nowrap">
+                    {workspace?.id ? (
-                        <WorkspaceAvatar
+                        <Row className="min-w-0 gap-2! flex-nowrap">
-                            image_media_id={workspace.image_media_id}
+                            <WorkspaceAvatar
-                            size="xs"
+                                image_media_id={workspace.image_media_id}
-                        />
+                                size="xs"
-                        <Span size="smaller" className="truncate">
+                            />
-                            {workspace.name || "Workspace"}
+                            <Span
-                        </Span>
+                                size="smaller"
-                    </Row>
+                                className="truncate hidden xl:block"
-                ) : null}
+                            >
-
+                                {workspace.name || "Workspace"}
-                <Row className="min-w-0 w-full gap-x-1! md:gap-x-3! gap-y-0! flex-nowrap">
+                            </Span>
-                    <HeaderMetaItem
+                        </Row>
-                        icon={CpuAi}
-                        label="Model"
-                        text={
-                            model
-                                ? `${model.name} · ${model.provider_name}`
-                                : "No model set up"
-                        }
-                    />
-                    {computer_name ? (
-                        <HeaderMetaItem
-                            icon={Monitor}
-                            label="Computer"
-                            text={computer_name}
-                        />
                     ) : null}
+
+                    <Row className="min-w-0 gap-x-1! md:gap-x-3! gap-y-0! flex-nowrap grow">
+                        <HeaderMetaItem
+                            icon={CpuAi}
+                            label="Model"
+                            text={
+                                model
+                                    ? `${model.name} · ${model.provider_name}`
+                                    : "No model set up"
+                            }
+                        />
+                        {computer_name ? (
+                            <HeaderMetaItem
+                                icon={Monitor}
+                                label="Computer"
+                                text={computer_name}
+                            />
+                        ) : null}
+                    </Row>
                 </Row>
             </Stack>
 

src/pages/admin/bots/[bot_id]/(partials)/header-meta-item.tsx

@@ -26,14 +26,14 @@ export default function HeaderMetaItem({
     return (
         <Row
             title={`${label}: ${text}`}
-            className="min-w-0 shrink gap-1.5! flex-nowrap text-[13px] leading-[18px] text-ink-secondary"
+            className="min-w-0 grow overflow-hidden gap-1.5! flex-nowrap text-[13px] leading-[18px] text-ink-secondary"
         >
             {Icon ? (
                 <Icon size={13} aria-label={label} className="shrink-0" />
             ) : image ? (
                 image
             ) : null}
-            <Span className="truncate">{text}</Span>
+            <Span className="min-w-0 grow truncate">{text}</Span>
         </Row>
     );
 }