Fix uncontained CSS float on book page causing catalog download tools to overflow content boundaries

[RsbhThakur]

Problem

On the book edition/view pages, the "Download catalog record" bar (RDF / JSON / OPDS | Wikipedia citation) overflows its parent container #contentBody. This occurs because the bar is styled using .pageHistory__tools which has float: right, but the parent container does not clear the floated element. This causes the element to hang outside the visual border of the white container area, bleeding into the gray background/margin area.

We have explored and verified two clean approaches to resolve this, both of which render beautifully and are fully responsive:

Approach 1: Clearfix with Semantic Margin-Bottom offset (Recommended)

Since the lib/exports template is floated, we can clear the float in the parent template openlibrary/templates/type/edition/view.html immediately after rendering the tools. To prevent the clearfix from creating too much empty space due to container padding, we use a negative margin calculated semantically from the container's padding custom variable:

$:render_template("lib/exports", page)
<div class="clearfix" style="margin-bottom: calc(-1 * var(--contentBody-padding));"></div>

Approach 2: Redefining Floated Tool Padding

Alternatively, we can adjust the top padding of the floated tools class .pageHistory__tools inside static/css/components/page-history.css from 8px to 3px. This shifts the element slightly up so that it aligns nicely within the parent container's padding:

.pageHistory__tools {
  font-size: 0.7em;
  float: right;
  padding-top: 3px;
}

Both of these approaches successfully contain the element within the white boundaries of #contentBody across all standard viewport widths (desktop, tablet, and mobile), avoiding any container overflow or text-clipping.

• Relevant URL: Any book/edition page, e.g. https://openlibrary.org/books/OL24620876M/Responsive_Web_Design
• Screenshots:

Reproducing the bug

1. Go to any book/edition detail page (e.g., https://openlibrary.org/books/OL24620876M/Responsive_Web_Design).
2. Scroll to the very bottom of the book's details container.
3. Observe the "Download catalog record: RDF / JSON / OPDS | Wikipedia citation" line.

• Expected behavior: The download tools bar should be cleanly contained within the main content body's background and padding.
• Actual behavior: The text overflows past the bottom padding of the content body container, hanging outside the boundary line.

Context

• Browser (Chrome, Safari, Firefox, etc): Chrome
• OS (Windows, Mac, etc): Windows
• Logged in (Y/N): Y
• Environment (prod, dev, local): all

Breakdown

Implementation Details (for maintainers)

Requirements Checklist

• [ ]

Related files

Stakeholders

---

Instructions for Contributors

• Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.

[openlibrary-bot]

Thank you @RsbhThakur for submitting this issue!

⚠️ Contributors, this issue will be ready to work on once:

• Triage — maintainers will add Priority: * and Lead: @* to replace Needs: Triage and Needs: Lead

---

Context (research notes)

• Confirmed: .pageHistory__tools (static/css/components/page-history.css:16-20) is float: right; padding-top: 8px; with no clearing element anywhere it's used — matches the root cause described in this issue.
• The floated span comes from openlibrary/templates/lib/exports.html:11, which is rendered uncleared not just from type/edition/view.html:564 (as this issue's proposed fix targets) but also from type/work/view.html:564 and type/author/view.html:224. The same overflow is likely reproducible on work and author pages too, not just edition pages.
• --contentBody-padding (referenced in Approach 1's diff) is confirmed to exist at static/css/layout/index.css:2, applied to #contentBody/.contentBody at line 53.
• No prior issue or PR addressing this was found via search.

Issue Assessment

Open questions

• Approach 1 (clearfix) structurally clears the float, so container height correctly includes it regardless of viewport/text-wrap. Approach 2 (padding tweak) only nudges the float's position by 5px without clearing it — does it hold up if the tools text wraps to two lines on narrow mobile widths, or does it just mask the symptom at the tested widths?
• Should the fix be scoped to type/edition/view.html only (as proposed), or also applied to type/work/view.html and type/author/view.html which render the same uncleared partial? A fix inside lib/exports.html itself would cover all three without triplicating the clearfix.

Action items

• Confirm which approach (or a shared fix inside lib/exports.html) should be implemented, and whether work/author pages are in scope.
• Fill in the "Requirements Checklist" / "Related files" / "Stakeholders" sections in the Breakdown (currently empty placeholders).

Note: this is a well-scoped, low-effort CSS fix with two concrete approaches already prototyped — once triaged, this looks like a strong Good First Issue candidate.

---

Full triage checklist (maintainers / Richy)

• Triage — correct labels applied or removed (Needs: Breakdown removed — sufficient breakdown already provided)
• Problem / opportunity — problem is clear, audience identified, actionable
• Scope — issue is well-scoped; does not try to do too many things
• Justification — reasoning and impact stated; sufficient for leads to prioritize
• Success & testing criteria — defines what "done" looks like, verifiable by a contributor
• Proposal & breakdown — concrete plan present; checklist actionable for a contributor
• If bug: environment & repro steps — browser, version, local vs prod; steps to reproduce
• Risks, concerns, open questions — identified and surfaced (any security or privacy implications?)
• Richy context — relevant code, commits, PRs reviewed; no duplicate issue found
• References — screenshots, designs, docs, and links present where needed

Note

This comment was automatically generated by Richy, via PAM, Open Library's Project AI Manager, on behalf of @mekarpeles. Richy is designed to provide status visibility, perform basic project management functions and relevant codebase research, and provide actionable feedback so contributors aren't left waiting.

[RsbhThakur]

I have opened PR #13091 to resolve this issue.

Following the suggestion from PAM, I implemented the structural clearfix globally inside lib/exports.html (Approach 1) rather than template-by-template. This resolves the float overflow on all Edition, Work, and Author pages while keeping the bottom margins consistent.

Any feedback or suggestions from maintainers and other contributors on this implementation are highly welcomed!