I'm feeling a bit lost with this issue and despite spending an entire morning on it, I still can't figure out what's going wrong.
Below is the code for my component:
export default function Summary({ activation }: SummaryProps) {
const t = useTranslations("ActivationPage.summary");
const tCommon = useTranslations("Common");
const toast = useToast();
return (
<div className="flex gap-6 w-full overflow-x-hidden">
<Card className="min-w-0 flex-1">
<CardHeader className="flex flex-row items-center relative justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
{t("activation_key")}
</CardTitle>
<Button
className="absolute top-3 right-3"
variant={"outline"}
size={"icon"}
onClick={(event) => {
event.stopPropagation();
navigator.clipboard.writeText(activation.activation_key);
toast({
type: "info",
message: tCommon("actions.copied"),
id: "idCopied",
});
}}
>
<Copy className="h-4 w-4" />
</Button>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold overflow-hidden text-ellipsis whitespace-nowrap">
{activation.activation_key}
</div>
</CardContent>
</Card>
...
This code represents a page with several cards displaying quick look information in headers.
I would like each line to appear on just one line and be truncated if it exceeds the available space.
While everything looks good when working with activation keys, I encounter a problem with host IDs (on the third card), causing the page to expand width-wise and creating a horizontal scroll, even though the host ID is still being truncated.
I am puzzled as to why the page layout breaks when dealing with a longer string compared to others.
Attached are two screenshots - the first showing the working display, and the second highlighting the issue:
https://i.sstatic.net/LR8lnZwd.png
https://i.sstatic.net/l1GRv19F.png
I've tried various options such as break-all, whitespace-nowrap, truncate, etc., but none have resolved the problem.
I also attempted using w-1/4 on Card containers, but it had no effect.
I am utilizing shadow cards (not updated) and Tailwind CSS in a Next.js project.
EDIT:
I discovered a temporary workaround by limiting the width of my div with max-w-[30ch]
, which seems to resolve the issue. However, I'm unsure why it works - although the text is truncated as expected, it doesn't cause the page to expand uncontrollably.
EDIT 2: (SOLUTION)
I managed to solve the problem by switching from flex to grid layout. While I still don't fully understand why flex didn't work smoothly, adopting a grid layout proved to be an effective solution.