Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Buggy UI for /merges in mobile #10337

Open
Spaarsh opened this issue Jan 14, 2025 · 8 comments
Open

Buggy UI for /merges in mobile #10337

Spaarsh opened this issue Jan 14, 2025 · 8 comments
Labels
Lead: @jimchamp Issues overseen by Jim (Front-end Lead, BookNotes) [managed] Needs: Breakdown This big issue needs a checklist or subissues to describe a breakdown of work. [managed] Needs: Community Discussion This issue is to be brought up in the next community call. [managed] Needs: Response Issues which require feedback from lead Priority: 3 Issues that we can consider at our leisure. [managed] Type: Bug Something isn't working. [managed]

Comments

@Spaarsh
Copy link
Contributor

Spaarsh commented Jan 14, 2025

Problem

When the reviews icon is clicked upon and the reviews are dropped down, the icon itself blocks the right-most content. Attempts to scroll horizontally, the icon itself moves with the content, essentially obfuscating the content to no avail.

Buggy_merge_UI_for_mobile.mp4

Reproducing the bug

  1. Go to https://openlibrary.org/merges
  2. Do ...
  • Expected behavior: The comments/reviews are visible properly.
  • Actual behavior: The comments/reviews are obfuscated behind an icon.

Context

  • Browser (Chrome, Safari, Firefox, etc): Chrome
  • OS (Windows, Mac, etc): Android
  • Logged in (Y/N): N
  • 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.
@Spaarsh Spaarsh added Needs: Breakdown This big issue needs a checklist or subissues to describe a breakdown of work. [managed] Needs: Lead Needs: Triage This issue needs triage. The team needs to decide who should own it, what to do, by when. [managed] Type: Bug Something isn't working. [managed] labels Jan 14, 2025
@Craig-Rosario
Copy link
Contributor

Hey @Spaarsh are you currently working on this issue, if not, can I work on it?

@github-actions github-actions bot added the Needs: Response Issues which require feedback from lead label Jan 15, 2025
@cdrini
Copy link
Collaborator

cdrini commented Jan 21, 2025

CC @seabelis @bitnapper @zorae @mheiman Is this an issue that librarians are hitting that we should tackle? Do you all use the merge queue on mobile?

@cdrini cdrini added Lead: @jimchamp Issues overseen by Jim (Front-end Lead, BookNotes) [managed] Needs: Community Discussion This issue is to be brought up in the next community call. [managed] and removed Needs: Lead Needs: Response Issues which require feedback from lead labels Jan 21, 2025
@mheiman
Copy link
Collaborator

mheiman commented Jan 21, 2025

I rarely use the merge queue on mobile, but this seems like a pretty easy first task for someone. Having functional mobile views is always a win.

@zorae
Copy link

zorae commented Jan 21, 2025

I’ve never really used the merge queue on a smartphone, so I wouldn’t say that this issue is a priority for me personally.

@github-actions github-actions bot added the Needs: Response Issues which require feedback from lead label Jan 22, 2025
@bitnapper
Copy link

I regularly use it on my Phone and Tablet. I prefer my desktop whenever I can but when I'm waiting somewhere and have the time I try to get a bit don.

@jimchamp
Copy link
Collaborator

Thanks for the feedback, all.

@Craig-Rosario
Before making code changes, can you help us with breakdown by:

  1. Clarifying what you believe the task to be
  2. Identifying which files are related to the issue
  3. Asking any questions you may have about the goal or requirements of this issue
  4. Proposing a solution or approach

@jimchamp jimchamp added Priority: 3 Issues that we can consider at our leisure. [managed] Priority: 4 An issue, but should be worked on when no other pressing work can be done. [managed] and removed Needs: Triage This issue needs triage. The team needs to decide who should own it, what to do, by when. [managed] Needs: Response Issues which require feedback from lead Priority: 4 An issue, but should be worked on when no other pressing work can be done. [managed] labels Jan 22, 2025
@Craig-Rosario
Copy link
Contributor

Yeah so I understand that the icon blocks the review and overlaps it.
The issue can be simply fixed by changing the table-data width to auto and hence the logo is on the right and doesn't overlap.

Changes need to be made to "merge-request-table.less" file

merges._.Open.Library.Mozilla.Firefox.2025-01-23.22-48-52.mp4

I have added a video of the solution, do let me know your thoughts on it @jimchamp

@Spaarsh
Copy link
Contributor Author

Spaarsh commented Jan 23, 2025

@Craig-Rosario Since we are making these changes, I would suggest that the side-ways scrolling should be prevented from occuring.

As a solution, when the user clicks on the icon, the comments should be visible similar to how YouTube comments are seen.

This will require javascript changes as well.

Additionally, once the icon is clicked, the icon should move to the bottom of the comment box.

Could you weight in on this @jimchamp @mheiman @bitnapper @zorae @seabelis?

Thanks!

@github-actions github-actions bot added the Needs: Response Issues which require feedback from lead label Jan 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Lead: @jimchamp Issues overseen by Jim (Front-end Lead, BookNotes) [managed] Needs: Breakdown This big issue needs a checklist or subissues to describe a breakdown of work. [managed] Needs: Community Discussion This issue is to be brought up in the next community call. [managed] Needs: Response Issues which require feedback from lead Priority: 3 Issues that we can consider at our leisure. [managed] Type: Bug Something isn't working. [managed]
Projects
None yet
Development

No branches or pull requests

7 participants