v0.9.14 adjusted emoticon and image view.

frontend/src/components/ImageLightbox.jsx

@@ -1,22 +1,27 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 
 export default function ImageLightbox({ src, onClose }) {
   const overlayRef = useRef(null);
-  const imgRef = useRef(null);
 
   // Close on Escape
   useEffect(() => {
     const handler = (e) => { if (e.key === 'Escape') onClose(); };
     window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
+    // Prevent body scroll while open
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', handler);
+      document.body.style.overflow = '';
+    };
   }, [onClose]);
 
-  return (
+  return createPortal(
     <div
       ref={overlayRef}
       onClick={(e) => e.target === overlayRef.current && onClose()}
       style={{
-        position: 'fixed', inset: 0, zIndex: 2000,
+        position: 'fixed', inset: 0, zIndex: 9999,
         background: 'rgba(0,0,0,0.92)',
         display: 'flex', alignItems: 'center', justifyContent: 'center',
         touchAction: 'pinch-zoom',
@@ -30,8 +35,9 @@ export default function ImageLightbox({ src, onClose }) {
           background: 'rgba(255,255,255,0.15)', border: 'none',
           borderRadius: '50%', width: 40, height: 40,
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          cursor: 'pointer', color: 'white', zIndex: 2001,
+          cursor: 'pointer', color: 'white', zIndex: 10000,
         }}
+        title="Close"
       >
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
           <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
@@ -47,7 +53,7 @@ export default function ImageLightbox({ src, onClose }) {
           background: 'rgba(255,255,255,0.15)', border: 'none',
           borderRadius: '50%', width: 40, height: 40,
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          cursor: 'pointer', color: 'white', zIndex: 2001, textDecoration: 'none',
+          cursor: 'pointer', color: 'white', zIndex: 10000, textDecoration: 'none',
         }}
         title="Download"
       >
@@ -60,19 +66,20 @@ export default function ImageLightbox({ src, onClose }) {
 
       {/* Image — fit to screen, browser handles pinch-zoom natively */}
       <img
-        ref={imgRef}
         src={src}
         alt="Full size"
         style={{
-          maxWidth: '95vw',
-          maxHeight: '95vh',
+          maxWidth: '92vw',
+          maxHeight: '92vh',
           objectFit: 'contain',
           borderRadius: 8,
           userSelect: 'none',
           touchAction: 'pinch-zoom',
+          boxShadow: '0 8px 40px rgba(0,0,0,0.6)',
         }}
         onClick={(e) => e.stopPropagation()}
       />
-    </div>
+    </div>,
+    document.body
   );
 }