fixed dashboard sizing on mobile

frontend/src/components/RatingBadge.tsx

@@ -14,16 +14,17 @@ const RatingBadge: React.FC<RatingBadgeProps> = ({ score, size = 'medium', sx })
     
     return (
         <Box sx={{ 
-            display: 'flex', 
-            flexDirection: 'row', 
-            alignItems: 'baseline',
+            display: 'inline-flex', 
+            alignItems: 'center',
+            justifyContent: 'center',
             gap: 0.5,
             bgcolor: 'primary.main',
             color: 'primary.contrastText',
             px: isLarge ? 2 : (isSmall ? 1 : 1.5), 
-            py: isLarge ? 0.8 : (isSmall ? 0.3 : 0.5), 
-            borderRadius: 1.5,
+            py: isLarge ? 0.5 : (isSmall ? 0.2 : 0.4), 
+            borderRadius: 2,
             minWidth: 'fit-content',
+            height: 'fit-content',
             boxShadow: theme.palette.mode === 'dark' 
                 ? '0 4px 12px rgba(0,0,0,0.4)' 
                 : '0 2px 8px rgba(0,0,0,0.1)',
@@ -31,7 +32,7 @@ const RatingBadge: React.FC<RatingBadgeProps> = ({ score, size = 'medium', sx })
         }}>
             <Typography 
                 variant={isLarge ? "h5" : (isSmall ? "caption" : "subtitle1")} 
-                sx={{ fontWeight: '900', lineHeight: 1 }}
+                sx={{ fontWeight: '900', lineHeight: 1, display: 'flex', alignItems: 'center' }}
             >
                 {typeof score === 'number' ? (isLarge ? score.toFixed(1) : score.toFixed(0)) : score}
             </Typography>
@@ -41,6 +42,8 @@ const RatingBadge: React.FC<RatingBadgeProps> = ({ score, size = 'medium', sx })
                     fontSize: isLarge ? '0.75rem' : (isSmall ? '0.55rem' : '0.65rem'), 
                     fontWeight: '900', 
                     opacity: 0.9,
+                    lineHeight: 1,
+                    mt: 0.2
                 }}
             >
                 / 10