Adds an opacity fade out to the new character slot assignment thing (#96952)

## About The Pull Request

<details> <summary> How it looks in-game </summary>

<img width="920" height="770" alt="j69wIUZnjS"
src="https://github.com/user-attachments/assets/795c5144-f8e7-48cf-8552-1aeb58199015"
/>

</details>

## Why It's Good For The Game

Some servers that run with more available slots will run into an issue
of this menu blocking some of the jobs from being dragged onto. This
just hides it out of the way while they are dragging.

## Changelog

🆑
qol: the character job slot assignment menu will fade out while you are
dragging a character, to allow you to access jobs that might render
behind it
/🆑

tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx

@@ -439,12 +439,13 @@ function JoblessRoleDropdown(props) {
 }
 
 type CharacterSectionsProps = {
+  dragging: number;
   setDragging: (dragging: number) => void;
   setHoveringOver: (hoveringOver: string) => void;
 };
 
 function CharacterSection(props: CharacterSectionsProps) {
-  const { setDragging, setHoveringOver } = props;
+  const { dragging, setDragging, setHoveringOver } = props;
   const { data } = useBackend<PreferencesMenuData>();
   const { character_profiles } = data;
 
@@ -455,13 +456,10 @@ function CharacterSection(props: CharacterSectionsProps) {
       placement="bottom-end"
       content={
         <Box
-          // Dumb way to copy dropdown styling but it works I guess
-          style={{
-            boxShadow: 'var(--dropdown-menu-blur)',
-            backgroundColor: 'var(--dropdown-menu-background)',
-            border: 'var(--dropdown-menu-border)',
-            borderRadius: 'var(--dropdown-menu-border-radius)',
-          }}
+          className={classes([
+            'PreferencesMenu__Jobs__characterMenu',
+            dragging !== -1 && 'PreferencesMenu__Jobs__characterMenu--hidden',
+          ])}
           width="75%"
         >
           <Stack vertical p={1}>
@@ -478,7 +476,11 @@ function CharacterSection(props: CharacterSectionsProps) {
                       <Button
                         draggable
                         color="transparent"
-                        onDragStart={() => setDragging(index)}
+                        onDragStart={() => {
+                          // Deferred so the browser captures the drag image
+                          // before the popup goes invisible
+                          setTimeout(() => setDragging(index), 0);
+                        }}
                         onDragEnd={() => {
                           setDragging(-1);
                           setHoveringOver('');
@@ -514,6 +516,7 @@ export function JobsPage() {
       <Stack>
         <Stack.Item grow>
           <CharacterSection
+            dragging={dragging}
             setDragging={setDragging}
             setHoveringOver={setHoveringOver}
           />

tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss

@@ -111,6 +111,20 @@
     > * {
       flex: 1;
     }
+
+    &__characterMenu {
+      box-shadow: var(--dropdown-menu-blur);
+      background-color: var(--dropdown-menu-background);
+      border: var(--dropdown-menu-border);
+      border-radius: var(--dropdown-menu-border-radius);
+      transition: opacity 0.35s ease-out;
+
+      &--hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
     &__departments {
       &.head {
         background: colors.bg(var(--department-color));