fix: make WAF events table fit in viewport

- DataTable: add overflowX auto to TableContainer + minWidth 600
- WAF events: tighten column widths (Time 150, Host 150, IP 140,
  Method 60), add ellipsis+tooltip on Host column, let Rule Message
  expand to fill remaining space

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/ui/DataTable.tsx

@@ -73,8 +73,8 @@ export function DataTable<T>({
 }: DataTableProps<T>) {
   return (
     <Box>
-      <TableContainer component={Card} variant="outlined">
-        <Table>
+      <TableContainer component={Card} variant="outlined" sx={{ overflowX: "auto" }}>
+        <Table sx={{ minWidth: 600 }}>
           <TableHead>
             <TableRow>
               {columns.map((col) => (