style: Update spacing to use Grid component in UpNextSidebar

frontend/src/components/Collections.tsx

@@ -75,8 +75,9 @@ const Collections: React.FC<CollectionsProps> = ({ collections, onItemClick }) =
                                     height: 20,
                                     minWidth: 20,
                                     ml: 1,
+                                    flexShrink: 0,
                                     '& .MuiChip-label': {
-                                        padding: '0 4px',
+                                        padding: '0 6px',
                                         fontSize: '0.75rem'
                                     }
                                 }}

frontend/src/components/VideoCard.tsx

@@ -72,7 +72,6 @@ const VideoCard: React.FC<VideoCardProps> = ({
                 borderRadius: isMobile ? 0 : undefined,
                 ...(!isMobile && {
                     '&:hover': {
-                        transform: 'translateY(-4px)',
                         boxShadow: theme.shadows[8],
                         '& .delete-btn': {
                             opacity: 1

frontend/src/components/VideoPlayer/UpNextSidebar.tsx

@@ -8,6 +8,7 @@ import {
     CardMedia,
     Chip,
     FormControlLabel,
+    Grid,
     IconButton,
     Skeleton,
     Stack,
@@ -134,10 +135,10 @@ const UpNextSidebar: React.FC<UpNextSidebarProps> = ({
                     sx={{ ml: 0, mr: 0 }}
                 />
             </Stack>
-            <Stack spacing={2}>
+            <Grid container spacing={2}>
                 {relatedVideos.map(relatedVideo => (
+                    <Grid key={relatedVideo.id} size={{ xs: 12, md: 6, lg: 12 }}>
                         <Card
-                        key={relatedVideo.id}
                             sx={{ display: 'flex', cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, position: 'relative' }}
                             onClick={() => onVideoClick(relatedVideo.id)}
                             onMouseEnter={() => setHoveredVideoId(relatedVideo.id)}
@@ -180,11 +181,12 @@ const UpNextSidebar: React.FC<UpNextSidebarProps> = ({
                                 )}
                             </CardContent>
                         </Card>
+                    </Grid>
                 ))}
+            </Grid>
             {relatedVideos.length === 0 && (
                 <Typography variant="body2" color="text.secondary">{t('noOtherVideos')}</Typography>
             )}
-            </Stack>
         </Box>
     );
 };