Update style.css

style.css

@@ -408,3 +408,106 @@ footer{ display:none !important; }
   background: rgba(255,255,255,.14);
   border-radius: 999px;
 }
+/* ============================================================
+   LAYOUT PATCH — center + compact cards + clean gallery
+   ============================================================ */
+
+/* 1) Center everything with a max width */
+#tqApp{
+  max-width: 980px;
+  margin: 0 auto;
+  padding-left: 18px;
+  padding-right: 18px;
+}
+
+/* 2) Make panels feel tighter */
+.gradio-container .gr-panel,
+.gradio-container .block,
+.gradio-container .wrap{
+  padding: 12px !important;
+}
+
+/* 3) Headings spacing */
+#tqApp h2{
+  margin-top: 6px !important;
+  margin-bottom: 10px !important;
+}
+
+/* 4) Make markdown paragraphs not too wide */
+#tqApp .prose, #tqApp .markdown{
+  max-width: 860px;
+}
+
+/* 5) Center buttons + make them look like buttons */
+#btn_down, #btn_strange{
+  margin: 10px auto 6px auto !important;
+  display: inline-flex !important;
+}
+
+#btn_down button, #btn_strange button{
+  min-width: 220px !important;
+  height: 44px !important;
+  padding: 10px 18px !important;
+  border-radius: 999px !important;
+}
+
+/* In case Gradio wraps button into a full-width row */
+#btn_down, #btn_strange{
+  width: 100% !important;
+  display: flex !important;
+  justify-content: center !important;
+}
+
+/* 6) Slider: keep it centered and not mega wide */
+#tqApp .gr-slider{
+  max-width: 860px !important;
+  margin: 0 auto !important;
+}
+
+/* 7) JSON status: make it compact */
+#tqApp .json{
+  max-width: 860px !important;
+  margin: 0 auto !important;
+}
+
+/* 8) Gallery container centered */
+#down_gallery, #strange_gallery{
+  max-width: 980px !important;
+  margin: 0 auto !important;
+}
+
+/* 9) Force a clean grid of small cards (until carousel is perfect) */
+#down_gallery :is(ul, .grid, .wrap, .items),
+#strange_gallery :is(ul, .grid, .wrap, .items){
+  display: grid !important;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
+  gap: 14px !important;
+  align-items: start !important;
+}
+
+/* 10) Ensure thumbnails are same size and NOT circular */
+#down_gallery img, #strange_gallery img{
+  width: 100% !important;
+  height: 160px !important;
+  object-fit: contain !important;
+  border-radius: 12px !important;
+  clip-path: none !important;
+  mask-image: none !important;
+  background: rgba(255,255,255,.02) !important;
+}
+
+/* 11) Card wrapper style */
+#down_gallery :is(li, figure, .gallery-item, .thumbnail-item, .item, .card),
+#strange_gallery :is(li, figure, .gallery-item, .thumbnail-item, .item, .card){
+  background: rgba(255,255,255,.03) !important;
+  border: 1px solid rgba(255,255,255,.10) !important;
+  border-radius: 14px !important;
+  padding: 10px !important;
+  overflow: hidden !important;
+}
+
+/* 12) Hide filenames/captions */
+#down_gallery :is(figcaption, .caption, .filename),
+#strange_gallery :is(figcaption, .caption, .filename){
+  display: none !important;
+}