Side Panel Modal

<!--
  A slide-over: a modal dialog that arrives from the right. Full-width on a phone,
  capped at max-w-md from there up, so it never exceeds the viewport. The slide is
  a translate-x transform (composited, unlike a width/right animation); in the
  React versions it paints at translate-x-full and flips on the next frame, and
  motion-reduce drops the travel.
-->
<div class="fixed inset-0 z-50 flex justify-end">
  <div class="absolute inset-0 bg-black/50" data-modal-close></div>
  <div role="dialog" aria-modal="true" aria-labelledby="side-modal-title" class="relative flex h-full w-full max-w-md flex-col overflow-hidden border-l border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-900">
    <div class="flex flex-none items-center justify-between gap-4 border-b border-gray-200 px-5 py-4 dark:border-gray-800">
      <h2 id="side-modal-title" class="text-base font-semibold text-gray-900 dark:text-gray-100">Edit profile</h2>
      <button type="button" aria-label="Close" data-modal-close class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-900 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-400 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18M6 6l12 12" /></svg>
      </button>
    </div>
    <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
      Update your display name, role and notification settings. Changes apply across every workspace you belong to as soon as you save.
    </div>
    <div class="flex-none border-t border-gray-200 px-5 py-4 dark:border-gray-800">
      <button type="button" data-modal-close class="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Save changes</button>
    </div>
  </div>
</div>