Create dvnc_ui_layout.py

dvnc_ai_v2_hf/dvnc_ui_layout.py

@@ -0,0 +1,209 @@
+from textwrap import dedent
+
+def get_dvnc_layout_css() -> str:
+    return dedent(r'''
+    :root {
+      --dvnc-page-max: min(1880px, calc(100vw - 32px));
+      --dvnc-content-max: min(1840px, calc(100vw - 48px));
+      --dvnc-route-gap: 22px;
+      --dvnc-summary-col: clamp(280px, 18vw, 360px);
+    }
+
+    html, body, .gradio-container {
+      overflow-x: hidden !important;
+    }
+
+    .gradio-container {
+      max-width: var(--dvnc-page-max) !important;
+      width: 100% !important;
+      margin: 0 auto !important;
+      padding: 16px !important;
+    }
+
+    #dvnc-shell {
+      width: 100% !important;
+      max-width: var(--dvnc-content-max) !important;
+      margin: 0 auto !important;
+      padding: 20px 20px 28px !important;
+      box-sizing: border-box !important;
+    }
+
+    #dvnc-shell > .gradio-row,
+    #dvnc-shell .gradio-row {
+      width: 100% !important;
+      max-width: 100% !important;
+      flex-wrap: nowrap !important;
+      align-items: stretch !important;
+    }
+
+    #dvnc-shell .gradio-column,
+    #dvnc-shell .gr-block,
+    #dvnc-shell .gr-box,
+    #dvnc-shell .gr-panel {
+      min-width: 0 !important;
+    }
+
+    #dvnc-shell .gradio-column.scale-0,
+    #dvnc-shell .gradio-column.scale-1,
+    #dvnc-shell .gradio-column.scale-2,
+    #dvnc-shell .gradio-column.scale-3,
+    #dvnc-shell .gradio-column.scale-4,
+    #dvnc-shell .gradio-column.scale-5,
+    #dvnc-shell .gradio-column.scale-6,
+    #dvnc-shell .gradio-column.scale-7,
+    #dvnc-shell .gradio-column.scale-8,
+    #dvnc-shell .gradio-column.scale-9,
+    #dvnc-shell .gradio-column.scale-10,
+    #dvnc-shell [class*='scale-'] {
+      min-width: 0 !important;
+    }
+
+    #dvnc-shell .stretch,
+    #dvnc-shell [style*='flex-grow'] {
+      min-width: 0 !important;
+    }
+
+    #dvnc-shell .prose,
+    #dvnc-shell .markdown,
+    #dvnc-shell .gr-markdown,
+    #dvnc-shell .gr-html,
+    #dvnc-shell .gradio-html {
+      max-width: 100% !important;
+      width: 100% !important;
+    }
+
+    #dvnc-shell .gr-html > div,
+    #dvnc-shell .gradio-html > div,
+    #dvnc-shell .gr-markdown > div {
+      max-width: 100% !important;
+    }
+
+    #dvnc-shell #dvnc-agent-route-cards,
+    #dvnc-shell #dvnc-agent-route-cards.dvnc-agent-route-shell {
+      width: 100% !important;
+      max-width: none !important;
+      margin: 0 !important;
+      padding-inline: 0 !important;
+      box-sizing: border-box !important;
+    }
+
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-agent-route-grid {
+      width: 100% !important;
+      max-width: none !important;
+    }
+
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-agent-row {
+      grid-template-columns: minmax(260px, var(--dvnc-summary-col)) minmax(0, 1fr) !important;
+      gap: var(--dvnc-route-gap) !important;
+      width: 100% !important;
+      max-width: 100% !important;
+      align-items: stretch !important;
+    }
+
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-agent-summary-panel {
+      min-height: 100% !important;
+      height: 100% !important;
+      align-self: stretch !important;
+      position: sticky;
+      top: 18px;
+    }
+
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-agent-cards {
+      display: grid !important;
+      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+      gap: 16px !important;
+      width: 100% !important;
+      max-width: 100% !important;
+      align-items: stretch !important;
+      justify-content: stretch !important;
+    }
+
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-route-card,
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-route-card-inner,
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-route-face {
+      width: 100% !important;
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-route-face {
+      min-height: 320px !important;
+    }
+
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-route-top,
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-route-meta,
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-route-actions {
+      gap: 10px !important;
+    }
+
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-route-badge,
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-route-score,
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-route-face h4,
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-route-face p,
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-route-btn,
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-agent-copy p,
+    #dvnc-shell #dvnc-agent-route-cards .dvnc-agent-topline span {
+      white-space: normal !important;
+      overflow-wrap: anywhere !important;
+      word-break: break-word !important;
+    }
+
+    #dvnc-shell .panel,
+    #dvnc-shell .chat-panel,
+    #dvnc-shell .querybox,
+    #dvnc-shell .gr-block,
+    #dvnc-shell .gr-box {
+      width: 100% !important;
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+
+    @media (max-width: 1560px) {
+      #dvnc-shell #dvnc-agent-route-cards .dvnc-agent-row {
+        grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) !important;
+      }
+    }
+
+    @media (max-width: 1360px) {
+      #dvnc-shell #dvnc-agent-route-cards .dvnc-agent-cards {
+        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+      }
+    }
+
+    @media (max-width: 1080px) {
+      #dvnc-shell > .gradio-row,
+      #dvnc-shell .gradio-row {
+        flex-wrap: wrap !important;
+      }
+
+      #dvnc-shell #dvnc-agent-route-cards .dvnc-agent-row {
+        grid-template-columns: 1fr !important;
+      }
+
+      #dvnc-shell #dvnc-agent-route-cards .dvnc-agent-summary-panel {
+        position: static;
+      }
+
+      #dvnc-shell #dvnc-agent-route-cards .dvnc-agent-cards {
+        grid-template-columns: 1fr !important;
+      }
+    }
+    ''')
+
+
+def get_dvnc_layout_readme() -> str:
+    return dedent('''
+    # DVNC UI layout patch
+
+    Import this file from `dvnc_ai_v2_hf/app.py` and append `get_dvnc_layout_css()` to your main CSS string.
+
+    Example:
+
+    ```python
+    from dvnc_ai_v2_hf.dvnc_ui_layout import get_dvnc_layout_css
+
+    CSS = BASE_CSS + "\\n" + get_dvnc_layout_css()
+    ```
+
+    This patch fixes the common Gradio/HTML layout issue where the custom route-card HTML remains constrained by an inner left-aligned container instead of expanding to full available width.
+    ''')