fixing mobile rendering

app.py

@@ -110,6 +110,22 @@ custom_css = """
     color-scheme: light;
 }
 
+html, body {
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow-x: clip;
+    -webkit-tap-highlight-color: transparent;
+}
+html, body, .gradio-container, .main {
+    background: var(--pruna-bg-primary) !important;
+    color: var(--pruna-text-primary) !important;
+    font-family: var(--pruna-font) !important;
+}
+button, a, label, input, select, textarea,
+[role="button"], [role="tab"], [role="radio"],
+.gradio-container * {
+    -webkit-tap-highlight-color: transparent !important;
+}
 html, body, .gradio-container, .main {
     background: var(--pruna-bg-primary) !important;
     color: var(--pruna-text-primary) !important;
@@ -123,9 +139,34 @@ body, .gradio-container {
 }
 
 .gradio-container {
+    width: 100% !important;
     max-width: 1200px !important;
     margin: 0 auto !important;
     padding-top: 0 !important;
+    padding-left: 20px !important;
+    padding-right: 20px !important;
+    box-sizing: border-box !important;
+    overflow-x: clip;
+}
+.gradio-container .main,
+.gradio-container .wrap,
+.gradio-container .contain,
+.gradio-container .block,
+.gradio-container .form,
+.gradio-container .row,
+.gradio-container .column,
+.gradio-container .gap,
+.gradio-container .html-container,
+.gradio-container .prose,
+.gradio-container .padded,
+.main-tabs,
+.main-tabs .tab-wrapper,
+.main-tabs .tabitem,
+.benchmark-catalogue,
+.benchmark-detail,
+.benchmark-panel,
+.leaderboard-controls {
+    max-width: 100% !important;
 }
 
 /* —— App header (InferBench only) —— */
@@ -183,7 +224,9 @@ button.theme-toggle {
     z-index: 6;
 }
 .app-header .theme-toggle:hover,
-button.theme-toggle:hover {
+.app-header .theme-toggle:active,
+button.theme-toggle:hover,
+button.theme-toggle:active {
     color: var(--pruna-menu-hover-color) !important;
     background: var(--pruna-menu-hover-bg) !important;
     border-color: var(--pruna-menu-border) !important;
@@ -220,7 +263,7 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     align-items: center;
     justify-content: center;
     gap: 12px;
-    width: max-content !important;
+    width: auto !important;
     max-width: 100%;
     margin: 0 auto;
 }
@@ -247,7 +290,9 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
 .main-tabs .tab-container {
     height: auto !important;
     justify-content: center !important;
-    overflow: visible !important;
+    flex-wrap: wrap !important;
+    overflow: hidden !important;
+    max-width: 100% !important;
     gap: 2px;
 }
 .main-tabs .tab-container::after {
@@ -267,7 +312,8 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     min-height: 44px !important;
     height: auto !important;
 }
-.main-tabs .tab-container > button:hover:not(.selected) {
+.main-tabs .tab-container > button:hover:not(.selected),
+.main-tabs .tab-container > button:active:not(.selected) {
     color: var(--pruna-tab-hover) !important;
     background: transparent !important;
 }
@@ -286,6 +332,242 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     border-radius: 0 !important;
 }
 
+/* —— About: two columns on desktop, stacked on phone —— */
+.about-layout,
+.about-layout.row,
+.about-layout .form {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: flex-start !important;
+    gap: 8px 40px !important;
+    width: 100% !important;
+}
+.about-layout > .about-col,
+.about-layout .form > .about-col {
+    flex: 1 1 340px !important;
+    min-width: 280px !important;
+    max-width: 100% !important;
+}
+.about-copy,
+.about-copy.block,
+.about-copy .prose,
+.about-copy.prose,
+.about-copy.padded {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow-wrap: break-word !important;
+    word-break: break-word !important;
+}
+.about-copy ol,
+.about-copy ul,
+.about-copy .prose ol,
+.about-copy .prose ul {
+    padding-left: 1.25rem !important;
+    margin: 0 0 0.8rem !important;
+}
+.about-copy li,
+.about-copy .prose li {
+    overflow-wrap: break-word;
+}
+
+@media (max-width: 700px) {
+    .gradio-container {
+        padding-left: 12px !important;
+        padding-right: 12px !important;
+    }
+    .gradio-container .block,
+    .gradio-container .form,
+    .gradio-container .row,
+    .gradio-container .column,
+    .gradio-container .wrap,
+    .benchmark-catalogue,
+    .benchmark-detail,
+    .benchmark-panel,
+    .leaderboard-controls {
+        min-width: 0 !important;
+        max-width: 100% !important;
+    }
+    .app-header {
+        padding: 4px 40px 0 8px;
+        margin: 4px 0 12px;
+    }
+    .app-header-logo {
+        width: 36px !important;
+        height: 42px !important;
+    }
+    .app-header-brand h1,
+    .gradio-container .app-header-brand h1 {
+        font-size: 1.55rem !important;
+    }
+    .app-header-tagline {
+        font-size: 0.88rem !important;
+        padding: 0 8px !important;
+    }
+    .main-tabs > .tab-wrapper {
+        margin: 0 0 14px !important;
+    }
+    .main-tabs .tab-container {
+        flex-wrap: wrap !important;
+        justify-content: center !important;
+        gap: 0 !important;
+    }
+    .main-tabs .tab-container > button {
+        padding: 10px 12px !important;
+        font-size: 0.88rem !important;
+        min-height: 40px !important;
+    }
+    .about-layout,
+    .about-layout.row,
+    .about-layout .form {
+        flex-direction: column !important;
+        flex-wrap: nowrap !important;
+        gap: 8px !important;
+    }
+    .about-layout > .about-col,
+    .about-layout > div {
+        flex: 1 1 auto !important;
+        width: 100% !important;
+    }
+    .about-copy h1,
+    .about-copy .prose h1 {
+        font-size: 1.3rem !important;
+    }
+    .about-copy h2,
+    .about-copy .prose h2 {
+        margin-top: 1.25rem !important;
+        font-size: 1.12rem !important;
+    }
+    .community-footer-links {
+        gap: 10px 14px;
+    }
+    .home-snapshots-grid {
+        grid-template-columns: 1fr;
+        gap: 22px;
+    }
+    .home-model {
+        overflow-wrap: anywhere;
+    }
+    .benchmark-catalogue-row,
+    .benchmark-catalogue-row.row,
+    .benchmark-catalogue-row .form {
+        flex-direction: column !important;
+        flex-wrap: nowrap !important;
+        align-items: stretch !important;
+        height: auto !important;
+        flex-grow: 0 !important;
+    }
+    .benchmark-catalogue-row .benchmark-card-col {
+        width: 100% !important;
+        flex: 0 0 auto !important;
+        align-self: stretch !important;
+        min-width: 0 !important;
+        min-height: 0 !important;
+        height: auto !important;
+    }
+    .leaderboard-controls,
+    .leaderboard-controls.row,
+    .leaderboard-controls .form {
+        flex-direction: column !important;
+        align-items: stretch !important;
+    }
+    .leaderboard-controls > div,
+    .leaderboard-controls .form > div {
+        flex: 1 1 auto !important;
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+    .ranking-table-scroll {
+        max-height: min(75vh, 640px);
+        width: 100%;
+    }
+    .ranking-table th,
+    .ranking-table td,
+    .prose .ranking-table th,
+    .prose .ranking-table td {
+        padding: 8px 10px !important;
+    }
+    .ranking-table .rank,
+    .prose .ranking-table .rank,
+    .ranking-table th.rank {
+        position: sticky !important;
+        left: 0 !important;
+        width: 2.4rem;
+        min-width: 2.4rem;
+    }
+    .ranking-table .model-cell,
+    .prose .ranking-table .model-cell,
+    .ranking-table th.model-cell {
+        position: sticky !important;
+        left: 2.4rem !important;
+        min-width: 108px;
+        max-width: 36vw;
+    }
+    .ranking-table .model-cell strong {
+        white-space: nowrap;
+    }
+    .compare-controls,
+    .compare-controls.row,
+    .compare-controls .form {
+        flex-direction: column !important;
+        flex-wrap: nowrap !important;
+        flex: 0 0 auto !important;
+        align-items: stretch !important;
+        align-content: flex-start !important;
+        height: auto !important;
+        min-height: 0 !important;
+        gap: 10px !important;
+        margin-bottom: 12px !important;
+    }
+    .compare-controls .compare-models,
+    .compare-controls .compare-prompt-count,
+    .compare-controls .compare-shuffle,
+    .compare-controls .form > div {
+        flex: 0 0 auto !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        min-width: 0 !important;
+        height: auto !important;
+        min-height: 0 !important;
+        align-self: stretch !important;
+    }
+    .compare-controls .compare-prompt-count {
+        max-width: 100% !important;
+    }
+    .compare-controls .compare-models .wrap,
+    .compare-controls .compare-models .wrap-inner {
+        height: auto !important;
+        min-height: 40px !important;
+    }
+    .compare-controls .compare-shuffle,
+    .compare-controls .compare-shuffle button {
+        width: 100% !important;
+        align-self: stretch !important;
+        margin-top: 0 !important;
+    }
+    .compare-row {
+        grid-template-columns: 1fr !important;
+    }
+    .compare-prompt-meta {
+        flex-wrap: wrap;
+    }
+    .pareto-layout,
+    .pareto-layout.row,
+    .pareto-layout .form {
+        flex-direction: column !important;
+    }
+    .pareto-layout > .pareto-col,
+    .pareto-layout > div,
+    .pareto-layout .form > div {
+        flex: 1 1 auto !important;
+        width: 100% !important;
+    }
+}
+
 /* —— Benchmark view menu (Leaderboard / Graphs / Compare) —— */
 .benchmark-back-btn,
 .benchmark-back-btn.block,
@@ -335,12 +617,16 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     box-shadow: none !important;
     padding: 0 !important;
     margin: 4px 0 20px !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
 }
 .benchmark-view-menu .wrap {
     display: grid !important;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 4px !important;
     width: 100%;
+    max-width: 100%;
+    min-width: 0;
     padding: 4px !important;
     border: 1px solid var(--pruna-menu-border) !important;
     border-radius: 12px !important;
@@ -385,60 +671,143 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
 }
 @media (max-width: 700px) {
     .benchmark-view-menu .wrap {
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .benchmark-view-menu label {
+        padding: 8px 4px !important;
+        font-size: 0.75rem !important;
+        text-align: center;
     }
 }
 
 /* Surfaces */
-.benchmark-catalogue-row {
-    width: 100%;
+.benchmark-catalogue,
+.benchmark-catalogue .row,
+.benchmark-catalogue .column,
+.benchmark-catalogue .form,
+.benchmark-detail,
+.benchmark-detail .row,
+.benchmark-detail .column,
+.benchmark-detail .form,
+.benchmark-panel,
+.benchmark-panel .row,
+.benchmark-panel .column,
+.benchmark-panel .form {
+    min-width: 0 !important;
+    max-width: 100% !important;
+}
+.benchmark-catalogue.column,
+.benchmark-catalogue.block,
+.benchmark-catalogue .stretch,
+.benchmark-panel.column,
+.benchmark-panel.block,
+.benchmark-panel .stretch {
+    flex-grow: 0 !important;
+    height: auto !important;
+    min-height: 0 !important;
+    justify-content: flex-start !important;
+}
+.benchmark-catalogue-row,
+.benchmark-catalogue-row.row,
+.benchmark-catalogue-row .form {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    width: 100% !important;
     gap: 16px !important;
     align-items: stretch !important;
+    align-content: flex-start !important;
+    flex-grow: 0 !important;
+    height: auto !important;
 }
-.benchmark-catalogue-row > div {
-    display: flex !important;
-    flex-direction: column !important;
-    height: 100% !important;
+.benchmark-catalogue-row .benchmark-card-col {
+    flex: 1 1 280px !important;
+    align-self: stretch !important;
+    min-width: 280px !important;
+    max-width: 100% !important;
+    height: auto !important;
 }
-.benchmark-card-col {
+.benchmark-card-col,
+.benchmark-card-col.block,
+.benchmark-card-col.column,
+.benchmark-card-col.stretch {
     display: flex !important;
     flex-direction: column !important;
-    justify-content: space-between !important;
-    gap: 16px !important;
-    height: 100% !important;
-    min-height: 240px !important;
-    padding: 18px 20px !important;
+    justify-content: flex-start !important;
+    align-items: stretch !important;
+    gap: 12px !important;
+    height: auto !important;
+    min-height: 0 !important;
+    padding: 16px !important;
     border: 1px solid var(--pruna-border) !important;
     border-radius: 16px !important;
     background: var(--pruna-card-bg) !important;
     box-shadow: var(--pruna-card-shadow) !important;
 }
+.benchmark-card-col .form {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: flex-start !important;
+    align-items: stretch !important;
+    gap: 12px !important;
+    width: 100% !important;
+    height: auto !important;
+    min-height: 0 !important;
+    flex: 0 0 auto !important;
+}
 .benchmark-card-col:hover {
     border-color: color-mix(in srgb, var(--pruna-accent) 50%, transparent) !important;
 }
-.benchmark-card-body {
-    flex: 1 1 auto;
-    min-height: 0;
+.benchmark-card-body,
+.benchmark-card-col > .block,
+.benchmark-card-col .html-container,
+.benchmark-card-col .prose,
+.benchmark-card-col .padded,
+.benchmark-card-col .block {
+    flex: 0 0 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
 }
 .benchmark-card-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
     color: var(--pruna-text-primary);
-    font-size: 1.25rem;
+    font-size: 1.15rem;
     font-weight: 700;
     line-height: 1.3;
-    margin: 0 0 8px;
+    margin: 0 0 6px;
+}
+.benchmark-card-emoji {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    line-height: 1;
 }
 .benchmark-card-blurb {
     margin: 0;
     color: var(--pruna-text-body);
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     line-height: 1.45;
 }
 .benchmark-card-col .benchmark-open-btn,
-.benchmark-card-col button {
-    margin-top: auto !important;
+.benchmark-card-col button,
+.benchmark-card-col button.sm,
+.benchmark-card-col button.primary {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
     width: 100% !important;
+    min-width: 0 !important;
+    margin: 0 !important;
     align-self: stretch !important;
-    flex-shrink: 0 !important;
+    flex: 0 0 auto !important;
 }
 .home-callouts > div,
 .compare-prompt-block {
@@ -615,32 +984,25 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     max-width: none !important;
     overflow: visible !important;
 }
-.home-snapshots-table {
-    display: table !important;
-    width: 100% !important;
-    border-collapse: separate !important;
-    border-spacing: 0 12px !important;
-    margin: 0 !important;
-    table-layout: fixed !important;
-    border: none !important;
-    background: transparent !important;
-}
-.home-snapshots-table tbody {
-    display: table-row-group !important;
+.home-snapshots-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 20px 32px;
+    width: 100%;
+    margin: 4px 0 8px;
+    align-items: stretch;
 }
-.home-snapshots-table tr {
-    display: table-row !important;
+.home-snap-card {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    height: 100%;
 }
-.home-snapshots-table td.home-snap-cell {
-    display: table-cell !important;
-    vertical-align: top !important;
-    width: 50% !important;
-    padding: 0 !important;
-    border: 0 !important;
-    background: transparent !important;
+.home-snap-card .home-snap-blurb {
+    margin-top: 6px !important;
 }
-.home-snapshots-table td.home-snap-cell:first-child {
-    padding-right: 24px !important;
+.home-snap-card .home-snap-top {
+    margin-top: auto;
 }
 .home-snap-title,
 .prose .home-snap-title {
@@ -690,7 +1052,7 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
 .home-top-list li,
 .prose .home-top-list li {
     display: grid;
-    grid-template-columns: 28px minmax(0, 1fr) auto;
+    grid-template-columns: 28px minmax(0, 1fr) 4.75rem;
     gap: 10px;
     align-items: center;
     padding: 8px 0;
@@ -698,24 +1060,9 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     color: var(--pruna-text-primary) !important;
 }
 @media (max-width: 700px) {
-    .home-snapshots-table,
-    .home-snapshots-table tbody,
-    .home-snapshots-table tr,
-    .home-snapshots-table td {
-        display: block;
-        width: 100% !important;
-    }
-    .home-snapshots-table {
-        margin: 4px 0 8px;
-        border-spacing: 0;
-    }
-    .home-snapshots-table td.home-snap-cell,
-    .home-snapshots-table td.home-snap-cell:first-child {
-        padding: 0 !important;
-        margin-bottom: 8px;
-    }
-    .home-snap-top {
-        margin-bottom: 16px;
+    .home-snapshots-grid {
+        grid-template-columns: 1fr;
+        gap: 22px;
     }
 }
 .home-rank,
@@ -743,6 +1090,7 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     font-variant-numeric: tabular-nums;
     color: var(--pruna-score) !important;
     font-weight: 600;
+    text-align: right;
 }
 .home-empty,
 .prose .home-empty {
@@ -760,10 +1108,15 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
 .pareto-plot .modebar { display: none !important; }
 
 .leaderboard-controls {
+    display: flex !important;
+    flex-wrap: wrap !important;
     align-items: end !important;
     gap: 10px !important;
     margin-bottom: 12px;
 }
+.leaderboard-controls > div {
+    min-width: 0 !important;
+}
 .leaderboard-controls > .block,
 .leaderboard-controls .form,
 .leaderboard-controls .block {
@@ -832,6 +1185,8 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
 .ranking-table-host.block,
 .ranking-table-host .padded,
 .ranking-table-host.prose {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) !important;
     border: none !important;
     outline: none !important;
     background: transparent !important;
@@ -839,6 +1194,9 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     padding: 0 !important;
     margin: 0 !important;
     width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    overflow: hidden !important;
     --block-border-width: 0 !important;
 }
 .ranking-table-scroll {
@@ -846,9 +1204,14 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     border-radius: 12px;
     background: var(--pruna-menu-bg);
     box-shadow: none;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
     max-height: min(70vh, 720px);
-    overflow: auto;
+    overflow-x: auto;
+    overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior-x: contain;
 }
 .ranking-table,
 .prose .ranking-table {
@@ -1000,9 +1363,22 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
 }
 
 .compare-samples-help { color: var(--pruna-text-body); margin-bottom: 8px; }
-.compare-controls {
-    align-items: flex-end !important;
+.compare-controls,
+.compare-controls.row,
+.compare-controls.column,
+.compare-controls .form {
+    display: flex !important;
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    align-items: stretch !important;
+    align-content: flex-start !important;
+    justify-content: flex-start !important;
     gap: 12px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    flex-grow: 0 !important;
+    height: auto !important;
+    min-height: 0 !important;
     margin-bottom: 16px;
 }
 .compare-controls > .block,
@@ -1015,6 +1391,8 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     box-shadow: none !important;
     padding: 0 !important;
     --block-border-width: 0 !important;
+    height: auto !important;
+    min-height: 0 !important;
 }
 .compare-controls label,
 .compare-controls span[data-testid="block-info"] {
@@ -1030,22 +1408,85 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     min-height: 1.15rem;
 }
 .compare-controls .compare-models {
-    flex: 4 1 0 !important;
-    min-width: 280px !important;
+    flex: 0 0 auto !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    align-self: stretch !important;
 }
 .compare-controls .compare-prompt-count {
-    flex: 1 1 180px !important;
-    max-width: 240px !important;
+    flex: 0 0 auto !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    align-self: stretch !important;
 }
-.compare-controls .compare-models .wrap-inner,
-.compare-controls .compare-models .wrap {
+.compare-controls .compare-shuffle {
+    flex: 0 0 auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    align-self: stretch !important;
+}
+.compare-controls .compare-models .wrap,
+.compare-controls .compare-models .wrap-inner {
     min-height: 40px !important;
-    height: 40px !important;
+    height: auto !important;
+    overflow: hidden !important;
     border: 1px solid var(--pruna-input-border) !important;
     border-radius: 10px !important;
     background: var(--pruna-input-bg) !important;
     box-shadow: none !important;
 }
+.compare-controls .compare-models .wrap-inner {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: 6px !important;
+    width: 100% !important;
+    padding: 4px 8px !important;
+}
+.compare-controls .compare-models .secondary-wrap {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: 6px !important;
+    flex: 1 1 auto !important;
+    width: auto !important;
+    min-width: 0 !important;
+    height: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+.compare-controls .compare-models .token {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: auto !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    white-space: nowrap !important;
+}
+.compare-controls .compare-models .token:empty {
+    display: none !important;
+}
+.compare-controls .compare-models input {
+    width: auto !important;
+    min-width: 2.5rem !important;
+    flex: 1 1 5rem !important;
+    height: 28px !important;
+    min-height: 28px !important;
+}
+.compare-controls .compare-models .dropdown-arrow,
+.compare-controls .compare-models .icon-wrap {
+    flex: 0 0 auto !important;
+    align-self: center !important;
+    margin-left: auto !important;
+}
 .compare-controls .compare-prompt-count .wrap {
     display: grid !important;
     grid-template-columns: minmax(0, 1fr) auto;
@@ -1112,14 +1553,92 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     background: transparent !important;
     box-shadow: none !important;
 }
-.compare-controls .compare-shuffle,
-.compare-controls .compare-shuffle button {
-    height: 40px !important;
-    min-height: 40px !important;
+.compare-controls .compare-shuffle.block:not(button) {
+    width: 100% !important;
+    max-width: 100% !important;
+    align-self: stretch !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+}
+.compare-controls button.compare-shuffle,
+.compare-controls .compare-shuffle button,
+.compare-controls .compare-shuffle button.primary,
+.compare-controls .compare-shuffle button.secondary {
+    display: inline-flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    height: 44px !important;
+    min-height: 44px !important;
     margin: 0 !important;
-    padding: 0 14px !important;
+    padding: 0 16px !important;
     border-radius: 10px !important;
-    align-self: flex-end !important;
+    align-self: stretch !important;
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    -webkit-tap-highlight-color: transparent !important;
+    background: var(--pruna-accent) !important;
+    border: 1px solid color-mix(in oklab, var(--pruna-accent) 72%, transparent) !important;
+    color: #fff !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.01em !important;
+    box-shadow: inset 0 1px #fff3 !important;
+    outline: none !important;
+}
+.compare-controls button.compare-shuffle:hover,
+.compare-controls button.compare-shuffle:active,
+.compare-controls button.compare-shuffle:focus,
+.compare-controls button.compare-shuffle:focus-visible,
+.compare-controls .compare-shuffle button:hover,
+.compare-controls .compare-shuffle button:active,
+.compare-controls .compare-shuffle button:focus,
+.compare-controls .compare-shuffle button:focus-visible {
+    background: var(--pruna-accent) !important;
+    border-color: color-mix(in oklab, var(--pruna-accent) 72%, transparent) !important;
+    color: #fff !important;
+    outline: none !important;
+    box-shadow: inset 0 1px #fff3 !important;
+    -webkit-tap-highlight-color: transparent !important;
+}
+@media (min-width: 701px) {
+    .compare-controls,
+    .compare-controls.row,
+    .compare-controls.column,
+    .compare-controls .form {
+        flex-direction: row !important;
+        flex-wrap: nowrap !important;
+        align-items: flex-end !important;
+    }
+    .compare-controls .compare-models {
+        flex: 4 1 0 !important;
+        width: auto !important;
+        max-width: none !important;
+        align-self: flex-end !important;
+    }
+    .compare-controls .compare-prompt-count {
+        flex: 1 1 200px !important;
+        width: auto !important;
+        min-width: 180px !important;
+        max-width: 280px !important;
+        align-self: flex-end !important;
+    }
+    .compare-controls .compare-shuffle,
+    .compare-controls .compare-shuffle.block:not(button) {
+        flex: 0 0 auto !important;
+        width: auto !important;
+        max-width: none !important;
+        align-self: flex-end !important;
+    }
+    .compare-controls button.compare-shuffle,
+    .compare-controls .compare-shuffle button {
+        width: auto !important;
+        min-width: 10.5rem !important;
+    }
 }
 .compare-prompt-block {
     margin: 0 0 22px;
@@ -1143,7 +1662,43 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     font-size: 15px;
     line-height: 1.45;
 }
-.compare-row { display: grid; gap: 12px; }
+.compare-gallery,
+.compare-gallery.block,
+.compare-gallery .html-container,
+.compare-gallery .prose {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    overflow-x: hidden !important;
+}
+.compare-row { display: grid; gap: 12px; min-width: 0; width: 100%; }
+.compare-prompt-text { overflow-wrap: anywhere; }
+.pareto-layout,
+.pareto-layout.row,
+.pareto-layout .form {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: flex-start !important;
+    gap: 16px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+}
+.pareto-layout > .pareto-col,
+.pareto-layout .form > .pareto-col {
+    flex: 1 1 320px !important;
+    min-width: 280px !important;
+    max-width: 100% !important;
+}
+.pareto-plot,
+.pareto-plot.block,
+.pareto-plot .plotly,
+.pareto-plot .js-plotly-plot,
+.pareto-plot .plot-container,
+.pareto-plot .svg-container,
+.pareto-plot .main-svg {
+    width: 100% !important;
+    max-width: 100% !important;
+}
 .compare-cell { min-width: 0; }
 .compare-model-label {
     margin-bottom: 6px;
@@ -1255,6 +1810,12 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     text-transform: none !important;
 }
 
+.markdown, .md, .prose,
+.gradio-container .markdown,
+.gradio-container .prose {
+    overflow-wrap: break-word;
+    max-width: 100%;
+}
 .markdown p, .md p, .prose p,
 .gradio-container .markdown p {
     margin: 0 0 0.8rem !important;
@@ -1301,6 +1862,9 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
 /* Card / list titles sit under section headings */
 .home-snap-title,
 .benchmark-card-title {
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
     margin: 0 0 6px !important;
     font-size: 0.95rem !important;
     font-weight: 600 !important;
@@ -1342,14 +1906,22 @@ label, .block-label span {
 a { color: var(--pruna-link); }
 
 /* Gradio form chrome → playground */
-button.primary, .gr-button-primary,
-button.primary:hover, .primary-button {
+button.primary, .gr-button-primary, .primary-button,
+button.primary:hover, button.primary:active, button.primary:focus,
+.gr-button-primary:hover, .gr-button-primary:active {
     background: var(--pruna-accent) !important;
     border: 1px solid color-mix(in oklab, var(--pruna-accent) 72%, transparent) !important;
     color: #fff !important;
     border-radius: 8px !important;
     box-shadow: inset 0 1px #fff3 !important;
     font-weight: 600 !important;
+    outline: none !important;
+    -webkit-tap-highlight-color: transparent !important;
+}
+button.secondary:active, button.secondary:focus,
+.gr-button-secondary:active {
+    outline: none !important;
+    -webkit-tap-highlight-color: transparent !important;
 }
 .block, .gr-group, .form, .panel {
     border-color: var(--pruna-border) !important;

ui.py

@@ -251,9 +251,7 @@ def render_home(benchmarks):
         )
 
     gr.Markdown("## Benchmark snapshots", elem_classes="home-section-title")
-    title_cells = []
-    blurb_cells = []
-    top_cells = []
+    cards = []
     for benchmark in benchmarks:
         data = benchmark["data"]
         score_column = benchmark.get("overall_column")
@@ -268,31 +266,21 @@ def render_home(benchmarks):
             f"<span class='home-score'>{_format_score(score)}</span></li>"
             for idx, (model, score) in enumerate(top, start=1)
         ) or "<li class='home-empty'>No scores yet.</li>"
-        title_cells.append(
-            "<td class='home-snap-cell'>"
+        cards.append(
+            "<article class='home-snap-card'>"
             "<div class='home-snap-title'>"
             f"<span class='home-snap-emoji' aria-hidden='true'>{escape(benchmark.get('emoji', '📊'))}</span>"
             f"<span>{escape(benchmark['title'])}</span>"
-            "</div></td>"
-        )
-        blurb_cells.append(
-            "<td class='home-snap-cell'>"
+            "</div>"
             f"<p class='home-snap-blurb'>{escape(benchmark.get('card_description', ''))}</p>"
-            "</td>"
-        )
-        top_cells.append(
-            "<td class='home-snap-cell'>"
             "<div class='home-snap-top'>"
             f"<div class='home-top-label'>Top 3 by {escape(score_label)}</div>"
             f"<ol class='home-top-list'>{rows_html}</ol>"
-            "</div></td>"
+            "</div>"
+            "</article>"
         )
     gr.HTML(
-        "<table class='home-snapshots-table' role='presentation'>"
-        f"<tr>{''.join(title_cells)}</tr>"
-        f"<tr>{''.join(blurb_cells)}</tr>"
-        f"<tr>{''.join(top_cells)}</tr>"
-        "</table>",
+        f"<div class='home-snapshots-grid'>{''.join(cards)}</div>",
         padding=False,
         elem_classes="home-snapshots-host",
     )
@@ -642,7 +630,7 @@ def render_benchmark_detail(benchmark):
         container=False,
         elem_classes="benchmark-view-menu",
     )
-    with gr.Column(visible=True) as leaderboard_view:
+    with gr.Column(visible=True, min_width=0, elem_classes="benchmark-panel") as leaderboard_view:
         render_leaderboard(
             benchmark["data"],
             benchmark["columns"],
@@ -650,9 +638,9 @@ def render_benchmark_detail(benchmark):
             score_columns=benchmark.get("score_columns"),
             overall_column=benchmark.get("overall_column"),
         )
-    with gr.Column(visible=False) as graphs_view:
+    with gr.Column(visible=False, min_width=0, elem_classes="benchmark-panel") as graphs_view:
         render_benchmark_graphs(benchmark)
-    with gr.Column(visible=False) as compare_view:
+    with gr.Column(visible=False, min_width=0, elem_classes="benchmark-panel") as compare_view:
         render_compare_samples(benchmark)
 
     def switch_view(choice):
@@ -694,7 +682,7 @@ def render_compare_samples(benchmark):
         </p>
         """
     )
