Table UI fix and XLSX library fix

components/Inventory.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from "react";
-import * as XLSX from "xlsx";
+import ExcelJS from "exceljs";
 import { chemicalsApi } from "../lib/api";
 import type { ChemicalInventory } from "../shared/types";
 import { Card } from "./ui/card";
@@ -282,15 +282,19 @@ export function Inventory() {
     URL.revokeObjectURL(url);
   }
 
-  function handleDownloadExcel() {
-    const wsData = [
-      TABLE_COLUMNS.map(c => c.label),
-      ...filtered.map(item => TABLE_COLUMNS.map(c => item[c.key] ?? "")),
-    ];
-    const ws = XLSX.utils.aoa_to_sheet(wsData);
-    const wb = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(wb, ws, "Chemical Inventory");
-    XLSX.writeFile(wb, "chemical_inventory.xlsx");
+  async function handleDownloadExcel() {
+    const wb = new ExcelJS.Workbook();
+    const ws = wb.addWorksheet("Chemical Inventory");
+    ws.addRow(TABLE_COLUMNS.map(c => c.label));
+    filtered.forEach(item => ws.addRow(TABLE_COLUMNS.map(c => item[c.key] ?? "")));
+    const buffer = await wb.xlsx.writeBuffer();
+    const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "chemical_inventory.xlsx";
+    a.click();
+    URL.revokeObjectURL(url);
   }
 
   // ── derived ─────────────────────────────────────────────────────────────
@@ -622,7 +626,7 @@ export function Inventory() {
               </div>
             </div>
           </DialogHeader>
-          <div className="overflow-auto flex-1">
+          <div className="table-scroll flex-1">
             <table className="text-xs border-collapse min-w-max">
               <thead className="sticky top-0 z-10 bg-muted">
                 <tr>