Skip to content

refactor: Use css part for ol-read-more button styling#11817

Open
lokesh wants to merge 4 commits intointernetarchive:masterfrom
lokesh:refactor/read-more-css-part
Open

refactor: Use css part for ol-read-more button styling#11817
lokesh wants to merge 4 commits intointernetarchive:masterfrom
lokesh:refactor/read-more-css-part

Conversation

@lokesh
Copy link
Collaborator

@lokesh lokesh commented Feb 4, 2026

Replaces the clunky padding-left property with a CSS ::part selector for styling.

Technical

  • Removed the padding-left property from the OLReadMore web component
  • Added part="toggle-btn" attribute to expose the toggle button for external CSS styling via ::part() selector

Testing

Confirm that visual rendering is unchanged on Book page and Search Results w/Table of Contents that span more than 3 lines.

Screenshot

flatland_-_search_🔊

Stakeholders

@cdrini

…update styles

- Removed the padding-left property from the OLReadMore component to simplify its API.
- Updated the component's internal logic and styles accordingly.
- Adjusted usage in SearchResultsWork.html to reflect the removal of the padding-left attribute.
- Enhanced CSS to apply padding-left through the toggle button part for better responsiveness.
@lokesh lokesh requested a review from cdrini February 4, 2026 22:53
…More component

- Updated padding for the toggle button in the OLReadMore component for better alignment.
- Added a media query to align the toggle button text to the left on larger screens, enhancing responsiveness.
- Adjusted padding for the toggle button to enhance visual alignment.
- Updated media query to reset padding-left for better responsiveness on larger screens.
@lokesh lokesh added the Theme: Design Issues related to UI design, branding, etc. [managed] label Feb 6, 2026
@lokesh lokesh force-pushed the refactor/read-more-css-part branch from 0f2962e to 8dc8069 Compare February 6, 2026 20:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Theme: Design Issues related to UI design, branding, etc. [managed]

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant