Update app.py

app.py

@@ -115,6 +115,8 @@ p {
     flex-direction: column;
     justify-content: center; /* Centrar verticalmente el contenido */
     min-height: 80px; /* Altura mínima para asegurar visibilidad */
+    width: 100%; /* Asegurar que ocupe todo el ancho disponible */
+    box-sizing: border-box; /* Incluir padding y borde en el ancho */
 }
 .gradio-output .label-text {
     color: #00BFFF !important; /* Color de acento para el texto del label (LABEL_1, LABEL_0, etc.) */
@@ -160,12 +162,23 @@ p {
     white-space: nowrap; /* Evitar que el texto se rompa en varias líneas */
     flex-shrink: 0; /* No permitir que se encojan si hay poco espacio */
     cursor: pointer; /* Indicar que son clickeables */
+    flex-grow: 1; /* Permitir que los botones de ejemplo crezcan para llenar el espacio */
+    min-width: 80px; /* Asegurar un ancho mínimo para cada botón */
 }
 .example-button:hover {
     background-color: #007ACC !important; /* Azul Oscuro al pasar el ratón por los ejemplos */
     border-color: #00BFFF !important;
 }
 
+/* Contenedor de los botones de ejemplo para forzar el "wrap" con flexbox */
+.example-buttons-container {
+    display: flex;
+    flex-wrap: wrap; /* ¡Esto simula el wrap que no podemos usar en gr.Row! */
+    justify-content: center; /* Centrar los botones si no llenan la línea */
+    margin-top: 5px; /* Pequeño margen superior */
+    margin-bottom: 10px; /* Pequeño margen inferior */
+}
+
 /* LÍNEAS DIVISORIAS */
 hr {
     border-top: 1px solid #4A5B6C; /* Línea divisoria con Gris Claro */
@@ -288,19 +301,17 @@ with gr.Blocks(css=custom_css, theme=None) as demo:
         )
         analyze_btn = gr.Button("Analyze Sentiment", variant="primary")
 
-        # --- Ejemplos dinámicos como botones individuales ---
-        gr.Markdown("<hr>")
-        gr.Markdown("<h3 style='color: #00BFFF;'>Try examples:</h3>")
+        # --- Título para los ejemplos ---
+        gr.Markdown("<h3 style='color: #00BFFF; margin-top: 5px; margin-bottom: 5px;'>Try examples:</h3>")
         
-        with gr.Row(wrap=True, elem_classes="example-buttons-row"): # wrap=True permite que los botones salten de línea
+        # Contenedor para los botones de ejemplo para manejar el "wrap" vía CSS
+        # Importante: gr.Row no tiene wrap en 5.31.0, así que lo manejamos con CSS en .example-buttons-container
+        with gr.Row(elem_classes="example-buttons-container"):
             # Generar 3 botones de ejemplo aleatorios
-            # Nota: Esto se genera una vez al inicio del Space. Para que cambie con cada recarga
-            # del usuario, se necesita un enfoque de state o una función para recargar la interfaz.
-            # Para un iframe simple, se recargará al recargar la página web.
             for example_text in random.sample(ALL_EXAMPLES, 3):
                 gr.Button(
                     example_text,
-                    elem_classes="example-button" # Aplica el estilo definido en CSS
+                    elem_classes="example-button"
                 ).click(
                     fn=lambda x: x, # Función simple para pasar el texto del botón al textbox
                     inputs=[gr.State(example_text)], # Usamos gr.State para pasar el texto del botón
@@ -310,12 +321,14 @@ with gr.Blocks(css=custom_css, theme=None) as demo:
                     inputs=text_input,
                     outputs=[overall_sentiment_output, confidence_scores_output, raw_output]
                 )
-
-        gr.Markdown("<hr>")
+        
+        gr.Markdown("<hr>") # Separador
         gr.Markdown("<h2 style='color: #00BFFF;'>📊 Results</h2>")
         
         # Output principal de sentimiento que se expande horizontalmente
-        overall_sentiment_output = gr.HTML(label="Overall Sentiment", scale=3) # scale puede ayudar con el layout
+        # Mantenemos 'overall_sentiment_output' en el flujo normal,
+        # sin un gr.Row separado para que ocupe todo el ancho por defecto del Column.
+        overall_sentiment_output = gr.HTML(label="Overall Sentiment") # Eliminamos scale=3 si causa problemas
         # Estos se mantienen ocultos
         confidence_scores_output = gr.Label(num_top_classes=3, label="Confidence Scores", visible=False)
         raw_output = gr.JSON(label="Raw Model Output", visible=False)