Fix sidebar parameter action alignment and PDF report print rendering by EddW1219 · Pull Request #48 · EpiForeSITE/epicc

EddW1219 · 2026-05-26T11:09:27Z

Fix Reset/Save parameter button alignment

Aligns Reset Parameters and Save Parameters buttons consistently in the sidebar.
Fix PDF print layout (report view).

Improves print-only chart/text flow to prevent overlap in exported PDF.
Consolidates print CSS behavior for chart spacing and heading separation.
Fixes formula rendering in PDF by preserving visual math output and suppressing assistive MathML in print.

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR addresses UI layout issues in the sidebar parameter actions and improves PDF/print rendering for the report view to prevent chart/text overlap and math rendering artifacts.

Changes:

Adds scoped CSS to align “Reset Parameters” and “Save Parameters” controls consistently in the sidebar action row.
Consolidates print-only CSS rules to improve chart spacing, heading separation, and formula rendering in exported PDFs.
Adjusts a report model snippet to wrap a LaTeX block with centered HTML.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
src/epicc/main.py	Adds CSS for action-row alignment and print/PDF rendering; refactors parameter action buttons into a keyed container for styling.
src/epicc/model/models/tb_isolation.yaml	Wraps a display-math block in a centered HTML div and tweaks the LaTeX test string.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

olivia-banks · 2026-06-08T23:06:04Z

+            button_col2.button(
+                "Save Parameters",
+                disabled=True,
+                width="stretch",
+                help="Fix parameter errors first",
+            )


@EddW1219, please resolve this if this is a non-issue with our post-August 2025 version of Streamlit. Make sure to check this against the version of Stlite we're running as well. Thanks.

olivia-banks · 2026-06-08T23:03:45Z

+st.markdown(
+    """
+    <style>
+    /* Action row wrapper */
+    .st-key-param-actions-row [data-testid="stHorizontalBlock"] {
+        align-items: flex-start !important;
+    }
+
+    /* Normalize column internal spacing */
+    .st-key-param-actions-row [data-testid="column"] > div {
+        padding-top: 0 !important;
+    }
+    .st-key-param-actions-row [data-testid="stElementContainer"] {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+
+    /* Make trigger controls fill width and remove extra top offset */
+    .st-key-param-actions-row [data-testid="stButton"],
+    .st-key-param-actions-row [data-testid="stPopover"] {
+        width: 100%;
+        margin-top: 0 !important;
+        padding-top: 0 !important;
+    }
+    .st-key-param-actions-row [data-testid="stButton"] > button,
+    .st-key-param-actions-row [data-testid="stPopover"] > button {
+        width: 100%;
+    }
+
+    /* Report spacing: keep headings away from charts */
+    .st-key-results-report [data-testid="stPlotlyChart"],
+    .st-key-results-report [data-testid="stVegaLiteChart"],
+    .st-key-results-report [data-testid="stPyplot"] {
+        margin-bottom: 2rem !important;
+    }
+
+    .st-key-results-report [data-testid="stMarkdownContainer"] h1,
+    .st-key-results-report [data-testid="stMarkdownContainer"] h2,
+    .st-key-results-report [data-testid="stMarkdownContainer"] h3 {
+        margin-top: 1.25rem !important;
+    }
+
+    /* -------- Print/PDF display fixes only (SINGLE CONSOLIDATED BLOCK) -------- */
+    @media print {
+        /* Scope strictly to report area */
+        .st-key-results-report {
+            overflow: visible !important;
+        }
+
+        /* 1) Keep chart block in flow + reserve vertical space below chart */
+        .st-key-results-report [data-testid="stPlotlyChart"],
+        .st-key-results-report [data-testid="stVegaLiteChart"],
+        .st-key-results-report [data-testid="stPyplot"] {
+            display: block !important;
+            position: static !important;
+            clear: both !important;
+            overflow: visible !important;
+            break-inside: avoid !important;
+            page-break-inside: avoid !important;
+            margin: 0 0 2.8rem 0 !important;
+            padding-bottom: 1.2rem !important;
+        }
+
+        /* Prevent Plotly print-height collapse */
+        .st-key-results-report [data-testid="stPlotlyChart"] .js-plotly-plot {
+            min-height: 520px !important;
+        }
+
+        /* 2) Ensure headings/text start after chart and have breathing room */
+        .st-key-results-report h1,
+        .st-key-results-report h2,
+        .st-key-results-report h3,
+        .st-key-results-report h4,
+        .st-key-results-report p,
+        .st-key-results-report [data-testid="stMarkdownContainer"] {
+            clear: both !important;
+            position: static !important;
+            z-index: auto !important;
+            margin-top: 1.5rem !important;
+        }
+
+        .st-key-results-report [data-testid="stMarkdownContainer"] h1,
+        .st-key-results-report [data-testid="stMarkdownContainer"] h2,
+        .st-key-results-report [data-testid="stMarkdownContainer"] h3 {
+            margin-top: 1.5rem !important;
+            clear: both !important;
+        }
+
+        /* 3) Formula print fix: show only visual layer, hide assistive MathML */
+        .st-key-results-report .katex,
+        .st-key-results-report .katex-display,
+        .st-key-results-report mjx-container,
+        .st-key-results-report .MathJax {
+            visibility: visible !important;
+            opacity: 1 !important;
+        }
+
+        .st-key-results-report .katex .katex-mathml,
+        .st-key-results-report mjx-assistive-mml {
+            display: none !important;
+        }
+    }
+    </style>
+    """,
+    unsafe_allow_html=True,
+)


