🐞 fix: Fix card overflow

public/stylesheets/style.css

@@ -23,6 +23,7 @@
     --font-weight-normal: 400;
     --font-weight-bold: 700;
     --radius-sm: 0.25rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1468,6 +1469,11 @@
       }
     }
   }
+  .drawer-content {
+    grid-column-start: 2;
+    grid-row-start: 1;
+    min-width: calc(0.25rem * 0);
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -2346,6 +2352,11 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .rounded-box {
     border-radius: var(--radius-box);
   }
@@ -2411,6 +2422,9 @@
   .text-wrap {
     text-wrap: wrap;
   }
+  .wrap-anywhere {
+    overflow-wrap: anywhere;
+  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -2462,6 +2476,10 @@
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .card-lg {
     .card-body {
       --card-p: 2rem;

views/domain-cards.ejs

@@ -31,7 +31,7 @@ data.forEach(item => {
     .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
     .slice(0, 5);
     %>
-    <div class="card w-full bg-base-100 card-lg shadow-sm">
+    <div class="card w-full bg-base-100 card-lg shadow-sm wrap-anywhere">
       <div class="card-body">
         <h2 class="card-title"><%= domain %></h2>
         <% sortedEntries.forEach(entry => { %>