-    with gr.Row(elem_classes="compare-controls"):
+    with gr.Row(equal_height=False, elem_classes="compare-controls"):
         model_picker = gr.Dropdown(
             choices=models,
             value=default_models,
@@ -703,7 +691,7 @@ def render_compare_samples(benchmark):
             label="Models",
             container=False,
             scale=4,
-            min_width=280,
+            min_width=220,
             elem_classes="compare-models",
         )
         prompt_count = gr.Slider(
@@ -720,7 +708,8 @@ def render_compare_samples(benchmark):
         )
         shuffle_button = gr.Button(
             "Shuffle prompts",
-            scale=1,
+            variant="primary",
+            scale=0,
             min_width=140,
             elem_classes="compare-shuffle",
         )
@@ -731,7 +720,8 @@ def render_compare_samples(benchmark):
             default_models,
             DEFAULT_COMPARE_PROMPTS,
             seed=0,
-        )
+        ),
+        elem_classes="compare-gallery",
     )
     seed_state = gr.State(0)
 
@@ -854,41 +844,41 @@ def render_benchmarks(benchmarks):
             and **Compare samples**.
             """
         )
-        card_rows = [benchmarks[i : i + 2] for i in range(0, len(benchmarks), 2)]
-        for row in card_rows:
-            with gr.Row(equal_height=True, elem_classes="benchmark-catalogue-row"):
-                for benchmark in row:
-                    with gr.Column(
-                        scale=1,
-                        min_width=280,
-                        elem_classes="benchmark-card-col",
-                    ):
-                        gr.HTML(
-                            f"""
-                            <div class="benchmark-card-body">
-                              <div class="benchmark-card-title">
-                                {escape(benchmark.get("emoji", "📊"))}
-                                {escape(benchmark["title"])}
-                              </div>
-                              <p class="benchmark-card-blurb">
-                                {escape(benchmark.get("card_description", ""))}
-                              </p>
-                            </div>
-                            """
-                        )
-                        open_buttons.append(
-                            (
-                                benchmark["id"],
-                                gr.Button(
-                                    "View benchmark →",
-                                    variant="primary",
-                                    elem_classes="benchmark-open-btn",
-                                ),
-                            )
+        with gr.Row(equal_height=True, elem_classes="benchmark-catalogue-row"):
+            for benchmark in benchmarks:
+                with gr.Column(
+                    scale=1,
+                    min_width=280,
+                    elem_classes="benchmark-card-col",
+                ):
+                    gr.HTML(
+                        f"""
+                        <div class="benchmark-card-body">
+                          <div class="benchmark-card-title">
+                            <span class="benchmark-card-emoji" aria-hidden="true">{escape(benchmark.get("emoji", "📊"))}</span>
+                            <span>{escape(benchmark["title"])}</span>
+                          </div>
+                          <p class="benchmark-card-blurb">
+                            {escape(benchmark.get("card_description", ""))}
+                          </p>
+                        </div>
+                        """,
+                        padding=False,
+                    )
+                    open_buttons.append(
+                        (
+                            benchmark["id"],
+                            gr.Button(
+                                "View benchmark →",
+                                variant="primary",
+                                size="sm",
+                                elem_classes="benchmark-open-btn",
+                            ),
                         )
+                    )
 
     for benchmark in benchmarks:
-        with gr.Column(visible=False) as detail:
+        with gr.Column(visible=False, min_width=0, elem_classes="benchmark-detail") as detail:
             back_button = gr.Button(
                 "← All benchmarks",
                 elem_classes="benchmark-back-btn",
@@ -1129,8 +1119,8 @@ def render_benchmark_graphs(benchmark):
             "</span><br/>"
             "<strong class='pareto-help-emphasis'>Hover a point to see which model it is.</strong>"
         )
-        with gr.Row(equal_height=False):
-            with gr.Column(scale=1, min_width=320):
+        with gr.Row(equal_height=False, elem_classes="pareto-layout"):
+            with gr.Column(scale=1, min_width=320, elem_classes="pareto-col"):
                 gr.Markdown("#### Price vs score")
                 if not price_figures:
                     gr.Markdown("_No price data available._")
@@ -1141,7 +1131,7 @@ def render_benchmark_graphs(benchmark):
                         show_label=False,
                         elem_classes="pareto-plot",
                     )
-            with gr.Column(scale=1, min_width=320):
+            with gr.Column(scale=1, min_width=320, elem_classes="pareto-col"):
                 gr.Markdown("#### Min generation time vs score")
                 if not time_figures:
                     gr.Markdown("_No min generation time data available._")
@@ -1155,11 +1145,11 @@ def render_benchmark_graphs(benchmark):
 
 
 def render_about():
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown(ABOUT_OVERVIEW_CONTENT)
-        with gr.Column():
-            gr.Markdown(ABOUT_DETAILS_CONTENT)
+    with gr.Row(elem_classes="about-layout", equal_height=False):
+        with gr.Column(scale=1, min_width=340, elem_classes="about-col"):
+            gr.Markdown(ABOUT_OVERVIEW_CONTENT, elem_classes="about-copy")
+        with gr.Column(scale=1, min_width=340, elem_classes="about-col"):
+            gr.Markdown(ABOUT_DETAILS_CONTENT, elem_classes="about-copy")
 
 
 def render_footer():