UI – 3 bugs on Software pages (#20098)

## Addresses #19694 

<img width="1100" alt="Screenshot 2024-06-28 at 12 22 02 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/527f3744-b532-4fdb-b43a-f7e10bb62189">
<img width="999" alt="Screenshot 2024-06-28 at 12 15 04 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/407701ba-6d81-43b2-b193-217df1a93698">
<img width="999" alt="Screenshot 2024-06-28 at 12 12 10 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/0e6aa2e3-a190-4db9-9468-d8dc3ad6ddcb">

- [x] Changes file added for user-visible changes in `changes/`,
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

changes/19694-vul-page-bugs

@@ -0,0 +1 @@
+* Fix 3 UI bugs on the Software page

frontend/components/TooltipWrapper/TooltipWrapper.tsx

@@ -32,6 +32,11 @@ interface ITooltipWrapper {
    * @default false
    */
   showArrow?: boolean;
+  /** Corresponds to the react tooltip 5 `positionStrategy` option - see https://react-tooltip.com/docs/options.
+   * Setting as `true` will set the tooltip's `positionStrategy` to `"fixed"`. The default strategy is "absolute".
+   * Do this if you run into issues with `overflow: hidden` on the tooltip parent container
+   * */
+  fixedPositionStrategy?: boolean;
 }
 
 const baseClass = "component__tooltip-wrapper";
@@ -51,6 +56,7 @@ const TooltipWrapper = ({
   clickable = true,
   disableTooltip = false,
   showArrow = false,
+  fixedPositionStrategy = false,
 }: ITooltipWrapper) => {
   const wrapperClassNames = classnames(baseClass, className, {
     "show-arrow": showArrow,
@@ -85,6 +91,7 @@ const TooltipWrapper = ({
           disableStyleInjection
           clickable={clickable}
           offset={tipOffset}
+          positionStrategy={fixedPositionStrategy ? "fixed" : "absolute"}
         >
           {tipContent}
         </ReactTooltip5>

frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilities.tsx

@@ -10,6 +10,7 @@ import {
 } from "services/entities/vulnerabilities";
 
 import TableDataError from "components/DataError";
+import Spinner from "components/Spinner";
 
 import SoftwareVulnerabilitiesTable from "./SoftwareVulnerabilitiesTable";
 
@@ -50,7 +51,7 @@ const SoftwareVulnerabilities = ({
     exploit: showExploitedVulnerabilitiesOnly,
   };
 
-  const { data, isFetching, isError } = useQuery<
+  const { data, isFetching, isLoading, isError } = useQuery<
     IVulnerabilitiesResponse,
     Error,
     IVulnerabilitiesResponse,
@@ -69,6 +70,10 @@ const SoftwareVulnerabilities = ({
     }
   );
 
+  if (isLoading) {
+    return <Spinner />;
+  }
+
   if (isError) {
     return <TableDataError className={`${baseClass}__table-error`} />;
   }

frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilitiesTable/VulnerabilitiesTableConfig.tsx

@@ -144,6 +144,7 @@ const generateTableHeaders = (
                 This data is reported by FIRST.org.
               </>
             }
+            fixedPositionStrategy
           >
             Probability of exploit
           </TooltipWrapper>

frontend/pages/SoftwarePage/components/SoftwareVulnerabilitiesTable/SoftwareVulnerabilitiesTableConfig.tsx

@@ -128,6 +128,7 @@ const generateTableConfig = (
                 This data is reported by FIRST.org.
               </>
             }
+            fixedPositionStrategy
           >
             Probability of exploit
           </TooltipWrapper>