`truncate` property of `<Code>`, doesn't
steveluscher opened this issue · comments
Elements like <Heading> and <Text> truncate well, but <Code> does not, despite supporting the truncate property.
It's a bit unintuitive, but the truncated element either needs display: block, which Heading has naturally and Text has via as="p" in your example, or it has to be a child of a flex or grid container.
That’s just the nature of the CSS properties that are added with truncate. We can't correct for that ourselves e.g. by adding display: block because it can have other unintended consequences to the layout.