Center mapping status indicator with label

public/index.html

@@ -84,8 +84,8 @@
               <span class="mapping-label">
                 <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#layers"></use></svg>
                 <span class="mapping-title">Mapping</span>
-              </span>
                 <span class="mapping-state-dot is-missing" id="mappingState" role="status" aria-label="Mapping not loaded"></span>
+              </span>
               <span class="mapping-toggle" aria-hidden="true"></span>
             </summary>
             <div class="mapping-panel" role="status">

src/tailwind.css

@@ -121,7 +121,7 @@
   .mapping-summary { @apply relative flex min-h-8 items-center justify-center rounded bg-slate-800 px-9 text-center text-[11px] font-semibold text-slate-100; }
   .mapping-label { @apply absolute left-1/2 top-1/2 inline-flex max-w-[calc(100%-4.5rem)] -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1.5 text-center; }
   .mapping-title { @apply min-w-0 truncate text-center; }
-  .mapping-state-dot { @apply absolute right-7 inline-block h-3 w-3 shrink-0 rounded-full border border-slate-500 shadow-sm; }
+  .mapping-state-dot { @apply inline-block h-3 w-3 shrink-0 rounded-full border border-slate-500 shadow-sm; }
   .mapping-state-dot.is-ready { @apply border-emerald-300 bg-emerald-500; }
   .mapping-state-dot.is-warning { @apply border-amber-300 bg-amber-400; }
   .mapping-state-dot.is-missing { @apply border-red-300 bg-red-500; }