Merge pull request #26 from imjesusc/dev

Fixed link and container layout for improved handling of long words.
pheralb · Apr 13, 2024 · fef815c · fef815c
2 parents 3c824d5 + 99dad0d
commit fef815c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>