Make the app responsive by injecting a mobile friendly CSS

app.py

@@ -2,6 +2,7 @@ from ailab_crs import NLP_tasks_crs, Prompt_engineering_crs
 import gradio as gr
 from googletrans import LANGUAGES 
 
+
 # CSS to hide the entire footer, including "Made with Gradio", settings, and API info
 hide_footer_css = """
 <style>
@@ -10,17 +11,29 @@ footer, footer * {
 }
 </style>
 """
+
+# Mobile-friendly CSS
+mobile_css = """
+<style>
+/* Make all inputs, textboxes, and buttons full width on small screens */
+@media (max-width: 768px) {
+    input, textarea, button, .gr-textbox, .gr-button {
+        width: 100% !important;
+        margin: 5px 0 !important;
+    }
+}
+</style>
+"""
     
 nlp_tasks = NLP_tasks_crs()
 supported_langs = list(LANGUAGES.values())
 
-def hide_footer():
-    return """
-    footer {visibility: hidden;}
-    #footer {display: none !important;}
-    """
 
 with gr.Blocks() as demo:
+    # Inject the mobile CSS
+    gr.HTML(mobile_css)
+
+    # App title
     gr.Markdown("# 🧠 NaanhAI 💡")
 
     # Inject the CSS at the top
@@ -35,14 +48,14 @@ with gr.Blocks() as demo:
                 style = gr.Textbox(label="Choose Your Style", value="polite")
     
     with gr.Row(scale=5):
-        with gr.Column(scale=1, min_width=1):
-            btn = gr.Button("Q&A")
-        with gr.Column(scale=2, min_width=1):
-            btn1 = gr.Button("Translator")
-        with gr.Column(scale=2, min_width=1):
-            btn2 = gr.Button("Summarizer")
-        with gr.Column(scale=2, min_width=1):
-            btn3 = gr.Button("Translator_Summarizer")
+    # with gr.Column(scale=1, min_width=1):
+        btn = gr.Button("Q&A")
+    # with gr.Column(scale=2, min_width=1):
+        btn1 = gr.Button("Translator")
+    # with gr.Column(scale=2, min_width=1):
+        btn2 = gr.Button("Summarizer")
+    # with gr.Column(scale=2, min_width=1):
+        btn3 = gr.Button("Translator_Summarizer")
 
     answer = gr.Textbox(label="AI Answer", lines=2)