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:
@@ -33,7 +33,9 @@ function render() {
|
||||
h('div', { class: 'card' }, shortcuts())),
|
||||
|
||||
h('div', { class: 'page-head' }),
|
||||
h('button', { class: 'btn btn-block', type: 'button', onclick: signOut }, icon('logout'), 'Sign out'),
|
||||
// Wrapped in a div: .btn is inline-flex, and only a block-level element
|
||||
// picks up .view-page > *'s margin:auto centering (see app.css:316).
|
||||
h('div', {}, h('button', { class: 'btn btn-block', type: 'button', onclick: signOut }, icon('logout'), 'Sign out')),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user