Fix missing imports and improve video display styling

- Add missing Button and ArrowBackIcon imports in ClaimReport
- Improve video container responsiveness in ValidationDetailsDialog
- Better grid layout for media in validation cards (xs:12 sm:5 md:4)
- Consistent border-radius, shadows, and aspect ratios
- Match video overlay gradient with main Certificate component

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: Devops team

src/components/Certificate/ValidationDetailsDialog.tsx

@@ -141,15 +141,19 @@ const ValidationDetailsDialog: React.FC<ValidationDetailsDialogProps> = ({ open,
 
             {/* Video Testimonial */}
             {videoUrl && (
-              <Box sx={{ mt: 2, width: '100%', maxWidth: 400 }}>
+              <Box sx={{
+                mt: { xs: 2, sm: 2.5 },
+                width: '100%',
+                maxWidth: { xs: '100%', sm: 360, md: 420 }
+              }}>
                 <Typography
-                  variant='subtitle2'
                   sx={{
                     color: '#495057',
                     mb: 1,
                     textTransform: 'uppercase',
                     letterSpacing: 1,
-                    fontSize: 11
+                    fontSize: { xs: 10, sm: 11 },
+                    fontWeight: 600
                   }}
                 >
                   Video Testimonial
@@ -159,10 +163,10 @@ const ValidationDetailsDialog: React.FC<ValidationDetailsDialogProps> = ({ open,
                     position: 'relative',
                     width: '100%',
                     aspectRatio: '16/9',
-                    backgroundColor: '#000',
-                    borderRadius: 1,
+                    backgroundColor: '#f5f5f5',
+                    borderRadius: { xs: '6px', sm: '8px' },
                     overflow: 'hidden',
-                    boxShadow: '0 2px 12px rgba(0,0,0,0.15)'
+                    boxShadow: '0 2px 12px rgba(0,0,0,0.1)'
                   }}
                 >
                   {!videoPlaying ? (
@@ -176,14 +180,14 @@ const ValidationDetailsDialog: React.FC<ValidationDetailsDialogProps> = ({ open,
                         justifyContent: 'center',
                         cursor: 'pointer',
                         background: 'linear-gradient(135deg, rgba(102,126,234,0.9) 0%, rgba(118,75,162,0.9) 100%)',
-                        transition: 'opacity 0.2s',
-                        '&:hover': { opacity: 0.9 }
+                        transition: 'opacity 0.2s ease',
+                        '&:hover': { opacity: 0.92 }
                       }}
                     >
                       <Box sx={{ textAlign: 'center', color: 'white' }}>
-                        <PlayCircleOutlineIcon sx={{ fontSize: 48, mb: 0.5 }} />
-                        <Typography variant='body2' sx={{ fontWeight: 500 }}>
-                          Click to play
+                        <PlayCircleOutlineIcon sx={{ fontSize: { xs: 40, sm: 48 }, mb: 0.5 }} />
+                        <Typography sx={{ fontWeight: 500, fontSize: { xs: 12, sm: 14 } }}>
+                          Play video
                         </Typography>
                       </Box>
                     </Box>
@@ -201,12 +205,22 @@ const ValidationDetailsDialog: React.FC<ValidationDetailsDialogProps> = ({ open,
 
             {/* Image */}
             {imageUrl && (
-              <Box sx={{ mt: 2, width: '100%', maxWidth: 400 }}>
-                <img
-                  src={imageUrl}
-                  alt=''
-                  style={{ width: '100%', borderRadius: 4 }}
-                />
+              <Box sx={{
+                mt: { xs: 2, sm: 2.5 },
+                width: '100%',
+                maxWidth: { xs: '100%', sm: 360, md: 420 }
+              }}>
+                <Box sx={{
+                  borderRadius: { xs: '6px', sm: '8px' },
+                  overflow: 'hidden',
+                  boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
+                }}>
+                  <img
+                    src={imageUrl}
+                    alt=''
+                    style={{ width: '100%', display: 'block' }}
+                  />
+                </Box>
               </Box>
             )}
           </Box>

src/components/ClaimReport/index.tsx

@@ -403,32 +403,45 @@ const ClaimReport: React.FC = () => {
                 <CardContent sx={{ p: 2 }}>
                   <Grid container spacing={2}>
                     {hasMedia && (
-                      <Grid item xs={12} sm={6}>
+                      <Grid item xs={12} sm={5} md={4}>
                         {mediaIsVideo ? (
                           <Box sx={{
                             position: 'relative',
                             width: '100%',
-                            borderRadius: 1,
+                            aspectRatio: '16/9',
+                            borderRadius: '8px',
                             overflow: 'hidden',
-                            backgroundColor: '#000'
+                            backgroundColor: theme.palette.mode === 'dark' ? '#1a1a1a' : '#f5f5f5',
+                            boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
                           }}>
                             <video
                               src={mediaUrl}
                               controls
-                              style={{ width: '100%', maxHeight: 280, display: 'block' }}
+                              style={{
+                                width: '100%',
+                                height: '100%',
+                                objectFit: 'contain',
+                                display: 'block'
+                              }}
                               preload='metadata'
                             />
                           </Box>
                         ) : (
-                          <img
-                            src={attestation.image}
-                            alt=''
-                            style={{ width: '100%', borderRadius: 4 }}
-                          />
+                          <Box sx={{
+                            borderRadius: '8px',
+                            overflow: 'hidden',
+                            boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
+                          }}>
+                            <img
+                              src={attestation.image}
+                              alt=''
+                              style={{ width: '100%', display: 'block' }}
+                            />
+                          </Box>
                         )}
                       </Grid>
                     )}
-                    <Grid item xs={12} sm={hasMedia ? 6 : 12}>
+                    <Grid item xs={12} sm={hasMedia ? 7 : 12} md={hasMedia ? 8 : 12}>
                       <Typography variant='caption' color='text.secondary'>
                         {attestation.claim || 'attestation'}
                         {attestation.effectiveDate && ` · ${new Date(attestation.effectiveDate).toLocaleDateString()}`}