feat: autosize local character tooltip and increase hover target (#165)

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}
     />
   );
 };