melhora visualizacao movel

frontend/src/components/StructureInfoPanel.tsx

@@ -1,7 +1,17 @@
 import { useAtlasStore } from "../store/useAtlasStore.js";
 import type { Structure } from "../lib/api.js";
 
-export function StructureInfoPanel({ bySlug }: { bySlug: Map<string, Structure> }) {
+export function StructureInfoPanel({
+  bySlug,
+  onClose,
+}: {
+  bySlug: Map<string, Structure>;
+  // No desktop o painel é uma gaveta lateral sempre visível (não faz
+  // sentido "fechar", só trocar de estrutura), então esse botão só existe
+  // quando a página que usa o painel passa um onClose — hoje é o caso da
+  // bottom sheet do Atlas no mobile.
+  onClose?: () => void;
+}) {
   const selectedStructureId = useAtlasStore((s) => s.selectedStructureId);
   const selectStructure = useAtlasStore((s) => s.selectStructure);
 
@@ -17,17 +27,22 @@ export function StructureInfoPanel({ bySlug }: { bySlug: Map<string, Structure>
     );
   }
 
+  function handleClose() {
+    selectStructure(null);
+    onClose?.();
+  }
+
   return (
     <div className="space-y-3">
-      <div className="flex items-start justify-between">
-        <div>
-          <h2 className="text-lg font-semibold text-white">{structure.namePt}</h2>
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h2 className="text-lg font-semibold text-white leading-snug">{structure.namePt}</h2>
           <p className="text-sm text-slate-400 italic">{structure.nameEn}</p>
         </div>
         <button
-          onClick={() => selectStructure(null)}
-          className="text-slate-400 hover:text-white text-sm"
-          aria-label="Fechar"
+          onClick={handleClose}
+          className="shrink-0 text-slate-400 hover:text-white text-lg leading-none p-1 -m-1"
+          aria-label="Fechar detalhes"
         >
           ✕
         </button>
@@ -40,7 +55,9 @@ export function StructureInfoPanel({ bySlug }: { bySlug: Map<string, Structure>
         {structure.system.namePt}
       </span>
 
-      {structure.description && <p className="text-sm text-slate-300">{structure.description}</p>}
+      {structure.description && (
+        <p className="text-sm text-slate-300 leading-relaxed">{structure.description}</p>
+      )}
 
       {structure.regionPath.length > 0 && (
         <p className="text-xs text-slate-500">{structure.regionPath.join(" › ")}</p>