feat: Miniaturas en visualización de inspección - frontend v1.0.23

- Muestra miniaturas de fotos en cada pregunta usando media_files y photos
- Permite abrir imagen en grande al hacer click
- Actualización de docker-compose

docker-compose.hub.yml

@@ -38,7 +38,7 @@ services:
     command: uvicorn app.main:app --host 0.0.0.0 --port 8000 --workers 4
 
   frontend:
-    image: dymai/syntria-frontend:1.0.22
+    image: dymai/syntria-frontend:1.0.23
     container_name: syntria-frontend-prod
     restart: always
     depends_on:

frontend/src/App.jsx

@@ -1266,8 +1266,8 @@ function QuestionsManagerModal({ checklist, onClose }) {
                         >
                           <div className="flex-1">
                             <div className="flex items-start gap-3">
-                              <span className="text-xs text-gray-400 mt-1">#{question.id}</span>
+                              <div className="text-gray-400 text-sm mt-1">#{question.id}</div>
-                              <div>
+                              <div className="flex-1">
                                 <div className="flex items-center gap-2">
                                   {isSubQuestion && (
                                     <span className="text-xs bg-blue-200 text-blue-800 px-2 py-1 rounded">
@@ -1777,9 +1777,23 @@ function InspectionDetailModal({ inspection, user, onClose, onUpdate }) {
                                         </div>
                                       )}
 
-                                      {/* Photos */}
+                                      {/* Photos - NUEVO: miniaturas de media_files */}
-                                      {answer.photos && answer.photos.length > 0 && (
+                                      {(answer.media_files && answer.media_files.length > 0) && (
-                                        <div className="flex gap-2 flex-wrap">
+                                        <div className="flex gap-2 flex-wrap mt-2">
+                                          {answer.media_files.map((media, idx) => (
+                                            <img
+                                              key={idx}
+                                              src={media.file_path}
+                                              alt={`Foto ${idx + 1}`}
+                                              className="w-20 h-20 object-cover rounded border border-gray-300 cursor-pointer hover:opacity-75"
+                                              onClick={() => window.open(media.file_path, '_blank')}
+                                            />
+                                          ))}
+                                        </div>
+                                      )}
+                                      {/* Photos - compatibilidad legacy */}
+                                      {(answer.photos && answer.photos.length > 0) && (
+                                        <div className="flex gap-2 flex-wrap mt-2">
                                           {answer.photos.map((photo, idx) => (
                                             <img
                                               key={idx}
@@ -3108,7 +3122,7 @@ function UsersTab({ user }) {
           <div key={u.id} className="bg-white rounded-lg shadow-md p-4">
             <div className="flex justify-between items-start">
               <div className="flex-1">
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-3 mb-2">
                   <div className="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold">
                     {u.username.charAt(0).toUpperCase()}
                   </div>