Update app.py

app.py

@@ -696,7 +696,10 @@ def build_catalogue() -> str:
 
     return f"""<style>
 .cat-wrap, .cat-wrap * {{ color: #E6F0F6 !important; font-family: 'IBM Plex Sans', system-ui, sans-serif; }}
-.cat-wrap {{ border-top: 1px solid #8FB6D0; margin-top: 34px; padding-top: 22px; }}
+.cat-wrap {{ max-height: 72vh; overflow-y: auto; padding: 4px 8px 4px 0; }}
+.cat-wrap::-webkit-scrollbar {{ width: 9px; }}
+.cat-wrap::-webkit-scrollbar-track {{ background: rgba(11,31,47,.6); }}
+.cat-wrap::-webkit-scrollbar-thumb {{ background: rgba(143,182,208,.45); border-radius: 4px; }}
 .cat-head {{ font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .2em;
   text-transform: uppercase; color: #8FB6D0 !important; margin-bottom: 4px; }}
 .cat-intro {{ font-size: .9rem; color: #A9C9DF !important; max-width: 62ch; line-height: 1.65; margin: 0 0 20px; }}
@@ -936,7 +939,14 @@ body { position: static !important; overflow-x: hidden !important; }
 #result_col::-webkit-scrollbar-thumb { background: rgba(143,182,208,.45); border-radius: 4px; }
 #result_col::-webkit-scrollbar-thumb:hover { background: var(--redline); }
 
-#catalogue_bar { margin-top: 26px; }
+#catalogue_bar { margin-top: 26px; border: 1px solid var(--line) !important; background: rgba(18,50,74,.55) !important; }
+#catalogue_bar > button, #catalogue_bar .label-wrap, #catalogue_bar span {
+  color: var(--paper) !important;
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-size: .74rem !important; letter-spacing: .14em !important;
+  text-transform: uppercase !important;
+}
+#catalogue_bar svg { color: var(--redline) !important; }
 
 @media (max-width: 1000px) { .gradio-container { padding: 16px 14px 56px !important; } }
 @media (max-width: 720px) {
@@ -956,10 +966,6 @@ with gr.Blocks(css=CSS, title="Facade — architectural style finder",
       <div class="sub">Elevation survey · style identification · 1000-plate reference corpus</div>
     </div>""")
 
-    with gr.Row(elem_id="catalogue_bar"):
-        show_cat = gr.Button("Show the 20 styles this can identify", size="sm")
-    catalogue_top = gr.HTML()
-
     with gr.Row():
         with gr.Column(scale=5, elem_id="controls"):
             img = gr.Image(type="pil", label="Elevation photograph", height=300)
@@ -985,6 +991,10 @@ with gr.Blocks(css=CSS, title="Facade — architectural style finder",
         with gr.Column(scale=7, elem_id="result_col"):
             out = gr.HTML(EMPTY_HTML)
 
+    with gr.Accordion("The 20 styles this can identify", open=False,
+                      elem_id="catalogue_bar"):
+        catalogue_top = gr.HTML()
+
     def do_geocode(q):
         hit = geocode(q)
         if not hit: