From 1b94629c790b54afde52521b39dc16e2f449b072 Mon Sep 17 00:00:00 2001
From: Sergio <77530549+sergi0g@users.noreply.github.com>
Date: Fri, 7 Mar 2025 18:01:32 +0200
Subject: [PATCH] fix: overflowing image references in web UI

---
 web/src/components/Image.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Image.tsx b/web/src/components/Image.tsx
index bf3de6d..53bb966 100644
--- a/web/src/components/Image.tsx
+++ b/web/src/components/Image.tsx
@@ -82,14 +82,14 @@ export default function Image({ data }: { data: Image }) {
               >
                 <div className="mb-4 flex items-center gap-3">
                   <Box className={`size-6 shrink-0 text-${theme}-500`} />
-                  <DialogTitle className="font-mono text-black dark:text-white">
+                  <DialogTitle className="font-mono text-black dark:text-white break-all">
                     {url ? (
                       <>
                         <a
                           href={url}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className={`group w-fit text-black hover:underline dark:text-white`}
+                          className={`group w-fit hover:underline`}
                         >
                           <span>
                             {data.reference}