Fix ExtendedMasterySelect styles

components/mastery/ExtendedMasterySelect/index.module.scss

@@ -1,17 +1,6 @@
-.SelectSet {
+.set {
   display: flex;
   flex-direction: row;
   gap: $unit;
   width: 100%;
-
-  .SelectTrigger.Left {
-    flex-grow: 1;
-    width: 100%;
-  }
-
-  .SelectTrigger.Right {
-    flex-grow: 0;
-    text-align: right;
-    min-width: 12rem;
-  }
 }

components/mastery/ExtendedMasterySelect/index.tsx

@@ -125,7 +125,7 @@ const ExtendedMasterySelect = ({
   }
 
   return (
-    <div className="SelectSet">
+    <div className={styles.set}>
       <Select
         key={`${name}_type`}
         value={`${currentItemSkill ? currentItemSkill.id : 0}`}
@@ -134,7 +134,12 @@ const ExtendedMasterySelect = ({
         onValueChange={handleLeftSelectChange}
         onOpenChange={() => changeOpen('left')}
         onClose={onClose}
-        triggerClass="Left modal"
+        trigger={{
+          className: classNames({
+            left: true,
+            modal: true,
+          }),
+        }}
         overlayVisible={false}
       >
         {generateLeftOptions()}
@@ -148,11 +153,13 @@ const ExtendedMasterySelect = ({
         onOpenChange={() => changeOpen('right')}
         onClose={onClose}
         overlayVisible={false}
-        triggerClass={classNames({
+        trigger={{
-          Right: true,
+          className: classNames({
-          modal: true,
+            right: true,
-          hidden: currentItemSkill?.id === 0,
+            modal: true,
-        })}
+            hidden: currentItemSkill?.id === 0,
+          }),
+        }}
       >
         {generateRightOptions()}
       </Select>