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.

internal/web/static/js/account.js

@@ -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')),
   );
 }
 

internal/web/static/js/adminteam.js

@@ -96,7 +96,9 @@ function render() {
 }
 
 function backLink() {
-  return h('a', { class: 'back-link', href: '/admin/teams' }, icon('chevronLeft'), h('span', { text: 'Teams' }));
+  // 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/teams' }, icon('chevronLeft'), h('span', { text: 'Teams' })));
 }
 
 // --- identity --------------------------------------------------------------

internal/web/static/js/adminuser.js

@@ -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 --------------------------------------------------------------

internal/web/static/js/incident.js

@@ -453,9 +453,25 @@ function quickActions() {
   return div;
 }
 
+// Desktop has room to show what a phone folds into the More sheet below — see
+// the .action-extra/.more-btn rules in app.css. Resolved/archived incidents
+// already say everything via primaryAction()/secondaryAction(), so there is
+// nothing extra to surface for them.
+function extraActions() {
+  if (!isOpen()) return [];
+  const out = [
+    h('button', { class: 'btn btn-sm action-extra', type: 'button', onclick: assign }, icon('user'), 'Assign…'),
+    h('button', { class: 'btn btn-sm action-extra', type: 'button', onclick: addNote }, icon('note'), 'Add note…'),
+  ];
+  out.push(inc.status === 'acknowledged'
+    ? h('button', { class: 'btn btn-sm action-extra', type: 'button', onclick: unacknowledge }, icon('undo'), 'Clear ack')
+    : h('button', { class: 'btn btn-sm action-extra', type: 'button', onclick: resolve }, icon('checkCircle'), 'Resolve…'));
+  return out;
+}
+
 function actionBar() {
-  const more = h('button', { class: 'btn', type: 'button', 'aria-label': 'More actions', onclick: moreMenu }, icon('more'), 'More');
-  const bar = h('div', { class: 'actionbar' }, primaryAction(), secondaryAction(), more);
+  const more = h('button', { class: 'btn more-btn', type: 'button', 'aria-label': 'More actions', onclick: moreMenu }, icon('more'), 'More');
+  const bar = h('div', { class: 'actionbar' }, primaryAction(), secondaryAction(), ...extraActions(), more);
   if (busy) for (const b of bar.querySelectorAll('button')) b.disabled = true;
   return bar;
 }