From f30c29614f697e0e128f984b7467c5a8fcdd983b Mon Sep 17 00:00:00 2001
From: planetazuzu <planetazuzu@gmail.com>
Date: Mon, 19 Jan 2026 20:53:52 +0100
Subject: [PATCH] Restore markdown width constraints and add overlay cleanup

---
 src/components/content/MarkdownViewer.tsx         | 10 +++++++++-
 src/components/emergency/EmergencyModeOverlay.tsx |  6 +++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/content/MarkdownViewer.tsx b/src/components/content/MarkdownViewer.tsx
index 1ac9c1e3..10e09e5e 100644
--- a/src/components/content/MarkdownViewer.tsx
+++ b/src/components/content/MarkdownViewer.tsx
@@ -29,6 +29,11 @@ interface MarkdownViewerProps {
    * Mostrar mensaje de error personalizado
    */
   onError?: (error: Error) => void;
+  /**
+   * Forzar ancho completo del contenido en pantallas grandes.
+   * Útil para guías visuales donde el contenido debe ocupar todo el ancho.
+   */
+  fullWidth?: boolean;
 }
 
 /**
@@ -47,6 +52,7 @@ const MarkdownViewer = ({
   className = '',
   showLoading = true,
   onError,
+  fullWidth = false,
 }: MarkdownViewerProps) => {
   const [content, setContent] = useState<string>('');
   const [loading, setLoading] = useState(true);
@@ -114,8 +120,10 @@ const MarkdownViewer = ({
   }
 
   // Renderizar Markdown
+  const widthClasses = fullWidth ? 'max-w-none' : 'max-w-none md:max-w-prose lg:max-w-[700px]';
+
   return (
-    <div className={`prose prose-slate dark:prose-invert max-w-none ${className}`}>
+    <div className={`prose prose-slate dark:prose-invert ${widthClasses} ${className}`}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm, remarkFrontmatter]}
         rehypePlugins={[
diff --git a/src/components/emergency/EmergencyModeOverlay.tsx b/src/components/emergency/EmergencyModeOverlay.tsx
index c203d4a8..b48185f1 100644
--- a/src/components/emergency/EmergencyModeOverlay.tsx
+++ b/src/components/emergency/EmergencyModeOverlay.tsx
@@ -25,16 +25,20 @@ const EmergencyModeOverlay = ({ isOpen, onClose }: EmergencyModeOverlayProps) =>
 
   useEffect(() => {
     if (!isOpen) return;
+    let isCancelled = false;
     const event = createEmergencyEvent();
     setEventId(event.id);
     setStage('select');
     setSituation(null);
 
     getLocationSnapshot().then((location) => {
-      if (location) {
+      if (!isCancelled && location) {
         updateEmergencyEvent(event.id, { location });
       }
     });
+    return () => {
+      isCancelled = true;
+    };
   }, [isOpen]);
 
   useEffect(() => {