Skip to content

Fix mobile table columns and log viewer toolbar (#187)#188

Open
Brandon-Haney wants to merge 2 commits into
StudioNirin:mainfrom
Brandon-Haney:fix/issue-187-mobile-responsiveness
Open

Fix mobile table columns and log viewer toolbar (#187)#188
Brandon-Haney wants to merge 2 commits into
StudioNirin:mainfrom
Brandon-Haney:fix/issue-187-mobile-responsiveness

Conversation

@Brandon-Haney

Copy link
Copy Markdown
Collaborator

What

Two mobile layout fixes.

1. Tables lost their first column on mobile (fixes #187)

The mobile breakpoint had a rule that hid the first column of every table on screens 768px and under. It was meant to drop a checkbox column for spacing, but it applied to all tables, so on a phone:

  • Maintenance > Untracked Files and Cached Files lost their selection checkbox, so there was no way to select anything (this is what [Visualization-Bug] On mobile view there is no checkbox in Untracked File #187 reported)
  • Maintenance > Multi-Version and Storage breakdown tables lost their File name column
  • Dashboard Recent Activity and Maintenance Action History lost their Time column
  • Recently Added lost its Title column

Removing the rule brings those columns back. The checkbox column is 40px and the tables already scroll inside their container, so spacing is fine.

2. Log viewer toolbar toggles were unreachable on mobile

The time-range and toggle group in the log viewer toolbar used a non-wrapping flex row. On narrow screens the Auto-scroll and Live Updates switches were pushed past the edge of the viewport and clipped by the card, so you could not reach them. Added the existing flex-wrap utility to that group so it wraps to a second line when space runs out. No change on wider screens.

Test steps

Open the web UI on a phone, or use desktop browser devtools with a mobile viewport (around 390px wide).

  1. Go to Maintenance and run an audit. Under Untracked Files, confirm each row now shows a selection checkbox and you can select files and use Keep on Cache / Move to Array.
  2. On the Dashboard, confirm Recent Activity shows the Time column.
  3. On Storage, confirm the breakdown tables show the File column.
  4. On Recently Added, confirm the Title column is visible.
  5. On Logs, confirm the Auto-scroll and Live Updates toggles are visible and tappable (they wrap to their own line rather than running off the edge).
  6. On a normal desktop width, confirm all of the above pages look the same as before.

The mobile breakpoint hid the first column of every table, which
removed the selection checkbox from the Untracked Files and Orphaned
Backups tables, leaving no way to select files on mobile. Drop the
blanket first-column hide so the 40px checkbox column stays visible
(tables already scroll within their container). Refs StudioNirin#187.
The time-range and toggle group in the log viewer toolbar used a
non-wrapping flex row, so on narrow screens the Auto-scroll and Live
Updates switches were pushed past the viewport and clipped by the
card, leaving them unreachable. Add the flex-wrap utility so the group
wraps to a second line when space runs out (no change on wider screens).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Visualization-Bug] On mobile view there is no checkbox in Untracked File

1 participant