Skip to content

Fix layout hierarchy of ReturnForm button and expiry date #12911

@Sadashii

Description

@Sadashii

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:

  1. The return button is pushed too far away from the loan expiration date (local-date-time) below it.
  2. The expiration date has no bottom margin, making it sit too close to the subsequent elements in the action panel.
  3. In loans.html, the separate expires column is left completely blank for active, downloaded book reader loans.

Reproducing the bug

  1. Go to any book page on dev/local environment and borrow a book.
  2. Look at the right-hand panel where the "Return book" button and the "Expires [date]" text are displayed.
  3. Note the spacing: the Return button is spaced far from the expiry date, while the expiry date hugs the next element/options.
  4. Go to /account/loans and check the loan history/current loans table.
  5. 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

  • Restructure ReturnForm.html to wrap FormatExpiry inside the form
  • Consolidate expires and actions columns in loans.html
  • Add general and panel-specific CSS overrides for .return-form and .return-form .cta-btn
  • Verify Stylelint rules pass on all modified CSS files

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions