Update app.py

app.py

@@ -98,52 +98,41 @@ def gradio_fn(message, history):
     )
 
 with gr.Blocks(css="""
+    :root { --corner-h: min(65vh, 820px); }  /* bigger images, size caps to viewport */
+
+    html, body { overflow-y: hidden; }       /* no vertical scroll */
     .gradio-container {
         max-width: 600px;
         margin: auto;
         padding: 20px;
         font-family: sans-serif;
         position: relative;
-        }
-    .chatbot {
-        height: 500px !important;
-        overflow-y: auto;
-        }
+    }
+
+    .chatbot { height: 500px !important; overflow-y: auto; }
+
     .corner {
-       position: fixed;
-       bottom: 2px;
-       z-index: 9999;
-       pointer-events: none;
-        } 
-    #left { left: 2px; }
-    #right { right: 2px; }
+        position: fixed;
+        z-index: 9999;
+        pointer-events: none;
+    }
+    #left  { left: 8px;  bottom: 8px; }      /* Arjuna pinned to bottom-left */
+    #right { right: 8px; bottom: 88px; }     /* Krishna lifted ~80–90px */
+
     .corner img {
-       height: 500px;  /* fixed height */
-       width: auto;    /* auto to keep aspect ratio */
-        }
-    
-    """) as demo:
-    gr.Markdown(
-    """
-        <div style='text-align: center; padding: 10px;'>
-        <h1 style='font-size: 2.2em; margin-bottom: 0.2em;'><span style='color: #4F46E5;'>kRISHNA.ai</span></h1>
-        <p style='font-size: 1.1em; color: #555;'>5000-Years of Ancient WISDOM with Modern AI ✨</p>
-        </div>
-    """,
-    elem_id="header"
-    )
-    chat = gr.ChatInterface(
-        fn=gradio_fn,
-        examples=[
-            "Hello!",
-            "How can I overcome fear of failure?",
-            "How do I forgive someone who hurt me deeply?",
-            "What can I do to stop overthinking?"
-        ],
-        chatbot=gr.Chatbot(type="messages", elem_classes="chatbot"),
-        type="messages",
-    )
-    gr.HTML(f"""
+        height: var(--corner-h);
+        width: auto;
+        display: block;
+    }
+
+    /* safety on short screens: scale down a bit so nothing gets cramped */
+    @media (max-height: 740px) {
+        :root { --corner-h: 50vh; }
+        #right { bottom: 72px; }
+    }
+""") as demo:
+    ...
+    gr.HTML("""
       <div id="left" class="corner">
         <img src="https://huggingface.co/spaces/JDhruv14/gita/resolve/main/arjuna.png" alt="Arjun">
       </div>
@@ -152,5 +141,6 @@ with gr.Blocks(css="""
       </div>
     """)
 
+
 if __name__ == "__main__":
     demo.launch()