Skip to content

Conversation

Lasseignejk
Copy link
Contributor

Closes #10620

Fixes an issue on mobile screens where the ID Numbers section's table breaks and causes a long horizontal scroll.

Technical

  • Changed from <table>, <th>, and <tr> elements to <div>s to enable more flexible styling using CSS grid.
  • Included role tags to make more accessible for screen readers. Testing a screen reader on Chrome confirmed that when entering the table, it is able to identify the number of rows and columns, as well as which cell the patron is currently in.
  • Added a breakpoint so the table will switch to a more vertical layout on smaller screens.

Testing

Select a book and press the 'Edit' button, then scroll down to the ID Numbers section. Opening up the Dev Tools in Chrome and selecting a mobile layout will show the updated table.

Screenshot

ID Numbers Comparison

Stakeholders

@cdrini

@codecov-commenter
Copy link

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 17.80%. Comparing base (e027195) to head (2a9eb10).
⚠️ Report is 520 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master   #11244      +/-   ##
==========================================
+ Coverage   17.14%   17.80%   +0.66%     
==========================================
  Files          91       93       +2     
  Lines        4981     5110     +129     
  Branches      867      890      +23     
==========================================
+ Hits          854      910      +56     
- Misses       3588     3650      +62     
- Partials      539      550      +11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions github-actions bot added the Needs: Response Issues which require feedback from lead label Sep 9, 2025
@cdrini cdrini force-pushed the 10620/fix/make-identifiers-input-mobile-friendly branch from 25dcd54 to 52ee383 Compare September 26, 2025 15:14
Copy link
Collaborator

@cdrini cdrini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice lgtm @Lasseignejk ! One small bug with the popular identifiers appearing twice ; I imagine a rebase bug, fixed that. Also noticed the existing code duplicated the template for the value if housing a list of values, so DRY'd that up.

Tested:

  • Adding/removing identifiers on book and saving
  • Adding/removing identifiers on author
  • Cannot add IA if not authorized

@cdrini cdrini merged commit 73e6d31 into internetarchive:master Sep 26, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Needs: Response Issues which require feedback from lead

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make identifiers input mobile friendly

3 participants