block / block/proto-fleet

[Bug] Rack actions and layout are awkward or clipped on mobile-sized screens

Open
#697 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
Go
Stars
55
Forks
16
Avg merge
1d 17h
Merged PRs (30d)
84

Description

### Describe the bug

Several rack-related controls are awkward, clipped, or hard to discover at mobile-sized resolutions.

Observed issues:
- On existing racks, the three-dots menu button is pushed off to the right and can be easy to miss. It also unnecessarily increases the horizontal width of the screen.
- In `Edit rack`, the `Clear` button gets clipped and may only become fully visible after additional scrolling.
- In `Edit rack`, tapping the three-dots menu in the header opens a menu at the bottom of the screen instead of near the button, which feels inconsistent with the rest of the UI.
- When the `Complete setup` section is open, the `Sites`, `Buildings`, and especially `Racks` section feels very squished when empty.

### Preconditions

- View Proto Fleet at a mobile-sized resolution
- Have at least one rack available to view or edit for the rack-specific issues
- The empty-state layout issue is easiest to observe when `Complete setup` is open

### Steps to reproduce

1. Open Proto Fleet in a mobile-sized browser viewport
2. Navigate to `Racks`
3. Open an existing rack and observe the placement of the three-dots menu button
4. Open `Edit rack`
5. Observe the `Clear` button and the three-dots menu behavior
6. Navigate through empty `Sites`, `Buildings`, and `Racks` sections while `Complete setup` is open

### Expected behavior

- Rack action buttons should be visible and easy to discover without forcing awkward horizontal layout
- The `Clear` button should be fully visible without requiring extra scrolling behavior
- The three-dots menu in `Edit rack` should open in a way that feels consistent with other pages
- Empty `Sites`, `Buildings`, and `Racks` sections should have a comfortable, readable layout even when `Complete setup` is open

### Actual behavior

- The rack three-dots menu is partially hidden off to the right
- The `Clear` button can be clipped
- The `Edit rack` header menu opens at the bottom of the screen instead of from the button location
- Empty `Sites`, `Buildings`, and especially `Racks` sections look overly squished when `Complete setup` is open

### Proto Fleet version

`nightly-20260703-a7b00e867a12-13-g04a0c8c5-dirty`

### Environment

- OS: macOS
- Browser: Chrome

### Screenshots & screen recordings

https://github.com/user-attachments/assets/7319dcca-d77c-4233-9c43-75e9befa0bd2

Image

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the mobile-sized behavior in the Racks view, an existing rack, and Edit rack, then compare the empty Sites, Buildings, and Racks sections while Complete setup is open. Trace the UI entry points for the rack actions, Clear button, header menu, and empty states. Done means the controls remain visible, the menu opens near its button, and the empty layouts stay readable without awkward horizontal or extra scrolling.

Written by the indexing model from the issue text.

Assessment

Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.