Match example fills to button labels; lock container width; round logo corners

app.py

@@ -129,9 +129,19 @@ html, body, gradio-app, [class*="gradio-container"] {
   background: #f5f9ff !important;
 }
 
-/* The Space iframe wraps Gradio in <gradio-app>; force it to center horizontally. */
-gradio-app, gradio-app > .gradio-container, gradio-app > div {
+/* The Space iframe wraps Gradio in <gradio-app>; force it to fill viewport so the
+   container width never depends on inner content (otherwise Code/Markdown content
+   will visibly resize the whole page after the first answer arrives). */
+gradio-app {
   display: block !important;
+  width: 100% !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+gradio-app > .gradio-container,
+gradio-app > div {
+  display: block !important;
+  width: 100% !important;
   margin-left: auto !important;
   margin-right: auto !important;
 }
@@ -139,11 +149,45 @@ gradio-app, gradio-app > .gradio-container, gradio-app > div {
 [class*="gradio-container"] {
   max-width: 1480px !important;
   width: 92vw !important;
+  min-width: 0 !important;
   margin-left: auto !important;
   margin-right: auto !important;
   padding-left: 28px !important;
   padding-right: 28px !important;
   color: #0f2744;
+  box-sizing: border-box !important;
+}
+
+/* Lock the inner two-column row so the right panel doesn't shrink before content
+   arrives, then snap back when results appear. */
+[class*="gradio-container"] .layout-gap {
+  width: 100% !important;
+}
+[class*="gradio-container"] .layout-gap > .gr-column {
+  min-width: 0 !important;
+}
+
+/* Prevent Code / Markdown from pushing the page wider than the container. */
+[class*="gradio-container"] .codemirror-wrapper,
+[class*="gradio-container"] .cm-editor,
+[class*="gradio-container"] .cm-scroller {
+  max-width: 100% !important;
+  overflow-x: auto !important;
+}
+[class*="gradio-container"] .gradio-markdown,
+[class*="gradio-container"] .gradio-code,
+[class*="gradio-container"] .prose,
+[class*="gradio-container"] .markdown,
+[class*="gradio-container"] [data-testid="markdown"] {
+  max-width: 100% !important;
+  word-wrap: break-word !important;
+  overflow-wrap: anywhere !important;
+}
+[class*="gradio-container"] .prose pre,
+[class*="gradio-container"] .markdown pre {
+  max-width: 100% !important;
+  overflow-x: auto !important;
+  white-space: pre-wrap !important;
 }
 
 /* Some Gradio builds wrap the app in `.main` or `.app`; center those too. */
@@ -166,17 +210,20 @@ gradio-app, gradio-app > .gradio-container, gradio-app > div {
 .banner-logo-image,
 .banner-logo-image .image-container,
 .banner-logo-image .image-frame,
-.banner-logo-image > div {
+.banner-logo-image > div,
+.banner-logo-image button {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
+  border-radius: 18px !important;
+  overflow: hidden !important;
 }
 .banner-logo-image img {
   width: 100%;
   max-width: 360px;
   height: auto;
   object-fit: contain;
-  border-radius: 0 !important;
+  border-radius: 18px !important;
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
@@ -947,17 +994,17 @@ with gr.Blocks(
         outputs=[answer, trace],
     )
     ex1_btn.click(
-        fn=lambda: "Plan a 2-day food + museum itinerary in Tokyo under $250, with trade-offs.",
+        fn=lambda: "Plan a 2-day Tokyo trip under $250 with trade-offs.",
         inputs=[],
         outputs=[question],
     )
     ex2_btn.click(
-        fn=lambda: "Find 3 open-source coding agents and compare real strengths/limitations.",
+        fn=lambda: "Compare 3 open-source coding agents with pros/cons.",
         inputs=[],
         outputs=[question],
     )
     ex3_btn.click(
-        fn=lambda: "Explain whether RAG or fine-tuning is better for a legal QA assistant, and why.",
+        fn=lambda: "RAG vs fine-tuning for legal QA: which and why?",
         inputs=[],
         outputs=[question],
     )