Add fixed height CSS for embedding output panel to prevent excessive page height

app.py

@@ -104,7 +104,16 @@ async def list_models():
     )
 
 
-with gr.Blocks(title="Multi-Model Text Embeddings") as app:
+with gr.Blocks(title="Multi-Model Text Embeddings", css="""
+    .json-holder {
+        max-height: 400px !important;
+        overflow-y: auto !important;
+    }
+    .json-holder .wrap {
+        max-height: 400px !important;
+        overflow-y: auto !important;
+    }
+""") as app:
     gr.Markdown("# Multi-Model Text Embeddings")
     gr.Markdown("Generate embeddings for your text using 16+ state-of-the-art embedding models from Nomic, BGE, Snowflake, IBM Granite, and more.")
     
@@ -120,7 +129,7 @@ with gr.Blocks(title="Multi-Model Text Embeddings") as app:
     text_input = gr.Textbox(label="Enter text to embed", placeholder="Type or paste your text here...")
 
     # Create an output component to display the embedding
-    output = gr.JSON(label="Text Embedding")
+    output = gr.JSON(label="Text Embedding", elem_classes=["json-holder"])
     
     # Add a submit button with API name
     submit_btn = gr.Button("Generate Embedding", variant="primary")