Add mobile compatibility for Gantt Legend

Author: EdgarButtner

src/frontend/src/pages/GanttPage/ProjectGanttChart/GanttChartColorLegend.tsx

@@ -136,7 +136,14 @@ const GanttChartColorLegend = () => {
           display: 'none'
         },
         scrollbarWidth: 'none', // Firefox
-        msOverflowStyle: 'none' // IE and Edge
+        msOverflowStyle: 'none', // IE and Edge
+        // Mobile responsiveness
+        '@media (max-width: 768px)': {
+          flexWrap: 'wrap',
+          overflowX: 'visible',
+          marginTop: 1,
+          justifyContent: 'center'
+        }
       }}
     >
       {Object.values(WorkPackageStage).map((stage) => {
@@ -148,10 +155,15 @@ const GanttChartColorLegend = () => {
               flexDirection: 'column',
               height: '2rem',
               width: '8.25rem',
-              borderRadius: 1,
+              borderRadius: 2,
               justifyContent: 'center',
               alignItems: 'center',
-              px: 0.8
+              px: 0.8,
+              '@media (max-width: 768px)': {
+                height: '1.75rem',
+                width: 'fit-content',
+                fontsize: '6.75rem'
+              }
             }}
           >
             <Tooltip
@@ -174,10 +186,15 @@ const GanttChartColorLegend = () => {
           flexDirection: 'column',
           height: '2rem',
           width: '8.25rem',
-          borderRadius: 1,
+          borderRadius: 2,
           justifyContent: 'center',
           alignItems: 'center',
-          px: 0.8
+          px: 0.8,
+          '@media (max-width: 768px)': {
+            height: '1.75rem',
+            width: 'fit-content',
+            fontsize: '6.75rem'
+          }
         }}
       >
         <Tooltip
@@ -198,10 +215,15 @@ const GanttChartColorLegend = () => {
           flexDirection: 'column',
           height: '2rem',
           width: '8.25rem',
-          borderRadius: 1,
+          borderRadius: 2,
           justifyContent: 'center',
           alignItems: 'center',
-          px: 0.8
+          px: 0.8,
+          '@media (max-width: 768px)': {
+            height: '1.75rem',
+            width: 'fit-content',
+            fontsize: '6.75rem'
+          }
         }}
       >
         <Tooltip
@@ -222,10 +244,15 @@ const GanttChartColorLegend = () => {
           flexDirection: 'column',
           height: '2rem',
           width: '8.25rem',
-          borderRadius: 1,
+          borderRadius: 2,
           justifyContent: 'center',
           alignItems: 'center',
-          px: 0.8
+          px: 0.8,
+          '@media (max-width: 768px)': {
+            height: '1.75rem',
+            width: 'fit-content',
+            fontsize: '6.75rem'
+          }
         }}
       >
         <Typography variant="body2" sx={{ color: 'white', overflow: 'hidden', textWrap: 'nowrap' }}>