fix card layout (#8)

- fix card layout (e877a09bbf57bc23288c33fef01eb95560fc680a)


Co-authored-by: Pablo Carrera <pabloce@users.noreply.huggingface.co>

ui.py

@@ -22,9 +22,9 @@ css = """
 """
 
 PLACEHOLDER = """
-<div class="message-bubble-border" style="display:flex; max-width: 600px; border-width: 0px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px);">
-    <figure style="margin: 0;">
-        <img src="https://i.imgur.com/ZHwzQvI.png" alt="Logo" style="width: 100%; height: 100%; border-radius: 8px;">
+<div class="message-bubble-border" style="display:flex; flex-flow: column; max-width: 600px; border-width: 0px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px);">
+    <figure style="margin: 0;padding-top: 22%;width: 100%;position: relative;">
+        <img src="https://i.imgur.com/ZHwzQvI.png" alt="Logo" style="width: 100%; height: 100%; border-radius: 8px;position: absolute;top: 0;left: 0;object-fit: cover;">
     </figure>
     <div style="padding: .5rem 1.5rem;">
         <h2 style="text-align: left; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">Fine-tune Llama 3 with ORPO</h2>