Update app.py

app.py

@@ -40,26 +40,33 @@ body {
 .gradio-container {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
                  "Segoe UI", sans-serif;
-    max-width: 1120px !important;
+    max-width: 1200px !important;
     margin: 0 auto !important;
-    padding: 24px 24px 40px 24px !important;
+    padding: 32px 32px 40px 32px !important;
     color: #f9fafb;
 }
 
-/* Remove default white cards so our glass style shows */
+/* make default blocks transparent so our glass style shows */
 .gradio-container .block {
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
 }
 
+/* optional: constrain generic rows a bit */
+.gradio-container .row {
+    max-width: 1120px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 /* Main cards */
 .glass-card {
     background: rgba(15, 23, 42, 0.96); /* near indigo-950 */
     border-radius: 24px;
     border: 1px solid rgba(148, 163, 184, 0.30); /* slate-400 */
     box-shadow: 0 24px 60px rgba(15, 23, 42, 0.9);
-    padding: 20px 22px;
+    padding: 18px 20px;
 }
 
 /* Header bar: CMD-BERT left, About CMD-BERT right */
@@ -198,19 +205,21 @@ textarea {
 def header_html():
     return gr.HTML(
         """
-        <header class="cmd-header">
-          <div class="cmd-header-left">
-            <div class="cmd-logo">C</div>
-            <div>
-              <div class="cmd-title">CMD‑BERT</div>
-              <div class="cmd-subtitle">Cebuano Misinformation Detector</div>
+        <div style="max-width:1120px;margin:0 auto;">
+          <header class="cmd-header">
+            <div class="cmd-header-left">
+              <div class="cmd-logo">C</div>
+              <div>
+                <div class="cmd-title">CMD‑BERT</div>
+                <div class="cmd-subtitle">Cebuano Misinformation Detector</div>
+              </div>
+            </div>
+            <div class="cmd-header-right">
+              <span>About CMD‑BERT</span>
+              <div class="cmd-header-pill"></div>
             </div>
-          </div>
-          <div class="cmd-header-right">
-            <span>About CMD‑BERT</span>
-            <div class="cmd-header-pill"></div>
-          </div>
-        </header>
+          </header>
+        </div>
         """
     )
 
@@ -226,7 +235,7 @@ with gr.Blocks(fill_height=True) as demo:
         header_html()
         gr.HTML(
             """
-            <section style="margin-bottom:22px;">
+            <section style="margin:0 auto 22px auto; max-width:1120px;">
               <div class="hero-title">
                 Check Cebuano text for a misleading writing style.
               </div>
@@ -239,6 +248,7 @@ with gr.Blocks(fill_height=True) as demo:
             """
         )
 
+        gr.HTML("<div style='max-width:1120px;margin:0 auto;'>")
         with gr.Row(elem_classes=["two-col"], equal_height=True):
             # Left: input card
             with gr.Column(scale=3):
@@ -290,6 +300,7 @@ with gr.Blocks(fill_height=True) as demo:
                         "Output: Label and confidence score for the submitted text."
                         "</span>"
                     )
+        gr.HTML("</div>")
 
         def analyze_ui(text):
             probs = classify(text)
@@ -328,6 +339,7 @@ with gr.Blocks(fill_height=True) as demo:
     # -------- How it works tab --------
     with gr.Tab("How it works"):
         header_html()
+        gr.HTML("<div style='max-width:1120px;margin:0 auto;'>")
         with gr.Group(elem_classes=["glass-card"]):
             gr.Markdown(
                 "## How CMD‑BERT works\n"
@@ -359,10 +371,12 @@ with gr.Blocks(fill_height=True) as demo:
                 "- Users are reminded that this is a screening tool only.\n"
                 "- Final judgment should always involve human critical thinking."
             )
+        gr.HTML("</div>")
 
     # -------- About tab --------
     with gr.Tab("About"):
         header_html()
+        gr.HTML("<div style='max-width:1120px;margin:0 auto;'>")
         with gr.Group(elem_classes=["glass-card"]):
             gr.Markdown(
                 "## About CMD‑BERT\n"
@@ -386,10 +400,12 @@ with gr.Blocks(fill_height=True) as demo:
                 "**Adviser:** Engr. Jueco, M.Eng.  \n"
                 "January 2026"
             )
+        gr.HTML("</div>")
 
     # -------- Feedback tab --------
     with gr.Tab("Feedback"):
         header_html()
+        gr.HTML("<div style='max-width:1120px;margin:0 auto;'>")
         with gr.Group(elem_classes=["glass-card"]):
             gr.Markdown(
                 "## Feedback and model improvement\n"
@@ -442,6 +458,7 @@ with gr.Blocks(fill_height=True) as demo:
             inputs=[fb_type, fb_text, fb_email, fb_checkbox],
             outputs=fb_status,
         )
+        gr.HTML("</div>")
 
 
 if __name__ == "__main__":