Skip to content

Conversation

@mayagbarnes
Copy link
Collaborator

@mayagbarnes mayagbarnes commented Dec 22, 2025

Describe your changes

Fix the styling in st.html for list indentation

Before:
Screenshot 2025-12-22 at 11 27 56 a m

After:
Screenshot 2025-12-22 at 11 26 53 a m

GitHub Issue Link (if applicable)

Closes #13426

Testing Plan

  • JS Unit Tests: ✅ Added
  • E2E Tests: ✅ Added

@mayagbarnes mayagbarnes added security-assessment-completed Security assessment has been completed for PR change:bugfix PR contains bug fix implementation impact:users PR changes affect end users labels Dec 22, 2025
@snyk-io
Copy link
Contributor

snyk-io bot commented Dec 22, 2025

Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues
Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 22, 2025

✅ PR preview is ready!

Name Link
📦 Wheel file https://core-previews.s3-us-west-2.amazonaws.com/pr-13437/streamlit-1.52.2-py3-none-any.whl
📦 @streamlit/component-v2-lib Download from artifacts
🕹️ Preview app pr-13437.streamlit.app (☁️ Deploy here if not accessible)

@sfc-gh-mbarnes sfc-gh-mbarnes marked this pull request as ready for review December 22, 2025 19:52
Copilot AI review requested due to automatic review settings December 22, 2025 19:52
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes a styling issue in the st.html component where nested lists (ul/ol/dl elements) were not displaying proper indentation due to global CSS resets. The fix restores appropriate padding to list elements within st.html components.

Key Changes

  • Added CSS styling to restore paddingLeft for list elements using theme spacing (threeXL = 32px)
  • Added unit test to verify nested list DOM structure
  • Added E2E test with snapshot comparison to verify visual indentation

Reviewed changes

Copilot reviewed 4 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
frontend/lib/src/components/elements/Html/styled-components.ts Added padding restoration for ul/ol/dl elements to fix nested list indentation
frontend/lib/src/components/elements/Html/Html.test.tsx Added unit test to verify nested lists render correctly in the DOM
e2e_playwright/st_html.py Added test case with nested list HTML structure
e2e_playwright/st_html_test.py Added E2E test to verify list indentation with snapshot testing and updated element counts
e2e_playwright/__snapshots__/linux/st_html_test/st_html-nested_lists[webkit].png Added visual regression snapshot for WebKit browser
e2e_playwright/__snapshots__/linux/st_html_test/st_html-nested_lists[firefox].png Added visual regression snapshot for Firefox browser
e2e_playwright/__snapshots__/linux/st_html_test/st_html-nested_lists[chromium].png Added visual regression snapshot for Chromium browser

@mayagbarnes mayagbarnes merged commit 0f1276b into develop Dec 22, 2025
43 checks passed
@mayagbarnes mayagbarnes deleted the fix-13426 branch December 22, 2025 23:25
@chrispy-snps
Copy link

This was amazingly fast - thank you @mayagbarnes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

change:bugfix PR contains bug fix implementation impact:users PR changes affect end users security-assessment-completed Security assessment has been completed for PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Nested lists in st.html() lose their indenting

4 participants