From 8e0b8fd7f95a526da4e308bd2843ec8b5d288d98 Mon Sep 17 00:00:00 2001
From: guarzo <guarzo.eve@gmail.com>
Date: Thu, 6 Mar 2025 15:25:29 -0500
Subject: [PATCH] fix [kills]: prevent virtual scroller from showing unless
 needed (#225)

---
 .../SolarSystemNode/SolarSystemKillsCounter.tsx   |  3 ++-
 .../SystemKillsContent.module.scss                | 15 +++++++++++++++
 .../SystemKillsContent/SystemKillsContent.tsx     |  1 +
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemKillsCounter.tsx b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemKillsCounter.tsx
index 2032d777..0c169900 100644
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemKillsCounter.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemKillsCounter.tsx
@@ -38,7 +38,8 @@ export const KillsCounter = ({ killsCount, systemId, className, children, size =
 
   // Calculate height based on number of kills, but ensure a minimum height
   const killsNeededHeight = limitedKills.length * ITEM_HEIGHT;
-  const tooltipHeight = Math.max(MIN_TOOLTIP_HEIGHT, Math.min(killsNeededHeight, 500));
+  // Add a small buffer (10px) to prevent scrollbar from appearing unnecessarily
+  const tooltipHeight = Math.max(MIN_TOOLTIP_HEIGHT, Math.min(killsNeededHeight + 10, 500));
 
   const tooltipContent = (
     <div
diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.module.scss b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.module.scss
index 96e1d246..4a857720 100644
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.module.scss
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.module.scss
@@ -2,11 +2,26 @@
 .scrollerContent {
   overflow-x: hidden;
   overflow-y: auto;
+  padding-right: 8px;
+  padding-left: 8px;
+  height: 100% !important;
 }
 
 // VirtualScroller specific styles that can't be handled with Tailwind
 .VirtualScroller {
   overflow: hidden !important;
+  display: flex !important;
+  flex-direction: column !important;
+  height: 100% !important;
+  
+  // Target this specific VirtualScroller instance
+  &:global(.p-virtualscroller) {
+    height: 100% !important;
+    
+    :global(.p-virtualscroller-content) {
+      height: 100% !important;
+    }
+  }
 }
 
 // Fix for PrimeReact VirtualScroller - these need to be global
diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.tsx
index 0fef9730..9056645f 100644
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.tsx
@@ -52,6 +52,7 @@ export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
   // Define style for the VirtualScroller
   const virtualScrollerStyle: React.CSSProperties = {
     boxSizing: 'border-box',
+    height: '100%', // Use 100% height to fill the container
   };
 
   return (