better select styling for semesters for grade dist

src/views/components/injected/CoursePopup/GradeDistribution/GradeDistribution.module.scss

@@ -4,6 +4,22 @@
     height: 250px;
     margin: 20px;
     padding: 12px;
+    position: relative;
+
+    .selectContainer {
+        display: flex;
+        position: absolute;
+        width: 100%;
+        margin-top: -8px;
+        justify-content: center;
+
+        select {
+            z-index: $MAX_Z_INDEX;
+            padding: 4px;
+            border-radius: 12px;
+            border-color: $charcoal;
+        }
+    }
 
     :global(.highcharts-background) {
         fill: transparent;
@@ -11,7 +27,6 @@
 }
 
 .textContainer {
-    height: 250px;
     margin: 20px;
     padding: 12px;
     display: flex;

src/views/components/injected/CoursePopup/GradeDistribution/GradeDistribution.tsx

@@ -82,6 +82,7 @@ export default function GradeDistribution({ course }: Props) {
                 fontWeight: '600',
             },
             spacingBottom: 25,
+            spacingTop: 25,
             height: 250,
         },
         credits: {
@@ -178,14 +179,16 @@ export default function GradeDistribution({ course }: Props) {
         return (
             <Card className={styles.chartContainer}>
                 {semesters.length > 0 && (
-                    <select onChange={handleSelectSemester}>
+                    <div className={styles.selectContainer}>
-                        <option value={0}>Aggregate</option>
+                        <select onChange={handleSelectSemester}>
-                        {semesters.map((semester, index) => (
+                            <option value={0}>Aggregate</option>
-                            <option key={semester.season + semester.year} value={index + 1}>
+                            {semesters.map((semester, index) => (
-                                {semester.season} {semester.year}
+                                <option key={semester.season + semester.year} value={index + 1}>
-                            </option>
+                                    {semester.season} {semester.year}
-                        ))}
+                                </option>
-                    </select>
+                            ))}
+                        </select>
+                    </div>
                 )}
                 <HighchartsReact ref={ref} highcharts={Highcharts} options={chartOptions} />
             </Card>

src/views/styles/elevation.module.scss

@@ -0,0 +1 @@
+$MAX_Z_INDEX: 2147483647;