From 335d5ef62efd7f4a8aedac8c65219a5d987c827c Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Wed, 17 Dec 2025 21:55:53 +0100
Subject: [PATCH] fix: improve html diff style

---
 client/app/components/HydrationIssue.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/app/components/HydrationIssue.vue b/client/app/components/HydrationIssue.vue
index ebd340f..f97a3bd 100644
--- a/client/app/components/HydrationIssue.vue
+++ b/client/app/components/HydrationIssue.vue
@@ -76,6 +76,8 @@ function removeSelf() {
   <n-card
     p-4
     relative
+    w-full
+    overflow-auto
   >
     <div class="flex items-start justify-between gap-3">
       <div class="min-w-0">
@@ -138,7 +140,7 @@ function removeSelf() {
     </div>
 
     <div
-      class="w-full mt-3 overflow-auto rounded-lg"
+      class="w-full mt-3 overflow-auto rounded-lg w-fit"
       v-html="diffHtml"
     />
   </n-card>
@@ -154,4 +156,8 @@ function removeSelf() {
     background-color: rgba(220, 38, 38, 0.15); // red-600 at 15% opacity
   }
 }
+
+:deep(.shiki) {
+  width: fit-content;
+}
 </style>