Update app.py

app.py

@@ -27,7 +27,6 @@ button:hover {background-color: #45a049;}
 h1 {color: #333; font-size: 36px; text-align: center; margin-bottom: 20px;}
 h2 {color: #555; font-size: 24px; margin-bottom: 10px;}
 footer {text-align: center; padding: 20px; font-size: 14px;}
-.grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; justify-items: stretch;}
 """
 
 # Define example entries
@@ -54,15 +53,16 @@ with gr.Blocks(css=css) as journal_app:
     gr.Markdown("### **Select an example to start writing:**")
     
     # Align buttons in grid format for better layout
+    with gr.Row():
+        with gr.Column():
+            # Aligning buttons using columns and rows
+            for i, entry in enumerate(example_entries):
+                gr.Button(f"Example {i+1}").click(fn=lambda e=entry: fill_prompt(e), inputs=None, outputs="prompt_textbox")
+
+    # Input text box for writing thoughts
     with gr.Row():
         prompt_textbox = gr.Textbox(label="Write your thoughts here:", placeholder="Start writing or select an example...", elem_id="prompt_box", lines=5)
 
-        with gr.Column():
-            # Arrange example buttons in grid format
-            with gr.Box(elem_classes="grid"):
-                for i, entry in enumerate(example_entries):
-                    gr.Button(f"Example {i+1}").click(fn=lambda e=entry: fill_prompt(e), inputs=None, outputs=prompt_textbox)
-    
     with gr.Row():
         # Output for generated text
         output = gr.Textbox(label="Your AI Journal Entry ✨", lines=6)