[MIRROR] Fixes preferences tooltips (#1073)

* Fixes preferences tooltips (#81571) Fixes tooltips rendering under the main panel, could use some automated handling for more complicated nested scenarios. Also gives the panel default background color so the title is actually visible (let me know if this is ugly) ![image](https://github.com/tgstation/tgstation/assets/4047233/448ee2c1-0299-499c-b47e-681f7cb7cbfc) Fixes #80968 * Fixes preferences tooltips --------- Co-authored-by: AnturK <[email protected]>
Fluffy-Frontier · Feb 20, 2024 · adc0b51 · adc0b51
1 parent 2bb2cfd
commit adc0b51
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/tgui/packages/tgui/components/Popper.tsx b/tgui/packages/tgui/components/Popper.tsx
@@ -20,6 +20,10 @@ type OptionalProps = Partial<{
   onClickOutside: () => void;
   /** Where to place the popper relative to the reference element */
   placement: Placement;
+  /** Base z-index of the popper div
+   * @default 5
+   */
+  baseZIndex: number;
 }>;
 
 type Props = RequiredProps & OptionalProps;
@@ -85,7 +89,7 @@ export function Popper(props: PropsWithChildren<Props>) {
             setPopperElement(node);
             popperRef.current = node;
           }}
-          style={{ ...styles.popper, zIndex: 5 }}
+          style={{ ...styles.popper, zIndex: props.baseZIndex ?? 5 }}
           {...attributes.popper}
         >
           {content}

diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx
@@ -111,8 +111,8 @@ const ChoicedSelection = (props: {
 
   return (
     <Box
+      className="ChoicedSelection"
       style={{
-        background: 'white',
         padding: '5px',
 
         height: `${
@@ -281,6 +281,7 @@ const MainFeature = (props: {
       placement="bottom-start"
       isOpen={isOpen}
       onClickOutside={handleClose}
+      baseZIndex={1} // Below the default popper at z 2
       content={
         <ChoicedSelection
           name={catalog.name}

diff --git a/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss b/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use '../components/Button.scss';
 @use '../colors.scss';
+@use '../base.scss';
 
 $department_map: (
   'Assistant': colors.$grey,
@@ -16,6 +17,10 @@ $department_map: (
   'Silicon': colors.$pink,
 );
 
+.ChoicedSelection {
+  background-color: base.$color-bg;
+}
+
 .PreferencesMenu {
   &__Antags {
     &__antagSelection {