From 99dad0d839789dbcf03d163d61e285879d32431d Mon Sep 17 00:00:00 2001
From: imjesusc <iamjesus.ds@gmail.com>
Date: Sat, 13 Apr 2024 00:12:15 -0500
Subject: [PATCH] Fixed link and container layout for improved handling of long
 words.

---
 src/components/links/card-link.tsx | 2 +-
 src/components/links/copy-qr.tsx   | 4 ++--
 src/components/links/edit-link.tsx | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/links/card-link.tsx b/src/components/links/card-link.tsx
index 44c0edf..3ec2b47 100644
--- a/src/components/links/card-link.tsx
+++ b/src/components/links/card-link.tsx
@@ -46,7 +46,7 @@ const CardLink = ({ linkInfo, linkTags, tagsInfo }: CardLinkProps) => {
       <div className="mb-1 flex w-full items-center justify-between space-x-2">
         <ExternalLink
           href={`/${linkInfo.slug}`}
-          className="flex items-center space-x-[1px] font-medium transition-opacity duration-75 hover:opacity-80"
+          className="block  space-x-[1px] overflow-hidden truncate font-medium transition-opacity duration-75 hover:opacity-80"
         >
           <span className="text-sm opacity-40">/</span>
           <span>{linkInfo.slug}</span>
diff --git a/src/components/links/copy-qr.tsx b/src/components/links/copy-qr.tsx
index 0724007..7f7179c 100644
--- a/src/components/links/copy-qr.tsx
+++ b/src/components/links/copy-qr.tsx
@@ -59,7 +59,7 @@ const CopyQR = ({ linkInfo }: CopyQRProps) => {
         <DialogTitle>Copy QR Code</DialogTitle>
         <DialogDescription>{linkInfo.description}</DialogDescription>
       </DialogHeader>
-      <div className="my-3 flex flex-col items-center justify-center space-y-3">
+      <div className="my-3 flex flex-col overflow-hidden items-center justify-center space-y-3">
         <div className="rounded-lg border border-neutral-100 p-2 shadow-md dark:border-neutral-800">
           <QRCode
             id="qr-code"
@@ -69,7 +69,7 @@ const CopyQR = ({ linkInfo }: CopyQRProps) => {
             viewBox={`0 0 128 128`}
           />
         </div>
-        <p className="font-mono font-medium">{`/${linkInfo.slug}`}</p>
+        <p className="font-mono font-medium w-full block truncate">{`/${linkInfo.slug}`}</p>
       </div>
       <DialogFooter>
         <DropdownMenu>
diff --git a/src/components/links/edit-link.tsx b/src/components/links/edit-link.tsx
index a59f874..cdd70ab 100644
--- a/src/components/links/edit-link.tsx
+++ b/src/components/links/edit-link.tsx
@@ -95,9 +95,9 @@ const EditLink = (props: EditLinkProps) => {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{props.trigger}</DialogTrigger>
       <DialogContent>
-        <DialogHeader>
+        <DialogHeader className="overflow-hidden">
           <DialogTitle>Edit link</DialogTitle>
-          <DialogDescription className="truncate">
+          <DialogDescription className="block truncate">
             /{props.link.slug}
           </DialogDescription>
         </DialogHeader>