I'm in agreement with Copilot here, @EddW1219. Take a look at how we handle sidebar.css in src/epicc/web/ and src/epicc/ui/styles.py.

olivia-banks · 2026-06-08T23:05:11Z

+      <div style="text-align: center;">
+
      $$
-      \LaTeX \text{ test.}
+      \text{LaTeX test.}
      $$

+      </div>


@EddW1219 Please remove the text-align div here. If this results in a bad look, the style should be globally applied in a css file instead of requiring a div for every $$ block.

olivia-banks · 2026-06-08T23:07:04Z

@EddW1219, looks good to merge after you resolve the outstanding conversations :)

- move injected inline CSS from app wiring into shared stylesheet - remove inline centered div wrapper around display math in tb_isolation model - update report chart rendering to use container width and theme-aware Plotly text/axis styling - refine PDF/print spacing, formula rendering, and chart contrast behavior

olivia-banks · 2026-06-24T21:56:45Z

@EddW1219 Just a comment; it looks like you're including JS inline in st.html. In my experience, this is iffy, even with allow_unsafe_javascript; have you tested this as a working solution? It worked only about half the time in my case.

EddW1219 · 2026-06-29T11:41:13Z

@EddW1219 Just a comment; it looks like you're including JS inline in st.html. In my experience, this is iffy, even with allow_unsafe_javascript; have you tested this as a working solution? It worked only about half the time in my case.

Just fix that part:)

olivia-banks · 2026-07-08T22:39:17Z

@EddW1219 Just a comment; it looks like you're including JS inline in st.html. In my experience, this is iffy, even with allow_unsafe_javascript; have you tested this as a working solution? It worked only about half the time in my case.

Just fix that part:)

As an FYI, if the stylistic changes that code produced were beneficial, there's a way to include the Javascript and get around their sanitizer. We do this in another place in the codebase which could be helpful, if extremely hacky:

with importlib.resources.files("epicc").joinpath("js/print_results.js").open("rb") as f:
    js = f.read().decode()
    js64 = base64.b64encode(js.encode()).decode()

# ...
looks_malicious = f"eval(atob('{js64}'))"
# ...

st.html(
    f"<script>{looks_malicious}</script>",
    unsafe_allow_javascript=True,
)

olivia-banks · 2026-07-15T16:36:05Z

Hi @EddW1219, this looks great to me. Would you mind resolving the extant conversations, and if there are none left it looks good to merge to me :)

EddW1219 added 2 commits May 4, 2026 11:37

Fix Reset/Save parameter button alignment

156324b

Fix PDF print layout: button alignment, chart spacing, formula rendering

6a8fff2

EddW1219 self-assigned this May 26, 2026

Copilot AI review requested due to automatic review settings May 26, 2026 11:09

Copilot AI reviewed May 26, 2026

View reviewed changes

Copilot started reviewing on behalf of EddW1219 May 26, 2026 12:17 View session

Replace invalid button width arg with use_container_width

9fd1671

Copilot started work on behalf of EddW1219 May 27, 2026 03:13 View session

Copilot finished work on behalf of EddW1219 May 27, 2026 03:16

chore(pr): remove inline JS patch and keep review-scope fixes

36b6b31

EddW1219 closed this Jun 29, 2026

EddW1219 reopened this Jun 29, 2026

olivia-banks added the bug Something isn't working label Jul 10, 2026

olivia-banks changed the title ~~Fix sidebar parameter action alignment and PDF report print rendering Issue#38~~ Fix sidebar parameter action alignment and PDF report print rendering Jul 10, 2026

fix: bypass Streamlit sanitizer to resolve unreliable print JS execution

f2606b6

olivia-banks approved these changes Jul 15, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix sidebar parameter action alignment and PDF report print rendering#48

Fix sidebar parameter action alignment and PDF report print rendering#48
EddW1219 wants to merge 6 commits into
mainfrom
edward_branch_2

EddW1219 commented May 26, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

olivia-banks Jun 8, 2026

Uh oh!

olivia-banks Jun 8, 2026

Uh oh!

olivia-banks Jun 8, 2026 •

edited

Loading

Uh oh!

olivia-banks commented Jun 8, 2026

Uh oh!

olivia-banks commented Jun 24, 2026

Uh oh!

EddW1219 commented Jun 29, 2026

Uh oh!

olivia-banks commented Jul 8, 2026

Uh oh!

olivia-banks commented Jul 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

EddW1219 commented May 26, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

olivia-banks Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

olivia-banks Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

olivia-banks Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

olivia-banks commented Jun 8, 2026

Uh oh!

olivia-banks commented Jun 24, 2026

Uh oh!

EddW1219 commented Jun 29, 2026

Uh oh!

olivia-banks commented Jul 8, 2026

Uh oh!

olivia-banks commented Jul 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

olivia-banks Jun 8, 2026 •

edited

Loading