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,6 +179,7 @@ export default function GradeDistribution({ course }: Props) {
         return (
             <Card className={styles.chartContainer}>
                 {semesters.length > 0 && (
+                    <div className={styles.selectContainer}>
                         <select onChange={handleSelectSemester}>
                             <option value={0}>Aggregate</option>
                             {semesters.map((semester, index) => (
@@ -186,6 +188,7 @@ export default function GradeDistribution({ course }: Props) {
                                 </option>
                             ))}
                         </select>
+                    </div>
                 )}
                 <HighchartsReact ref={ref} highcharts={Highcharts} options={chartOptions} />
             </Card>

src/views/styles/elevation.module.scss

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