Fix desktop layout bugs and show more incident actions directly
On-call, the incident queue and the account page all had latent CSS bugs that only show up once the browser is wide enough to hit the desktop breakpoint (900px+): - On-call: .days reset its own margin to 0, which canceled the page-wide auto-centering on just that element, leaving the day list pinned to the left edge while every other card on the page centered normally. - Queue: the list pane stayed capped at 340-420px even with nothing selected, leaving the rest of the screen empty. It now fills the width until an incident is picked, then goes back to list+detail. - Account, admin user and admin team: .btn and .back-link are inline-flex, and margin:auto only centers a block box, so the Sign-out button and the two admin back-links sat left of their sibling cards instead of matching their width. Wrapped each in a block div. The incident detail action bar also folded Assign, Add note, Resolve and Clear acknowledgement into a "More" sheet sized for a phone's width. Desktop has the room, so it now shows them as direct buttons and hides More instead; Copy incident stays out of the bar since the header already has its own button for it. Filed as niklas/terdut-server#31, #32, #33, #34, each with a screenshot.
This commit is contained in:
@@ -83,7 +83,9 @@ function render() {
|
||||
}
|
||||
|
||||
function backLink() {
|
||||
return h('a', { class: 'back-link', href: '/admin/users' }, icon('chevronLeft'), h('span', { text: 'Users' }));
|
||||
// Wrapped in a div: .back-link is inline-flex, and only a block-level
|
||||
// element picks up .view-page > *'s margin:auto centering (app.css:316).
|
||||
return h('div', {}, h('a', { class: 'back-link', href: '/admin/users' }, icon('chevronLeft'), h('span', { text: 'Users' })));
|
||||
}
|
||||
|
||||
// --- identity --------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user