From 44df8791dba7b68afc866d5746a620f9fac2c823 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 6 Jun 2025 14:54:08 +0200
Subject: [PATCH] Add min-width: 0; to the Flex components

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/deep-moments-love.md               |  5 +++++
 packages/canon/css/components.css             |  1 +
 packages/canon/css/flex.css                   |  1 +
 packages/canon/css/styles.css                 |  1 +
 .../src/components/Flex/Flex.stories.tsx      | 22 +++++++++++++++++++
 packages/canon/src/components/Flex/styles.css |  3 +++
 6 files changed, 33 insertions(+)
 create mode 100644 .changeset/deep-moments-love.md

diff --git a/.changeset/deep-moments-love.md b/.changeset/deep-moments-love.md
new file mode 100644
index 0000000000..89b3174275
--- /dev/null
+++ b/.changeset/deep-moments-love.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Add min-width: 0; by default on every Flex components in Canon to help support truncated texts inside flex elements.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index bce8e71a6c..c458a9d044 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -186,6 +186,7 @@
 }
 
 .canon-Flex {
+  min-width: 0;
   display: flex;
 }
 
diff --git a/packages/canon/css/flex.css b/packages/canon/css/flex.css
index 44381d64b3..5c6108eee7 100644
--- a/packages/canon/css/flex.css
+++ b/packages/canon/css/flex.css
@@ -1,3 +1,4 @@
 .canon-Flex {
+  min-width: 0;
   display: flex;
 }
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 3107c83908..d604f366bf 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9410,6 +9410,7 @@
 }
 
 .canon-Flex {
+  min-width: 0;
   display: flex;
 }
 
diff --git a/packages/canon/src/components/Flex/Flex.stories.tsx b/packages/canon/src/components/Flex/Flex.stories.tsx
index 91b8dc8fb6..30c527a117 100644
--- a/packages/canon/src/components/Flex/Flex.stories.tsx
+++ b/packages/canon/src/components/Flex/Flex.stories.tsx
@@ -16,6 +16,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { Flex } from './Flex';
+import { Text } from '../Text';
 
 const meta = {
   title: 'Layout/Flex',
@@ -143,3 +144,24 @@ export const LargeGap: Story = {
     </Flex>
   ),
 };
+
+export const WithTextTruncate: Story = {
+  render: () => (
+    <Flex direction="row" gap="8">
+      <Flex>
+        <Text truncate>
+          A man looks at a painting in a museum and says, “Brothers and sisters
+          I have none, but that man&apos;s father is my father&apos;s son.” Who
+          is in the painting?
+        </Text>
+      </Flex>
+      <Flex>
+        <Text truncate>
+          A man looks at a painting in a museum and says, “Brothers and sisters
+          I have none, but that man&apos;s father is my father&apos;s son.” Who
+          is in the painting?
+        </Text>
+      </Flex>
+    </Flex>
+  ),
+};
diff --git a/packages/canon/src/components/Flex/styles.css b/packages/canon/src/components/Flex/styles.css
index 094edffca7..61fb53d257 100644
--- a/packages/canon/src/components/Flex/styles.css
+++ b/packages/canon/src/components/Flex/styles.css
@@ -16,4 +16,7 @@
 
 .canon-Flex {
   display: flex;
+
+  /* This helps when using `truncate` on text inside a flex container */
+  min-width: 0;
 }