BeaconCMS / BeaconCMS/beacon_live_admin

UX Audit - Top Level

Open
#180 0 comments 0 reactions 0 assignees View on GitHub
bug meta roadmap ux
Dominant language
JavaScript
Stars
73
Forks
35
PR merge metrics
No merged PRs in 30d

Description

Please note: Most of these bugs apply to both Chrome and Safari. I tested in Chrome first and would start there with any adjustments then make sure changes also apply to Safari.

On Revisions page, when the site picker is collapsed revision content overlaps site picker
Observed in: Chrome
![Screenshot 2024-06-28 at 2 58 50 PM](https://github.com/BeaconCMS/beacon_live_admin/assets/17362291/c3e1cfb8-0e9a-4a2a-abfb-56e1a3d6c05d)

On Revisions page, when on mobile screen sizes, date formatting should display on one line and label should fit into container
Observed in: Chrome
![Screenshot 2024-06-28 at 3 01 00 PM](https://github.com/BeaconCMS/beacon_live_admin/assets/17362291/abf58137-eed8-4475-8701-0918815fea9c)

On Revision page, improve meta tag background formatting. Rounded border should maybe apply to the larger container instead of each individual row
![Screenshot 2024-06-28 at 3 46 27 PM](https://github.com/BeaconCMS/beacon_live_admin/assets/17362291/350640de-d262-45a2-82b8-aa2411509401)

On Events page, when on smaller screen sizes, observing vertical and horizontal scrollbar in "Name" row
![Screenshot 2024-06-28 at 3 06 22 PM](https://github.com/BeaconCMS/beacon_live_admin/assets/17362291/62ad65a9-cbb6-49d1-8276-0e8df4bd39f4)

When creating a new page, add margin/padding at bottom of page builder on smaller screen sizes so there is space between the code editor and the bottom of the page (observing on a few other pages as well)
Observed in: Chrome
![Screenshot 2024-06-28 at 2 34 36 PM](https://github.com/BeaconCMS/beacon_live_admin/assets/17362291/8c46bef0-71d0-4fad-a2d2-d7da07c19d17)

On pages with a long list, for example the "Live Data" page, we should add margin/padding to the bottom so the list does not end at the end of the page. This is most visible on larger screen sizes but should apply to all sizes.
Observed in: Chrome
![Screenshot 2024-06-28 at 2 37 13 PM](https://github.com/BeaconCMS/beacon_live_admin/assets/17362291/7c5a9181-8a42-44e3-9f59-9dc3c68a8dcd)

On pages with a long list, for example the "Live Data" page, on smaller screen sizes when the site picker is collapsed, the hover state overlaps the site picker
Observed in: Chrome
![Screenshot 2024-06-28 at 2 44 42 PM](https://github.com/BeaconCMS/beacon_live_admin/assets/17362291/c6931b83-735d-47b7-8d03-986b94f98e59)

On pages with a long list, for example the "Live Data" page, observing double vertical scroll bars and a horizontal scrollbar.
Observed in Chrome:
![Screenshot 2024-06-28 at 2 46 54 PM](https://github.com/BeaconCMS/beacon_live_admin/assets/17362291/340ce63b-a181-42a3-844b-96b88acffa45)

When editing a page with the visual editor, component buttons overlap on screen sizes below 1860px
Observed in: Chrome
![Screenshot 2024-06-28 at 2 53 14 PM](https://github.com/BeaconCMS/beacon_live_admin/assets/17362291/2aea3cec-b334-49bb-9668-9d090fbf1bb1)

When editing a page with the visual editor, Block Argument and Block Content text alignment is off on screen sizes below 1860px
Observed in: Chrome
![Screenshot 2024-06-28 at 2 56 06 PM](https://github.com/BeaconCMS/beacon_live_admin/assets/17362291/58d46fd5-4497-4caf-a788-e854f3aea5f6)

When editing a page on smaller screen sizes, site picker is covered by code editor
Observed in: Chrome
![Screenshot 2024-06-28 at 3 09 07 PM](https://github.com/BeaconCMS/beacon_live_admin/assets/17362291/59455cb7-2a2e-45f9-b385-99c713ab17cd)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the listed Revisions, Events, Live Data, page builder, and visual editor issues in Chrome at the reported smaller screen sizes, then check Safari. Done means the documented overlap, alignment, spacing, and scrollbar problems are resolved across the affected pages and responsive layouts.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
design, frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.