Truncation Tooltip

<!--
  A cell that ellipsises its text and reveals the full string on hover/focus. The
  trigger IS the truncated text, made a real <button> so it can take focus (and a
  tap) - truncated text with no way to read the rest is a dead end on a phone.
  The full string lives in the tooltip AND remains the button's text, so a screen
  reader reads it whole regardless of the visual clip.
-->
<span class="group relative inline-flex max-w-[12rem]">
  <button type="button" aria-describedby="tt-trunc" class="block max-w-full truncate rounded text-left text-sm text-gray-800 underline decoration-dotted decoration-gray-400 underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-gray-200 dark:decoration-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
    /var/log/app/2026-07-17/request-9f2c1a-timeout.log
  </button>
  <span id="tt-trunc" role="tooltip" class="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-0 z-30 w-max max-w-[calc(100vw-2rem)] rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium leading-snug text-gray-50 opacity-0 shadow-sm transition group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900">
    /var/log/app/2026-07-17/request-9f2c1a-timeout.log
  </span>
</span>