From c9cbc8a18c53a64e008666e2a7f8a63f2d2f8645 Mon Sep 17 00:00:00 2001
From: Bloop <13398309+vinylspiders@users.noreply.github.com>
Date: Mon, 13 Jul 2026 22:59:02 -0400
Subject: [PATCH] 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

:cl:
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
/:cl:
---
 .../CharacterPreferences/JobsPage.tsx         | 21 +++++++++++--------
 .../styles/interfaces/PreferencesMenu.scss    | 14 +++++++++++++
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx
index 41ed224eb31..5a614c35f45 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx
+++ b/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}
           />
diff --git a/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss b/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
index 031c9b7f4f0..d3de8a4c217 100644
--- a/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
+++ b/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));