Update app.py

app.py

@@ -59,21 +59,26 @@ def query(prompt, is_negative=False, steps=30, cfg_scale=7, sampler="DPM++ 2M Ka
 
 css = """
 #app-container {
-    max-width: 600px;
-    margin-left: auto;
-    margin-right: auto;
+    max-width: 100%; /* Ancho máximo del contenedor en 100% del espacio disponible */
+    margin: 0 auto; /* Centrar el contenedor */
+    padding: 20px; /* Espacio interno */
 }
 
 input, textarea, select {
     background-color: #f5f5f5; /* Fondo gris claro para inputs */
     color: #333333; /* Texto gris oscuro en inputs */
     border: 1px solid #cccccc; /* Borde gris claro en inputs */
+    width: 100%; /* Ancho completo del input */
+    box-sizing: border-box; /* Incluir el borde en el ancho total */
 }
 
 button {
     background-color: #f5f5f5; /* Fondo gris claro */
     color: #333333; /* Texto gris oscuro */
     border: 1px solid black; /* Borde negro en botones */
+    width: 100%; /* Ancho completo del botón */
+    box-sizing: border-box; /* Incluir el borde en el ancho total */
+    padding: 10px; /* Espacio interno en el botón */
 }
 
 button.primary {
@@ -95,16 +100,27 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 @media (max-width: 768px) {
-    .button-row {
+    .button-container {
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        align-items: center; /* Centra el botón en vista móvil */
+    }
+
+    .button-container button {
+        width: auto; /* Ajusta el ancho del botón para móviles */
+        margin-top: 10px; /* Espacio superior para el botón en móviles */
     }
 }
 
-.button-container {
-    display: flex;
-    justify-content: flex-end; /* Alinea el botón a la derecha en vista de escritorio */
+@media (min-width: 769px) {
+    .button-container {
+        display: flex;
+        justify-content: flex-end; /* Alinea el botón a la derecha en vista de escritorio */
+    }
+
+    .button-container button {
+        width: auto; /* Ajusta el ancho del botón para escritorio */
+    }
 }
 """