const NoImpactFunnelChart = ({ noImpactRules }) => {
  if (!noImpactRules || noImpactRules.length === 0)
    return (
      <div
        style={{
          padding: 20,
          fontStyle: "italic",
          color: "#666",
          textAlign: "center",
          backgroundColor: "#fafafa",
          borderRadius: 8,
          border: "1px solid #ddd",
          maxWidth: 600,
          margin: "auto",
          boxShadow: "0 2px 5px rgba(0,0,0,0.05)",
        }}
      >
        No No Impact rules to display
      </div>
    );

  const rowHeightPx = 40;
  const visibleRows = 10;

  // Count commas and add 1 to get days in impactDiffWithDate
  const getInactiveDays = (impactDiffWithDate) => {
    if (!impactDiffWithDate) return 0;
    return (impactDiffWithDate.match(/,/g) || []).length + 1;
  };

  return (
    <div
      style={{
        maxWidth: 700,
        // margin: "20px auto",
        // boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
        // borderRadius: 12,
        overflow: "hidden",
        fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
        // border: "1px solid #e0e0e0",
      }}
    >
      <div
        style={{
          maxHeight: rowHeightPx * visibleRows,
          overflowX: "hidden",
          backgroundColor: "#fff",
        }}
      >
        <table
          style={{
            width: "100%",
            borderCollapse: "separate",
            borderSpacing: 0,
            minWidth: 500,
          }}
        >
         <thead>
  <tr>
    <th
      style={{
        backgroundColor: "#f5f9ff",
        color: "#2a3f66",
        padding: "12px 15px",
        textAlign: "left",
        fontWeight: "700",
        borderBottom: "2px solid #c4d1f5",
        position: "sticky",
        top: 0,
        zIndex: 2,
        maxWidth: 100, // reduced width here
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      }}
    >
      Rule Name
    </th>
    <th
      style={{
        backgroundColor: "#f5f9ff",
        color: "#2a3f66",
        padding: "12px 40px",
        textAlign: "center",
        fontWeight: "700",
        borderBottom: "2px solid #c4d1f5",
        position: "sticky",
        top: 0,
        zIndex: 2,
        width: 120,
      }}
    >
      Days Inactive
    </th>
  </tr>
</thead>

<tbody>
  {noImpactRules.map((rule, idx) => {
    const inactiveDays = getInactiveDays(rule.impactDiffWithDate);
    const tooltipContent = `${rule.name || "N/A"}\nInactive for ${inactiveDays} day${inactiveDays > 1 ? "s" : ""}`;

    return (
      <tr
        key={rule.id || idx}
        style={{
          height: rowHeightPx,
          backgroundColor: idx % 2 === 0 ? "#fff" : "#f9fbff",
          transition: "background-color 0.3s ease",
          cursor: "default",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.backgroundColor = "#d6e4ff";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.backgroundColor = idx % 2 === 0 ? "#fff" : "#f9fbff";
        }}
      >
        <td
          style={{
            borderBottom: "1px solid #e5e9f2",
            padding: "10px 15px",
            color: "#2d3a5a",
            fontSize: 15,
            fontWeight: "500",
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
            maxWidth: 300, // matching reduced width here
          }}
          title={tooltipContent}
        >
          {rule.name || "N/A"}
        </td>
        <td
          style={{
            borderBottom: "1px solid #e5e9f2",
            padding: "10px 15px",
            textAlign: "center",
            color: "#4a6dff",
            fontWeight: "600",
            fontSize: 15,
            userSelect: "none",
          }}
          title={tooltipContent}
        >
          {inactiveDays}
        </td>
      </tr>
    );
  })}
</tbody>
        </table>
      </div>
    </div>
  );
};


in this, for Y scroll bar use glass morphism scroll ar