Fix widget Telegramas

Elecciones-Web/frontend/src/components/TelegramaWidget.css

@@ -101,13 +101,12 @@
   width: 100%;
 }
 
-.telegrama-image-wrapper {
-  flex: 1 1 65%;
-  border: 1px solid #dee2e6;
-  border-radius: 4px;
-  overflow: hidden;
-  max-height: 500px;
-  overflow-y: auto;
+.telegrama-image-wrapper { 
+  flex: 1 1 100%; /* Hacemos que ocupe todo el ancho disponible */
+  border: 1px solid #dee2e6; 
+  border-radius: 4px; 
+  /* overflow: auto; */
+  min-height: 600px; /* Le damos una altura mínima */
 }
 
 .telegrama-image-wrapper img {
@@ -117,7 +116,8 @@
 }
 
 .telegrama-metadata {
-  flex: 1 1 35%;
+  flex: 1 1 300px; /* Un ancho fijo si se pone al lado */
+  min-width: 250px;
 }
 
 .telegrama-metadata h5 {

Elecciones-Web/frontend/src/components/TelegramaWidget.tsx

@@ -112,14 +112,21 @@ export const TelegramaWidget = () => {
       <div className="telegrama-viewer">
         {loading && <div className="spinner"></div>}
         {error && <p className="message error">{error}</p>}
+        
         {telegrama && (
           <div className="telegrama-content">
             <div className="telegrama-image-wrapper">
-              <img src={`data:image/jpeg;base64,${telegrama.contenidoBase64}`} alt={`Telegrama ${telegrama.id}`} />
+              <iframe
+                src={`data:application/pdf;base64,${telegrama.contenidoBase64}`}
+                title={`Telegrama de la mesa ${telegrama.id}`}
+                width="100%"
+                height="100%"
+                style={{ border: 'none' }}
+              />
             </div>
-            {/* Metadata (opcional, se puede añadir aquí si se desea) */}
           </div>
         )}
+
         {!loading && !telegrama && !error && <p className="message">Seleccione una mesa para visualizar el telegrama.</p>}
       </div>
     </div>