Problem
In the ReturnForm macro, the main CTA button (.cta-btn) has a default margin-bottom: 10px on the book details page. This creates a visual mismatch:
- The return button is pushed too far away from the loan expiration date (
local-date-time) below it.
- The expiration date has no bottom margin, making it sit too close to the subsequent elements in the action panel.
- In
loans.html, the separate expires column is left completely blank for active, downloaded book reader loans.
Reproducing the bug
- Go to any book page on dev/local environment and borrow a book.
- Look at the right-hand panel where the "Return book" button and the "Expires [date]" text are displayed.
- Note the spacing: the Return button is spaced far from the expiry date, while the expiry date hugs the next element/options.
- Go to
/account/loans and check the loan history/current loans table.
- Note the empty
expires column next to the actions column.
- Expected behavior:
- The Return button and the expiry date should be closely grouped together (e.g. 4px gap), while the entire Return Form block is separated from subsequent elements by a standard 10px margin.
- The
/account/loans page should not have a blank/empty column.
- Actual behavior:
- The Return button has a 10px bottom margin, making it look disconnected from the date, and the date is squished against the next item.
- The
/account/loans page displays a blank expires column for downloaded books.
Context
- Browser: All
- OS: All
- Logged in: Yes
- Environment: dev, local
Breakdown
Implementation Details (for maintainers)
- Wrap
FormatExpiry(expiry) inside the <form class="return-form"> tag in ReturnForm.html.
- Consolidate the
expires and actions columns in loans.html into a single actions column, handling both Book Reader and Adobe Digital Editions states correctly.
- Add override CSS styles in
read-panel.css and buttonCta.css for .return-form to have a margin-bottom: 10px and .return-form .cta-btn to have margin-bottom: var(--spacing-stack-xs) (4px).
Requirements Checklist
Related files
- openlibrary/macros/ReturnForm.html
- openlibrary/templates/account/loans.html
- static/css/components/buttonCta.css
- static/css/components/read-panel.css
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.
Problem
In the
ReturnFormmacro, the main CTA button (.cta-btn) has a defaultmargin-bottom: 10pxon the book details page. This creates a visual mismatch:local-date-time) below it.loans.html, the separateexpirescolumn is left completely blank for active, downloaded book reader loans.Reproducing the bug
/account/loansand check the loan history/current loans table.expirescolumn next to the actions column./account/loanspage should not have a blank/empty column./account/loanspage displays a blankexpirescolumn for downloaded books.Context
Breakdown
Implementation Details (for maintainers)
FormatExpiry(expiry)inside the<form class="return-form">tag inReturnForm.html.expiresandactionscolumns inloans.htmlinto a singleactionscolumn, handling both Book Reader and Adobe Digital Editions states correctly.read-panel.cssandbuttonCta.cssfor.return-formto have amargin-bottom: 10pxand.return-form .cta-btnto havemargin-bottom: var(--spacing-stack-xs)(4px).Requirements Checklist
.return-formand.return-form .cta-btnRelated files
Stakeholders
Instructions for Contributors