From cf7069b3b239f977a93e6e7fed9c4bf7d9bf9580 Mon Sep 17 00:00:00 2001
From: guarzo <guarzo.eve@gmail.com>
Date: Wed, 12 Feb 2025 14:11:40 -0700
Subject: [PATCH] feat: autosize local character tooltip and increase hover
 target (#165)

---
 .../SolarSystemLocalCounter.module.scss       |  6 ++++
 .../SolarSystemLocalCounter.tsx               | 32 ++++++++-----------
 .../components/LocalCharactersList.tsx        | 18 ++++++++++-
 3 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.module.scss b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.module.scss
index aeb18c45..b0a5b5ed 100644
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.module.scss
@@ -4,6 +4,12 @@
   z-index: 3;
 }
 
+.hoverTarget {
+  padding: 0.5rem;
+  margin: -0.5rem;
+  display: inline-block;
+}
+
 .localCounter {
   mix-blend-mode: screen;
   display: flex;
diff --git a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.tsx b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.tsx
index d26edfb9..88ca1821 100644
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.tsx
@@ -24,13 +24,12 @@ export const LocalCounter = ({ localCounterCharacters, hasUserCharacters, showIc
     return (
       <div
         style={{
-          width: '300px',
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          height: '300px',
+          width: '100%',
+          minWidth: '300px',
+          overflow: 'hidden',
         }}
       >
-        <LocalCharactersList items={localCounterCharacters} itemTemplate={itemTemplate} itemSize={26} />
+        <LocalCharactersList items={localCounterCharacters} itemTemplate={itemTemplate} itemSize={26} autoSize={true} />
       </div>
     );
   }, [localCounterCharacters, itemTemplate]);
@@ -45,19 +44,16 @@ export const LocalCounter = ({ localCounterCharacters, hasUserCharacters, showIc
         [classes.Pathfinder]: theme === AvailableThemes.pathfinder,
       })}
     >
-      <WdTooltipWrapper
-        // @ts-ignore
-        content={pilotTooltipContent}
-        position={TooltipPosition.right}
-        offset={0}
-      >
-        <div
-          className={clsx(classes.localCounter, {
-            [classes.hasUserCharacters]: hasUserCharacters,
-          })}
-        >
-          {showIcon && <i className="pi pi-users" />}
-          <span>{localCounterCharacters.length}</span>
+      <WdTooltipWrapper content={pilotTooltipContent} position={TooltipPosition.right} offset={0} interactive={true}>
+        <div className={clsx(classes.hoverTarget)}>
+          <div
+            className={clsx(classes.localCounter, {
+              [classes.hasUserCharacters]: hasUserCharacters,
+            })}
+          >
+            {showIcon && <i className="pi pi-users" />}
+            <span>{localCounterCharacters.length}</span>
+          </div>
         </div>
       </WdTooltipWrapper>
     </div>
diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersList.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersList.tsx
index 7055ca84..5725f2a9 100644
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersList.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersList.tsx
@@ -3,11 +3,13 @@ import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virt
 import clsx from 'clsx';
 import { CharItemProps } from './types';
 
-type LocalCharactersListProps = {
+export type LocalCharactersListProps = {
   items: Array<CharItemProps>;
   itemSize: number;
   itemTemplate: (char: CharItemProps, options: VirtualScrollerTemplateOptions) => React.ReactNode;
   containerClassName?: string;
+  style?: React.CSSProperties;
+  autoSize?: boolean;
 };
 
 export const LocalCharactersList = ({
@@ -15,7 +17,19 @@ export const LocalCharactersList = ({
   itemSize,
   itemTemplate,
   containerClassName,
+  style = {},
+  autoSize = false,
 }: LocalCharactersListProps) => {
+  const computedHeight = autoSize ? `${Math.max(items.length, 1) * itemSize}px` : style.height || '100%';
+
+  const localStyle: React.CSSProperties = {
+    ...style,
+    height: computedHeight,
+    width: '100%',
+    boxSizing: 'border-box',
+    overflowX: 'hidden',
+  };
+
   return (
     <VirtualScroller
       items={items}
@@ -23,6 +37,8 @@ export const LocalCharactersList = ({
       orientation="vertical"
       className={clsx('w-full h-full', containerClassName)}
       itemTemplate={itemTemplate}
+      autoSize={autoSize}
+      style={localStyle}
     />
   );
 };