Merge pull request #1673 from Northeastern-Electric-Racing/#1297-finance-fixes-details-display-overflow

#1297 : Implementing first overflow option

Author: RChandler234

src/frontend/src/components/VerticalDetailDisplay.tsx

@@ -16,16 +16,33 @@ interface VerticalDetailDisplayProps {
 const VerticalDetailDisplay: React.FC<VerticalDetailDisplayProps> = ({ label, content, boxStyle }) => {
   const theme = useTheme();
   const backgroundColor = theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[200];
+
   return (
     <Box
-      overflow={'hidden'}
+      overflow={'auto'}
       whiteSpace={'nowrap'}
-      sx={{ backgroundColor: backgroundColor, borderRadius: '10px', justifyContent: 'center', boxShadow: 1, ...boxStyle }}
+      bgcolor={backgroundColor}
+      borderRadius={'10px'}
+      justifyContent={'center'}
+      boxShadow={1}
+      sx={{
+        '&::-webkit-scrollbar': {
+          height: '0.55rem' // Adjust the the thickness of the scrollbar
+        },
+        '&::-webkit-scrollbar-thumb': {
+          backgroundColor: '#EF4345', //FinishLine 'red' color
+          borderRadius: '10px' //make the scrollbar rounded
+        },
+        '&::-webkit-scrollbar-thumb:hover': {
+          backgroundColor: '#b0191a' // Change to a darker shade of red on hover
+        },
+        ...boxStyle
+      }}
     >
       <Typography textOverflow={'ellipsis'} textAlign={'center'} fontSize={50}>
         {content}
       </Typography>
-      <Typography textAlign={'center'} fontWeight={'bold'}>
+      <Typography textAlign={'center'} fontWeight={'bold'} marginBottom={'5px'}>
         {label}
       </Typography>
     </Box>