fix(sessions): stop footer status line overlapping diff stats when narrow (#3258)

Author: pauldambra

packages/ui/src/features/sessions/components/GeneratingIndicator.tsx

@@ -171,21 +171,22 @@ export function GeneratingIndicator({
     <Flex
       align="center"
       gap="2"
-      className="select-none select-none"
+      className="min-w-0 select-none"
       style={{ WebkitUserSelect: "none" }}
     >
-      <Brain size={12} className="ph-pulse" />
-      <Text className="text-[13px] text-accent-11">{activity}...</Text>
-      <Text color="gray" className="text-[13px]">
+      <Brain size={12} className="ph-pulse shrink-0" />
+      <Text className="truncate text-[13px] text-accent-11">{activity}...</Text>
+      {/* The hint shrinks (and truncates) well before the activity word does. */}
+      <Text color="gray" className="shrink-[8] truncate text-[13px]">
         (Esc to stop
-      </Text>
-      <Circle size={4} weight="fill" className="mx-[2px] my-0 text-gray-9" />
-      <Text
-        color="gray"
-        style={{ fontVariantNumeric: "tabular-nums" }}
-        className="text-[13px]"
-      >
-        {formatDuration(elapsed, 1)})
+        <Circle
+          size={4}
+          weight="fill"
+          className="mx-1 inline-block align-middle text-gray-9"
+        />
+        <span style={{ fontVariantNumeric: "tabular-nums" }}>
+          {formatDuration(elapsed, 1)})
+        </span>
       </Text>
     </Flex>
   );

packages/ui/src/features/sessions/components/SessionFooter.stories.tsx

@@ -0,0 +1,72 @@
+import { SessionFooter } from "@posthog/ui/features/sessions/components/SessionFooter";
+import type { ContextUsage } from "@posthog/ui/features/sessions/hooks/useContextUsage";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const meta: Meta<typeof SessionFooter> = {
+  title: "Sessions/SessionFooter",
+  component: SessionFooter,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SessionFooter>;
+
+const usage: ContextUsage = {
+  used: 788_000,
+  size: 1_000_000,
+  percentage: 79,
+  cost: null,
+  breakdown: null,
+};
+
+const generatingArgs = {
+  isPromptPending: true,
+  promptStartedAt: Date.now() - 5_400,
+  lastGenerationDuration: null,
+  usage,
+};
+
+/** Wraps the footer in fixed-width boxes so narrow panes are easy to eyeball. */
+function AtWidths({ args }: { args: Parameters<typeof SessionFooter>[0] }) {
+  return (
+    <div className="flex flex-col gap-4">
+      {[720, 480, 400, 340, 280, 220].map((width) => (
+        <div key={width}>
+          <div className="mb-1 text-[11px] text-gray-9">{width}px</div>
+          <div
+            className="rounded border border-gray-6 border-dashed px-2"
+            style={{ width }}
+          >
+            <SessionFooter {...args} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const GeneratingAtNarrowWidths: Story = {
+  args: generatingArgs,
+  render: (args) => <AtWidths args={args} />,
+};
+
+export const GeneratingWithQueueAtNarrowWidths: Story = {
+  args: { ...generatingArgs, queuedCount: 2 },
+  render: (args) => <AtWidths args={args} />,
+};
+
+export const AwaitingPermissionAtNarrowWidths: Story = {
+  args: { ...generatingArgs, hasPendingPermission: true },
+  render: (args) => <AtWidths args={args} />,
+};
+
+export const IdleAtNarrowWidths: Story = {
+  args: {
+    isPromptPending: false,
+    lastGenerationDuration: 331_000,
+    usage,
+  },
+  render: (args) => <AtWidths args={args} />,
+};