What the agent last saw is a glance (at most 720 px wide on a wide screen, so How it went stays in view) and opens full size (#140)

ddiff --git a/public/css/actor.css b/public/css/actor.css
iindex 76517c1..a43d838 100644
---- a/public/css/actor.css
++++ b/public/css/actor.css
@@@ -128,6 +128,7 @@ button.sc-btn.sc-primary { border: 0; }
  .desk-card[hidden] { display: none; }
  .last-look { margin: 0 0 18px; }
  .last-look[hidden] { display: none; }
++.last-look a { display: block; width: fit-content; max-width: min(100%, 720px); }
  .last-look img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line, rgba(127, 127, 127, 0.3)); }
  .last-look figcaption { margin-top: 6px; }
  .desk-card p { margin: 0; flex: 1 1 260px; }
ddiff --git a/public/js/task.js b/public/js/task.js
iindex 68dd78e..9610567 100644
---- a/public/js/task.js
++++ b/public/js/task.js
@@@ -80,7 +80,9 @@
        var img = document.getElementById('last-look-img');
        img.removeAttribute('width');
        img.removeAttribute('height');
--      img.setAttribute('src', '/tasks/' + encodeURIComponent(id) + '/look?at=' + Date.now());
++      var src = '/tasks/' + encodeURIComponent(id) + '/look?at=' + Date.now();
++      img.setAttribute('src', src);
++      document.getElementById('last-look-link').setAttribute('href', src);
        lastLook.hidden = false;
      }
      function onOutput(e) {
ddiff --git a/server/http/pages.js b/server/http/pages.js
iindex cf85a9b..e9eedbf 100644
---- a/server/http/pages.js
++++ b/server/http/pages.js
@@@ -345,7 +345,7 @@ ${open ? html`<section class="desk-card" id="desk-card" aria-live="polite"${desk
  <a class="sc-btn sc-primary" id="desk-link" href="${desk ? desk.url : botPages}" rel="noopener" target="_blank">Watch and take over</a>
  </section>` : ''}
  ${open || look ? html`<figure class="last-look" id="last-look"${look ? '' : raw(' hidden')}>
--<img id="last-look-img" src="${look ? `/tasks/${row.id}/look?at=${look.at}` : ''}" alt="The screen your agent last looked at"${look && look.width ? raw(` width="${Number(look.width)}" height="${Number(look.height)}"`) : ''} loading="lazy">
++<a id="last-look-link" href="${look ? `/tasks/${row.id}/look?at=${look.at}` : '#'}" target="_blank" rel="noopener" title="Open it full size"><img id="last-look-img" src="${look ? `/tasks/${row.id}/look?at=${look.at}` : ''}" alt="The screen your agent last looked at"${look && look.width ? raw(` width="${Number(look.width)}" height="${Number(look.height)}"`) : ''} loading="lazy"></a>
  <figcaption class="muted small">What your agent last saw on the screen${look ? html` · ${time(new Date(look.at).toISOString())}` : ''}</figcaption>
  </figure>` : ''}
  <section class="how" aria-labelledby="h-how"><h2 id="h-how">How it went</h2>