[Bug] Rack actions and layout are awkward or clipped on mobile-sized screens
- 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
Contributor 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