Skip to content

Overflow issue in edition editor form on mobile/tablet view #11431

@akramcodez

Description

@akramcodez

Problem:

The edition editor form content overflows outside its container on smaller screen sizes (mobile/tablet), making parts of the form inaccessible or cut off.

Image

Reproducing the bug

Reproducing the bug

  • Go to edition edit page (e.g., /books/OL123456M/edit)
  • Open Chrome DevTools and set device to "Samsung Galaxy S8+" (360x740) or similar mobile device
  • Observe the form sections (Identifiers, Classifications, Physical Object)
  • Notice content overflowing or being cut off on the right side

Current Behavior:

  • Form elements extend beyond the visible viewport
  • Content appears cut off on the right side
  • Horizontal scrolling may be required or content is simply hidden
  • Affects user experience on Samsung Galaxy S8+ and similar devices (360x740 viewport)

Expected Behavior:

  • Form should be fully responsive and fit within viewport
  • All form fields should be visible and accessible
  • No horizontal overflow
  • Content should stack or resize appropriately on smaller screens

Context

  • Browser: Chrome
  • OS: Windows
  • Logged in (Y/N): Y
  • Environment (prod, dev, local): prod

Breakdown

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs: BreakdownThis big issue needs a checklist or subissues to describe a breakdown of work. [managed]Needs: LeadNeeds: ResponseIssues which require feedback from leadNeeds: TriageThis issue needs triage. The team needs to decide who should own it, what to do, by when. [managed]Type: BugSomething isn't working. [managed]

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions