From c922c5b08387b01136332876782fed1444203096 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Tue, 21 Jan 2025 11:03:48 +0100
Subject: [PATCH] fix: certificate card delete button not reachable caused by
 overflow (#2037)

---
 .../[locale]/manage/tools/certificates/page.tsx   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/tools/certificates/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/certificates/page.tsx
index 0be4bcac3..22c80fedf 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/certificates/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/certificates/page.tsx
@@ -59,10 +59,17 @@ export default async function CertificatesPage({ params }: CertificatesPageProps
           {x509Certificates.map((cert) => (
             <Card key={cert.x509.fingerprint} withBorder>
               <Group wrap="nowrap">
-                <IconCertificate color={getMantineColor(iconColor(cert.x509.validToDate), 6)} size={32} stroke={1.5} />
-                <Stack flex={1} gap="xs">
-                  <Group justify="space-between">
-                    <Text fw={500}>{cert.x509.subject}</Text>
+                <IconCertificate
+                  color={getMantineColor(iconColor(cert.x509.validToDate), 6)}
+                  style={{ minWidth: 32 }}
+                  size={32}
+                  stroke={1.5}
+                />
+                <Stack flex={1} gap="xs" maw="calc(100% - 48px)">
+                  <Group justify="space-between" wrap="nowrap">
+                    <Text fw={500} lineClamp={1} style={{ wordBreak: "break-all" }}>
+                      {cert.x509.subject}
+                    </Text>
                     <Text c="gray.6" ta="end" size="sm">
                       {cert.fileName}
                     </Text>