wip

lib/elixir_blonk_web/live/gif_scan_live/index.html.heex

···
                 
                 <!-- Text Overlay -->
                 <%= if text && String.trim(text) != "" do %>
-                  <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black via-black to-transparent text-white p-3 text-xs opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
-                    <%= text %>
+                  <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black via-black to-transparent text-white p-6 text-3xl font-bold leading-tight opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-4 group-hover:translate-y-0">
+                    <%= String.slice(text, 0, 160) %><%= if String.length(text) > 160, do: "..." %>
                   </div>
                 <% end %>
               </div>

priv/static/assets/app.css

···
   line-height: 1.625;
 }
 
+.leading-tight {
+  line-height: 1.25;
+}
+
 .tracking-tighter {
   letter-spacing: -0.05em;
 }