From 557cf4ca34f477d6ab09a22311cb3ef2c00a0ed8 Mon Sep 17 00:00:00 2001
From: Ignacio Rivero <igna@netpaws.cc>
Date: Mon, 23 Jun 2025 20:32:03 -0300
Subject: [PATCH] Minor CSS fixes

---
 app.py | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/app.py b/app.py
index aee5f84..1f96492 100644
--- a/app.py
+++ b/app.py
@@ -136,6 +136,8 @@ HTML_FORM = '''
   }
 
   .preview-card {
+    display: flex;
+    flex-direction: column;
     background: #23282d;
     padding: 2em 1.4em 1em 1.4em;
     border-radius: 1.5em;
@@ -145,6 +147,7 @@ HTML_FORM = '''
     text-align: center;
     box-sizing: border-box;
     margin-left: 0;
+    align-items: center;
   }
   img {
     margin-top: 1em;
@@ -200,10 +203,10 @@ HTML_FORM = '''
 
   .print-frame {
     position: relative;
-    background: #fff;
-    padding: 10px 15px;
+    padding: 10px 0 10px 0;
     margin-top: 1em;
     overflow: hidden;
+    max-width: 384px;
   }
 
   .print-frame::before,
@@ -211,28 +214,29 @@ HTML_FORM = '''
     content: "";
     position: absolute;
     left: 0;
-    width: 101%;
+    width: 100%;
     height: 10px;
-    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQuMjMzMyA0LjIzMzMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1vcGFjaXR5PSIuOTc2NDciPgo8cmVjdCB4PSItNS41NTExZS0xNyIgd2lkdGg9IjQuMjMzMyIgaGVpZ2h0PSI0LjIzMzMiIGZpbGw9IiMyMjI4MmMiIHN0cm9rZS13aWR0aD0iLjE5MjI2Ii8+CjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KC4wMzYxMzUgMCAwIC4wNDE3MjUgMS4xNTY4IDEuMTI4OSkiIGQ9Im04NS4xNDEgNzQuNDAzLTExNy4xNS0xZS02IDU4LjU3Ny0xMDEuNDZ6IiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9Ii4yNjQ1OCIvPgo8L2c+Cjwvc3ZnPgo=') repeat-x left;
+    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQuMjMzMyA0LjIzMzMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KC4wMzYxMzUgMCAwIC4wNDE3MjUgMS4xNTY4IDEuMTI4OSkiIGQ9Im04NS4xNDEgNzQuNDAzLTExNy4xNS0xZS02IDU4LjU3Ny0xMDEuNDZ6IiBmaWxsPSIjZmZmIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utb3BhY2l0eT0iLjk3NjQ3IiBzdHJva2Utd2lkdGg9Ii4yNjQ1OCIvPgo8L3N2Zz4K') repeat-x left;
     background-size: 10px 384px;
     z-index: 1;
   }
 
   .print-frame::before {
-    top: 0;
+    top: 1px;
   }
 
   .print-frame::after {
-    bottom: 0;
+    bottom: 1px;
     transform: rotate(180deg);
   }
 
   .print-frame img {
     display: block;
     margin: 0 auto;
-    border-radius: 0;
     box-shadow: none;
     position: relative;
+    width: 100%
+    max-width: 384px;
     z-index: 2;
   }
 
@@ -242,7 +246,7 @@ HTML_FORM = '''
       min-height: 12em;
   }
 
-    @media (max-width: 1000px) {  
+  @media (max-width: 1000px) {  
     body {
       font-size: 1.28em !important;  /* Big bump */
     }
@@ -314,7 +318,7 @@ HTML_FORM = '''
   </div>
   <div class="preview-card">
     {% if img %}
-      <h3 style="margin-top:0.1em;margin-bottom:0.6em;">Vista previa</h3>
+      <h2 style="margin-top:0.1em; margin-bottom:0;">Vista previa</h2>
       <div class="print-frame">
         <img src="data:image/png;base64,{{ img }}">
       </div>