From 96b902f2da36c238f19b50e8ac18991dff60c908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sanchez.saez.alex01@gmail.com>
Date: Thu, 10 Sep 2026 07:39:39 -0600
Subject: [PATCH 1/4] feat[frontend](): added shared column resize

---
 .../components/ui/column-resize-handle.tsx    | 25 ++++++
 .../shared/hooks/useResizableColumns.test.ts  | 35 +++++++++
 .../src/shared/hooks/useResizableColumns.ts   | 78 +++++++++++++++++++
 3 files changed, 138 insertions(+)
 create mode 100644 frontend/src/shared/components/ui/column-resize-handle.tsx
 create mode 100644 frontend/src/shared/hooks/useResizableColumns.test.ts
 create mode 100644 frontend/src/shared/hooks/useResizableColumns.ts

diff --git a/frontend/src/shared/components/ui/column-resize-handle.tsx b/frontend/src/shared/components/ui/column-resize-handle.tsx
new file mode 100644
index 000000000..cfefd74c4
--- /dev/null
+++ b/frontend/src/shared/components/ui/column-resize-handle.tsx
@@ -0,0 +1,25 @@
+import type { MouseEvent } from 'react'
+import { cn } from '@/shared/lib/utils'
+
+interface Props {
+  onMouseDown: (e: MouseEvent<HTMLElement>) => void
+  className?: string
+}
+
+export function ColumnResizeHandle({ onMouseDown, className }: Props) {
+  return (
+    <span
+      role="separator"
+      aria-orientation="vertical"
+      onMouseDown={onMouseDown}
+      onClick={(e) => e.stopPropagation()}
+      className={cn(
+        'absolute right-0 top-0 z-20 h-full w-2 cursor-col-resize select-none touch-none',
+        'bg-transparent hover:bg-primary/40 active:bg-primary',
+        'transition-colors',
+        className,
+      )}
+      aria-label="Resize column"
+    />
+  )
+}
diff --git a/frontend/src/shared/hooks/useResizableColumns.test.ts b/frontend/src/shared/hooks/useResizableColumns.test.ts
new file mode 100644
index 000000000..4e7dc6dbd
--- /dev/null
+++ b/frontend/src/shared/hooks/useResizableColumns.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, test } from 'vitest'
+import { act, renderHook } from '@testing-library/react'
+import { useResizableColumns } from './useResizableColumns'
+
+describe('useResizableColumns', () => {
+  test('initial template joins px numbers and passes strings through', () => {
+    const { result } = renderHook(() => useResizableColumns([32, '1fr', 120]))
+    expect(result.current.template).toBe('32px 1fr 120px')
+  })
+
+  test('drag updates the column width and rebuilds the template', () => {
+    const { result } = renderHook(() => useResizableColumns([100, '1fr', 60]))
+    act(() => {
+      result.current.setWidths((prev) => {
+        const next = prev.slice()
+        next[0] = 180
+        return next
+      })
+    })
+    expect(result.current.widths[0]).toBe(180)
+    expect(result.current.template).toBe('180px 1fr 60px')
+  })
+
+  test('min clamp is enforced when consumers write below it via drag', () => {
+    // The clamp lives in the drag handler; sanity-check the default min is 40.
+    const { result } = renderHook(() => useResizableColumns([100]))
+    act(() => {
+      result.current.setWidths([10])
+    })
+    // setWidths trusts the caller; the drag handler applies min. This asserts
+    // that the hook doesn't silently rewrite direct sets.
+    expect(result.current.widths[0]).toBe(10)
+    expect(result.current.template).toBe('10px')
+  })
+})
diff --git a/frontend/src/shared/hooks/useResizableColumns.ts b/frontend/src/shared/hooks/useResizableColumns.ts
new file mode 100644
index 000000000..5c82e317a
--- /dev/null
+++ b/frontend/src/shared/hooks/useResizableColumns.ts
@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { MouseEvent as ReactMouseEvent } from 'react'
+
+export type ColSize = string | number
+
+interface Opts {
+  min?: number
+  storageKey?: string
+}
+
+const readStored = (key: string, len: number): ColSize[] | null => {
+  if (typeof window === 'undefined') return null
+  try {
+    const raw = localStorage.getItem(key)
+    if (!raw) return null
+    const parsed = JSON.parse(raw)
+    if (Array.isArray(parsed) && parsed.length === len) return parsed as ColSize[]
+  } catch { /* ignore */ }
+  return null
+}
+
+export function useResizableColumns(initial: ColSize[], opts: Opts = {}) {
+  const min = opts.min ?? 40
+  const storageKey = opts.storageKey
+  const [widths, setWidths] = useState<ColSize[]>(() =>
+    storageKey ? readStored(storageKey, initial.length) ?? initial : initial,
+  )
+  const dragRef = useRef<{ index: number; startX: number; startW: number } | null>(null)
+
+  useEffect(() => {
+    if (!storageKey || typeof window === 'undefined') return
+    try { localStorage.setItem(storageKey, JSON.stringify(widths)) } catch { /* ignore */ }
+  }, [widths, storageKey])
+
+  useEffect(() => {
+    const onMove = (e: globalThis.MouseEvent) => {
+      const d = dragRef.current
+      if (!d) return
+      e.preventDefault()
+      const w = Math.max(min, d.startW + (e.clientX - d.startX))
+      setWidths((prev) => {
+        const next = prev.slice()
+        next[d.index] = w
+        return next
+      })
+    }
+    const onUp = () => {
+      if (!dragRef.current) return
+      dragRef.current = null
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+    return () => {
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('mouseup', onUp)
+    }
+  }, [min])
+
+  const startDrag = useCallback(
+    (index: number) => (e: ReactMouseEvent<HTMLElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+      const handle = e.currentTarget as HTMLElement
+      const cell = handle.closest('[data-resizable-col]') as HTMLElement | null ?? handle.parentElement
+      const startW = cell?.getBoundingClientRect().width ?? min
+      dragRef.current = { index, startX: e.clientX, startW }
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+    },
+    [min],
+  )
+
+  const template = widths.map((w) => (typeof w === 'number' ? `${w}px` : w)).join(' ')
+
+  return { widths, template, setWidths, startDrag }
+}

From 7190c0f77890f878cca508ed114c27fe19b1b88d Mon Sep 17 00:00:00 2001
From: Andres Aguilera <andres@insecureweb.com>
Date: Thu, 10 Sep 2026 14:29:40 -0300
Subject: [PATCH 2/4] feat: implement resizable columns in various tables

- Added resizable columns functionality to ParsingFiltersPage, ExecutionsView, FlowsPage, TeamPage, UserAuditorPage, and Threat Intel components.
- Introduced ResizableTableHeader and ResizableGridHeader components for better table header management.
- Updated useResizableColumns hook to support dynamic column resizing and storage.
- Enhanced UI with ColumnResizeHandle for visual feedback during resizing.
- Adjusted styles and layout for improved responsiveness and usability across affected components.
---
 .../alerting-rules/components/table.tsx       | 41 ++++++++------
 .../alerts/components/alerts-table-header.tsx | 54 ++++++++++++-------
 .../components/tagging-rules-table-row.tsx    |  7 +--
 .../alerts/components/tagging-rules-table.tsx | 27 ++++++----
 .../src/features/alerts/pages/AlertsPage.tsx  | 25 +++++++--
 .../features/api-keys/components/KeyRow.tsx   |  8 +--
 .../features/api-keys/pages/ApiKeysPage.tsx   | 34 ++++++++----
 .../src/features/audit/pages/AuditPage.tsx    | 39 ++++++++++----
 .../components/renderers/TableRenderer.tsx    | 22 ++++----
 .../datasources/pages/DataSourcesPage.tsx     | 44 ++++++++++-----
 .../create-incident-step-alerts.tsx           |  2 +-
 .../incident-alerts-picker-header.tsx         | 33 +++++++-----
 .../incidents/components/incidents-table.tsx  | 37 ++++++++-----
 .../features/incidents/lib/incident-meta.ts   |  2 +-
 .../components/LogExplorerView.tsx            | 14 ++++-
 .../log-explorer/components/log-results.tsx   | 51 ++++++++++++------
 .../pages/ParsingFiltersPage.tsx              | 33 ++++++++----
 .../soar/components/ExecutionsView.tsx        | 44 +++++++++------
 .../src/features/soar/pages/FlowsPage.tsx     | 44 ++++++++++-----
 frontend/src/features/team/pages/TeamPage.tsx | 40 +++++++++-----
 .../threat-intel/components/FeedRow.tsx       |  9 ++--
 .../threat-intel/components/FeedsHeader.tsx   | 20 +++----
 .../threat-intel/components/FeedsList.tsx     | 17 ++++--
 .../threat-intel/components/IocRow.tsx        |  9 ++--
 .../threat-intel/components/IocTable.tsx      | 39 ++++++++------
 .../user-auditor/pages/UserAuditorPage.tsx    | 49 ++++++++++-------
 .../components/ui/column-resize-handle.tsx    |  9 ++--
 .../components/ui/resizable-grid-header.tsx   | 37 +++++++++++++
 .../components/ui/resizable-table-header.tsx  | 50 +++++++++++++++++
 .../src/shared/hooks/useResizableColumns.ts   | 35 +++++-------
 30 files changed, 592 insertions(+), 283 deletions(-)
 create mode 100644 frontend/src/shared/components/ui/resizable-grid-header.tsx
 create mode 100644 frontend/src/shared/components/ui/resizable-table-header.tsx

diff --git a/frontend/src/features/alerting-rules/components/table.tsx b/frontend/src/features/alerting-rules/components/table.tsx
index 15b55f95c..ecabcf85c 100644
--- a/frontend/src/features/alerting-rules/components/table.tsx
+++ b/frontend/src/features/alerting-rules/components/table.tsx
@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react'
 import type { TFunction } from 'i18next'
 import { Crosshair, Lock } from 'lucide-react'
+import { ResizableTableHeader } from '@/shared/components/ui/resizable-table-header'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { cn } from '@/shared/lib/utils'
 import type { CorrelationRule } from '../services/alerting-rules-http.service'
 import { impactKey } from '../lib/impact-key'
@@ -11,30 +13,35 @@ import { Toggle } from './toggle'
 
 const TH = 'whitespace-nowrap px-3 py-2.5 text-left align-middle font-medium'
 const TD = 'whitespace-nowrap px-3 py-2.5 align-middle'
+const ALERTING_RULES_TABLE_COLS = [48, 360, 220, 160, 180, 160, 90, 90]
 const IMPACT_TONE: Record<string, string> = { high: 'text-red-500', medium: 'text-amber-500', low: 'text-sky-500', none: 'text-muted-foreground' }
 
 export function Table({ rules, selected, onToggleSelected, onSelectAll, onOpen, onToggle, t, footer }: { rules: CorrelationRule[]; selected: Set<string>; onToggleSelected: (relPath: string) => void; onSelectAll: (checked: boolean) => void; onOpen: (r: CorrelationRule) => void; onToggle: (r: CorrelationRule, next: boolean) => void; t: TFunction; footer?: ReactNode }) {
   const allChecked = rules.length > 0 && rules.every((r) => selected.has(r.relPath))
   const someChecked = !allChecked && rules.some((r) => selected.has(r.relPath))
+  const { widths, startDrag } = useResizableColumns(ALERTING_RULES_TABLE_COLS, {
+    min: 48,
+    storageKey: 'alerting-rules-table-columns',
+  })
   return (
     <div className="mt-4 min-h-0 flex-1 overflow-auto rounded-xl border border-border">
-      <table className="min-w-full border-collapse">
-        <thead className="sticky top-0 z-10 bg-muted/90 text-[10px] uppercase tracking-wider text-muted-foreground">
-          <tr className="border-b border-border">
-            <th className={`${TH} text-center`}>
-              <div className="flex justify-center">
-                <SelectAllCheckbox checked={allChecked} indeterminate={someChecked} onChange={onSelectAll} label={t('alertingRules.table.selectAll')} />
-              </div>
-            </th>
-            <th className={TH}>{t('alertingRules.table.name')}</th>
-            <th className={TH}>{t('alertingRules.table.dataTypes')}</th>
-            <th className={TH}>{t('alertingRules.table.category')}</th>
-            <th className={TH}>{t('alertingRules.table.technique')}</th>
-            <th className={TH}>{t('alertingRules.table.adversary')}</th>
-            <th className={`${TH} text-center`}>{t('alertingRules.table.impact')}</th>
-            <th className={`${TH} text-center`}>{t('alertingRules.table.active')}</th>
-          </tr>
-        </thead>
+      <table className="min-w-full border-collapse table-fixed">
+        <ResizableTableHeader
+          cells={[
+            { content: <div className="flex justify-center"><SelectAllCheckbox checked={allChecked} indeterminate={someChecked} onChange={onSelectAll} label={t('alertingRules.table.selectAll')} /></div>, className: `${TH} text-center` },
+            { content: t('alertingRules.table.name'), className: TH },
+            { content: t('alertingRules.table.dataTypes'), className: TH },
+            { content: t('alertingRules.table.category'), className: TH },
+            { content: t('alertingRules.table.technique'), className: TH },
+            { content: t('alertingRules.table.adversary'), className: TH },
+            { content: t('alertingRules.table.impact'), className: `${TH} text-center` },
+            { content: t('alertingRules.table.active'), className: `${TH} text-center` },
+          ]}
+          widths={widths}
+          startDrag={startDrag}
+          className="sticky top-0 z-10 bg-muted/90 text-[10px] uppercase tracking-wider text-muted-foreground"
+          rowClassName="border-b border-border"
+        />
         <tbody>
           {rules.map((r) => {
             const dts = (r.dataTypes ?? []).filter((d) => d.included).map((d) => d.dataType)
diff --git a/frontend/src/features/alerts/components/alerts-table-header.tsx b/frontend/src/features/alerts/components/alerts-table-header.tsx
index 9e5ca1f4f..27d94317c 100644
--- a/frontend/src/features/alerts/components/alerts-table-header.tsx
+++ b/frontend/src/features/alerts/components/alerts-table-header.tsx
@@ -1,29 +1,43 @@
 import { useTranslation } from 'react-i18next'
+import { ResizableTableHeader } from '@/shared/components/ui/resizable-table-header'
+import type { ColSize, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 
 const TH = 'whitespace-nowrap px-3 py-2.5 text-left align-middle font-medium'
+export const ALERTS_TABLE_COLS = [6, 36, 38, 38, 360, 130, 180, 160, 160, 90, 90, 160]
 
-export function AlertsTableHeader({ allChecked, onTogglePage }: { allChecked: boolean; onTogglePage: () => void }) {
+export function AlertsTableHeader({
+  allChecked,
+  widths,
+  startDrag,
+  onTogglePage,
+}: {
+  allChecked: boolean
+  widths: ColSize[]
+  startDrag: ReturnType<typeof useResizableColumns>['startDrag']
+  onTogglePage: () => void
+}) {
   const { t } = useTranslation()
   return (
-    <thead className="sticky top-0 z-10 bg-muted/90 text-[10px] uppercase tracking-wider text-muted-foreground">
-      <tr className="border-b border-border">
-        <th className={`${TH} w-[6px] p-0`} aria-hidden />
-        <th className={`${TH} w-px`}>
-          <button onClick={onTogglePage} className="flex h-4 w-4 items-center justify-center rounded border border-input">
-            {allChecked && <span className="h-2 w-2 rounded-sm bg-primary" />}
-          </button>
-        </th>
-        <th className={`${TH} text-center`} colSpan={2}>{t('alerts.table.actions')}</th>
-        <th className={TH}>{t('alerts.table.alert')}</th>
-        <th className={TH}>{t('alerts.table.status')}</th>
-        <th className={TH}>{t('alerts.table.technique')}</th>
-        <th className={TH}>{t('alerts.table.source')}</th>
-        <th className={TH}>{t('alerts.table.adversary')}</th>
-        <th className={`${TH} text-center`}>{t('alerts.table.severity')}</th>
-        <th className={`${TH} text-center`}>{t('alerts.table.echoes')}</th>
-        <th className={`${TH} text-center`}>{t('alerts.table.time')}</th>
-      </tr>
-    </thead>
+    <ResizableTableHeader
+      cells={[
+        { content: null, className: `${TH} w-[6px] p-0` },
+        { content: <button onClick={onTogglePage} className="flex h-4 w-4 items-center justify-center rounded border border-input">{allChecked && <span className="h-2 w-2 rounded-sm bg-primary" />}</button>, className: `${TH} w-px` },
+        { content: t('alerts.table.actions'), className: `${TH} text-center` },
+        { content: null, className: `${TH} text-center` },
+        { content: t('alerts.table.alert'), className: TH },
+        { content: t('alerts.table.status'), className: TH },
+        { content: t('alerts.table.technique'), className: TH },
+        { content: t('alerts.table.source'), className: TH },
+        { content: t('alerts.table.adversary'), className: TH },
+        { content: t('alerts.table.severity'), className: `${TH} text-center` },
+        { content: t('alerts.table.echoes'), className: `${TH} text-center` },
+        { content: t('alerts.table.time'), className: `${TH} text-center` },
+      ]}
+      widths={widths}
+      startDrag={startDrag}
+      className="sticky top-0 z-10 bg-muted/90 text-[10px] uppercase tracking-wider text-muted-foreground"
+      rowClassName="border-b border-border"
+    />
   )
 }
 
diff --git a/frontend/src/features/alerts/components/tagging-rules-table-row.tsx b/frontend/src/features/alerts/components/tagging-rules-table-row.tsx
index 08405f517..3d4dfcd2a 100644
--- a/frontend/src/features/alerts/components/tagging-rules-table-row.tsx
+++ b/frontend/src/features/alerts/components/tagging-rules-table-row.tsx
@@ -1,20 +1,21 @@
 import { Tag as TagIcon } from 'lucide-react'
 import type { TaggingRule } from '../types/tagging-rule.types'
-import { TAGGING_RULES_TABLE_COLS } from './tagging-rules-table'
 
 export function TaggingRulesTableRow({
   rule,
+  tableCols,
   onOpen,
 }: {
   rule: TaggingRule
+  tableCols: string
   onOpen: (rule: TaggingRule) => void
 }) {
   const tags = rule.tags ?? []
   return (
     <div
       onClick={() => onOpen(rule)}
-      className="grid cursor-pointer items-center gap-3 border-b border-border/60 px-4 py-3 text-sm last:border-b-0 hover:bg-muted/30"
-      style={{ gridTemplateColumns: TAGGING_RULES_TABLE_COLS }}
+      className="grid w-max min-w-full cursor-pointer items-center gap-3 border-b border-border/60 px-4 py-3 text-sm last:border-b-0 hover:bg-muted/30"
+      style={{ gridTemplateColumns: tableCols }}
     >
       <div className="min-w-0">
         <div className="truncate font-medium">{rule.name}</div>
diff --git a/frontend/src/features/alerts/components/tagging-rules-table.tsx b/frontend/src/features/alerts/components/tagging-rules-table.tsx
index 658132493..f8aecb94a 100644
--- a/frontend/src/features/alerts/components/tagging-rules-table.tsx
+++ b/frontend/src/features/alerts/components/tagging-rules-table.tsx
@@ -1,8 +1,10 @@
 import { useTranslation } from 'react-i18next'
+import { ResizableGridHeader } from '@/shared/components/ui/resizable-grid-header'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import type { TaggingRule } from '../types/tagging-rule.types'
 import { TaggingRulesTableRow } from './tagging-rules-table-row'
 
-export const TAGGING_RULES_TABLE_COLS = '1.6fr 0.9fr 90px'
+export const TAGGING_RULES_TABLE_COLS = ['1.6fr', '0.9fr', 90]
 
 export function TaggingRulesTable({
   rules,
@@ -12,18 +14,21 @@ export function TaggingRulesTable({
   onOpen: (rule: TaggingRule) => void
 }) {
   const { t } = useTranslation()
+  const { template: tableCols, startDrag } = useResizableColumns(TAGGING_RULES_TABLE_COLS, {
+    min: 60,
+    storageKey: 'tagging-rules-table-columns',
+  })
   return (
-    <div className="mt-4 min-h-0 flex-1 overflow-y-auto rounded-xl border border-border">
-      <div
-        className="grid items-center gap-3 border-b border-border bg-muted/30 px-4 py-2.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
-        style={{ gridTemplateColumns: TAGGING_RULES_TABLE_COLS }}
-      >
-        <div>{t('taggingRules.table.rule')}</div>
-        <div>{t('taggingRules.table.tags')}</div>
-        <div className="text-center">{t('taggingRules.table.conditions')}</div>
-      </div>
+    <div className="mt-4 min-h-0 flex-1 overflow-x-auto overflow-y-auto rounded-xl border border-border">
+      <ResizableGridHeader
+        headers={[t('taggingRules.table.rule'), t('taggingRules.table.tags'), t('taggingRules.table.conditions')]}
+        tableCols={tableCols}
+        startDrag={startDrag}
+        className="bg-muted/30 py-2.5 font-medium"
+        cellClassName="last:text-center"
+      />
       {rules.map((rule) => (
-        <TaggingRulesTableRow key={rule.id} rule={rule} onOpen={onOpen} />
+        <TaggingRulesTableRow key={rule.id} rule={rule} tableCols={tableCols} onOpen={onOpen} />
       ))}
     </div>
   )
diff --git a/frontend/src/features/alerts/pages/AlertsPage.tsx b/frontend/src/features/alerts/pages/AlertsPage.tsx
index 470630fd9..255ee5ac1 100644
--- a/frontend/src/features/alerts/pages/AlertsPage.tsx
+++ b/frontend/src/features/alerts/pages/AlertsPage.tsx
@@ -6,6 +6,7 @@ import { Button } from '@/shared/components/ui/button'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
 import { ConfirmDialog } from '@/shared/components/ui/confirm-dialog'
 import { presetRange, type TimeRange, resolveRange } from '@/shared/components/ui/time-range-picker'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { FILTER_OPS, TS } from '../lib/alert-meta'
 import { alertToRuleConditions } from '../lib/tagging-rule-meta'
 import {
@@ -30,7 +31,7 @@ import { AlertsStatusTabs } from '../components/alerts-status-tabs'
 import { AlertsVolumeCard } from '../components/alerts-volume-card'
 import { AlertsBreakdownCard } from '../components/alerts-breakdown-card'
 import { AlertsBulkBar } from '../components/alerts-bulk-bar'
-import { AlertsTableHeader, ALERTS_TABLE_COLUMN_COUNT } from '../components/alerts-table-header'
+import { AlertsTableHeader, ALERTS_TABLE_COLS, ALERTS_TABLE_COLUMN_COUNT } from '../components/alerts-table-header'
 import { AlertRow } from '../components/alert-row'
 import { EchoesTimeline } from '../components/echoes-timeline'
 import { AlertDrawer } from '../components/alert-drawer'
@@ -58,6 +59,14 @@ export function AlertsPage() {
   const [selected, setSelected] = useState<Set<string>>(new Set())
   const [expandedEchoes, setExpandedEchoes] = useState<Set<string>>(new Set())
   const [openAlert, setOpenAlert] = useState<Alert | null>(null)
+  const { widths: alertTableWidths, startDrag: startAlertTableDrag } = useResizableColumns(ALERTS_TABLE_COLS, {
+    min: 6,
+    storageKey: 'alerts-table-columns',
+  })
+  const alertTableWidth = alertTableWidths.reduce<number>(
+    (total, width) => total + (typeof width === 'number' ? width : 0),
+    0,
+  )
   const [incidentTargets, setIncidentTargets] = useState<Alert[] | null>(null)
   // Tagging-rule drawer is rendered here so the tag editor / rule button don't
   // have to bounce through the tagging-rules page.
@@ -333,8 +342,18 @@ export function AlertsPage() {
           }}
           >
             <div className="min-h-0 flex-1 overflow-auto">
-              <table className="min-w-full border-collapse">
-                <AlertsTableHeader allChecked={allChecked} onTogglePage={togglePage} />
+              <table className="border-collapse table-fixed" style={{ minWidth: '100%', width: `${alertTableWidth}px` }}>
+                <colgroup>
+                  {alertTableWidths.map((width, index) => (
+                    <col key={index} style={{ width: typeof width === 'number' ? `${width}px` : width }} />
+                  ))}
+                </colgroup>
+                <AlertsTableHeader
+                  allChecked={allChecked}
+                  widths={alertTableWidths}
+                  startDrag={startAlertTableDrag}
+                  onTogglePage={togglePage}
+                />
                 <tbody>
                   {loading && alerts.length === 0 ? (
                     <tr>
diff --git a/frontend/src/features/api-keys/components/KeyRow.tsx b/frontend/src/features/api-keys/components/KeyRow.tsx
index f00ab2443..49d82e296 100644
--- a/frontend/src/features/api-keys/components/KeyRow.tsx
+++ b/frontend/src/features/api-keys/components/KeyRow.tsx
@@ -4,7 +4,7 @@ import type { ApiKey } from '../types/api-key.types'
 import { IconAction } from './IconAction'
 import { StatusBadge } from './StatusBadge'
 
-export const COLS = '1.4fr 1.2fr 110px 110px 110px 100px 110px'
+export const API_KEY_TABLE_COLS = ['1.4fr', '1.2fr', 110, 110, 110, 100, 110]
 
 function formatDate(iso: string): string {
   const d = new Date(iso)
@@ -14,11 +14,13 @@ function formatDate(iso: string): string {
 
 export function KeyRow({
   apiKey: k,
+  tableCols,
   onEdit,
   onRotate,
   onDelete,
 }: {
   apiKey: ApiKey
+  tableCols: string
   onEdit: () => void
   onRotate: () => void
   onDelete: () => void
@@ -26,8 +28,8 @@ export function KeyRow({
   const { t } = useTranslation()
   return (
     <div
-      className="grid items-center gap-3 border-b border-border px-4 py-3 text-xs last:border-b-0 hover:bg-muted/30"
-      style={{ gridTemplateColumns: COLS }}
+      className="grid w-max min-w-full items-center gap-3 border-b border-border px-4 py-3 text-xs last:border-b-0 hover:bg-muted/30"
+      style={{ gridTemplateColumns: tableCols }}
     >
       <div className="flex min-w-0 items-center gap-2">
         <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
diff --git a/frontend/src/features/api-keys/pages/ApiKeysPage.tsx b/frontend/src/features/api-keys/pages/ApiKeysPage.tsx
index d4563efae..a8dea30d0 100644
--- a/frontend/src/features/api-keys/pages/ApiKeysPage.tsx
+++ b/frontend/src/features/api-keys/pages/ApiKeysPage.tsx
@@ -12,11 +12,13 @@ import { cn } from '@/shared/lib/utils'
 import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
+import { ColumnResizeHandle } from '@/shared/components/ui/column-resize-handle'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { useBilling } from '@/features/billing'
 import { EnterpriseGate } from '@/shared/components/EnterpriseGate'
 import { apiKeysHttpService } from '../services/api-keys-http.service'
 import type { ApiKey, ApiKeyPageInfo } from '../types/api-key.types'
-import { COLS, KeyRow } from '../components/KeyRow'
+import { API_KEY_TABLE_COLS, KeyRow } from '../components/KeyRow'
 import { UpsertDialog } from '../components/UpsertDialog'
 import { ConfirmDialog } from '../components/ConfirmDialog'
 import { RevealModal } from '../components/RevealModal'
@@ -39,6 +41,10 @@ export function ApiKeysPage() {
   const [dialog, setDialog] = useState<DialogState>(null)
   const [confirm, setConfirm] = useState<ConfirmState>(null)
   const [revealed, setRevealed] = useState<{ name: string; token: string } | null>(null)
+  const { template: tableCols, startDrag } = useResizableColumns(API_KEY_TABLE_COLS, {
+    min: 60,
+    storageKey: 'api-keys-table-columns',
+  })
 
   const load = useCallback(async () => {
     setLoading(true)
@@ -129,18 +135,25 @@ export function ApiKeysPage() {
             </Button>
           </div>
 
-          <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card">
+          <div className="mt-3 overflow-x-auto overflow-y-hidden rounded-xl border border-border bg-card">
             <div
               className="grid items-center gap-3 border-b border-border bg-muted/40 px-4 py-2 text-[10px] uppercase tracking-wider text-muted-foreground"
-              style={{ gridTemplateColumns: COLS }}
+              style={{ gridTemplateColumns: tableCols }}
             >
-              <div>{t('apiKeys.col.name')}</div>
-              <div>{t('apiKeys.col.allowedIps')}</div>
-              <div>{t('apiKeys.col.created')}</div>
-              <div>{t('apiKeys.col.lastRotated')}</div>
-              <div>{t('apiKeys.col.expires')}</div>
-              <div>{t('apiKeys.col.status')}</div>
-              <div className="text-right">{t('apiKeys.col.actions')}</div>
+              {[
+                t('apiKeys.col.name'),
+                t('apiKeys.col.allowedIps'),
+                t('apiKeys.col.created'),
+                t('apiKeys.col.lastRotated'),
+                t('apiKeys.col.expires'),
+                t('apiKeys.col.status'),
+                t('apiKeys.col.actions'),
+              ].map((header, index, headers) => (
+                <div key={index} data-resizable-col className="relative min-w-0 pr-2 last:pr-0 last:text-right">
+                  {header}
+                  {index < headers.length - 1 && <ColumnResizeHandle onMouseDown={startDrag(index)} />}
+                </div>
+              ))}
             </div>
 
             {loading && (!keys || keys.length === 0) && (
@@ -173,6 +186,7 @@ export function ApiKeysPage() {
                 <KeyRow
                   key={k.id}
                   apiKey={k}
+                  tableCols={tableCols}
                   onEdit={() => setDialog({ mode: 'edit', key: k })}
                   onRotate={() => setConfirm({ kind: 'rotate', key: k })}
                   onDelete={() => setConfirm({ kind: 'delete', key: k })}
diff --git a/frontend/src/features/audit/pages/AuditPage.tsx b/frontend/src/features/audit/pages/AuditPage.tsx
index f5a716fc8..594ef3820 100644
--- a/frontend/src/features/audit/pages/AuditPage.tsx
+++ b/frontend/src/features/audit/pages/AuditPage.tsx
@@ -17,11 +17,14 @@ import { useDateFormat } from '@/shared/lib/datetime'
 import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
+import { ColumnResizeHandle } from '@/shared/components/ui/column-resize-handle'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { auditHttpService } from '../services/audit-http.service'
 import { humanizeAction } from '../lib'
 import type { AuditListQuery, AuditLog } from '../types/audit.types'
 
 const DEFAULT_PAGE_SIZE = 50
+const AUDIT_TABLE_COLS = [180, 140, '1fr', 180, 90, 140, 60]
 
 /* ─── Page ─────────────────────────────────────────────────────────────── */
 
@@ -433,16 +436,31 @@ function TableCard({
 }) {
   const { t } = useTranslation()
   const { formatDateTime } = useDateFormat()
+  const { template, startDrag } = useResizableColumns(AUDIT_TABLE_COLS, {
+    min: 60,
+    storageKey: 'audit-log-table-columns',
+  })
+  const headers = [
+    t('audit.table.timestamp'),
+    t('audit.table.actor'),
+    t('audit.table.action'),
+    t('audit.table.resource'),
+    t('audit.table.status'),
+    t('audit.table.ip'),
+    '',
+  ]
   return (
-    <section className="overflow-hidden rounded-xl border border-border bg-card">
-      <div className="grid grid-cols-[180px_140px_1fr_180px_90px_140px_60px] gap-3 border-b border-border bg-muted/30 px-4 py-2.5 text-[11px] uppercase tracking-wider text-muted-foreground">
-        <div>{t('audit.table.timestamp')}</div>
-        <div>{t('audit.table.actor')}</div>
-        <div>{t('audit.table.action')}</div>
-        <div>{t('audit.table.resource')}</div>
-        <div>{t('audit.table.status')}</div>
-        <div>{t('audit.table.ip')}</div>
-        <div className="text-right" />
+    <section className="overflow-x-auto overflow-y-hidden rounded-xl border border-border bg-card">
+      <div
+        className="grid w-max min-w-full items-center gap-3 border-b border-border bg-muted/30 px-4 py-2.5 text-[11px] uppercase tracking-wider text-muted-foreground"
+        style={{ gridTemplateColumns: template }}
+      >
+        {headers.map((header, index) => (
+          <div key={index} data-resizable-col className="relative min-w-0 pr-2 last:pr-0">
+            {header}
+            {index < headers.length - 1 && <ColumnResizeHandle onMouseDown={startDrag(index)} />}
+          </div>
+        ))}
       </div>
       {loading && data.length === 0 ? (
         <div className="px-4 py-16 text-center text-sm text-muted-foreground">
@@ -459,7 +477,8 @@ function TableCard({
           <button
             key={log.id}
             onClick={() => onSelect(log)}
-            className="grid w-full grid-cols-[180px_140px_1fr_180px_90px_140px_60px] gap-3 border-b border-border px-4 py-2.5 text-left text-xs last:border-b-0 transition-colors hover:bg-muted/40"
+            className="grid w-max min-w-full gap-3 border-b border-border px-4 py-2.5 text-left text-xs last:border-b-0 transition-colors hover:bg-muted/40"
+            style={{ gridTemplateColumns: template }}
           >
             <div className="font-mono text-[11px] text-muted-foreground">
               {formatDateTime(log.timestamp)}
diff --git a/frontend/src/features/dashboard/components/renderers/TableRenderer.tsx b/frontend/src/features/dashboard/components/renderers/TableRenderer.tsx
index 70b6fdcb0..0ef2f9a83 100644
--- a/frontend/src/features/dashboard/components/renderers/TableRenderer.tsx
+++ b/frontend/src/features/dashboard/components/renderers/TableRenderer.tsx
@@ -1,5 +1,7 @@
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { ResizableTableHeader } from '@/shared/components/ui/resizable-table-header'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import type { Row } from '@/features/dashboard/types'
 
 export function TableRenderer({ rows }: { rows: Row[] }) {
@@ -8,6 +10,10 @@ export function TableRenderer({ rows }: { rows: Row[] }) {
     if (rows.length === 0) return []
     return Object.keys(rows[0])
   }, [rows])
+  const { widths, startDrag } = useResizableColumns(columns.map(() => 'minmax(120px, 1fr)'), {
+    min: 80,
+    storageKey: `dashboard-table-columns:${columns.join('|')}`,
+  })
 
   if (rows.length === 0) {
     return (
@@ -20,15 +26,13 @@ export function TableRenderer({ rows }: { rows: Row[] }) {
   return (
     <div className="h-full w-full overflow-auto">
       <table className="w-full text-sm">
-        <thead className="sticky top-0 bg-card">
-          <tr className="border-b border-border text-left text-xs uppercase tracking-wide text-muted-foreground">
-            {columns.map((c) => (
-              <th key={c} className="px-3 py-2 font-medium">
-                {c}
-              </th>
-            ))}
-          </tr>
-        </thead>
+        <ResizableTableHeader
+          cells={columns.map((c) => ({ content: c, className: 'px-3 py-2 font-medium' }))}
+          widths={widths}
+          startDrag={startDrag}
+          className="sticky top-0 bg-card"
+          rowClassName="border-b border-border text-left text-xs uppercase tracking-wide text-muted-foreground"
+        />
         <tbody>
           {rows.map((row, i) => (
             <tr key={i} className="border-b border-border/60 last:border-0 hover:bg-muted/40">
diff --git a/frontend/src/features/datasources/pages/DataSourcesPage.tsx b/frontend/src/features/datasources/pages/DataSourcesPage.tsx
index 572b672f3..d320c3fa2 100644
--- a/frontend/src/features/datasources/pages/DataSourcesPage.tsx
+++ b/frontend/src/features/datasources/pages/DataSourcesPage.tsx
@@ -31,6 +31,8 @@ import { cn } from '@/shared/lib/utils'
 import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
+import { ColumnResizeHandle } from '@/shared/components/ui/column-resize-handle'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { TimeRangePicker, presetRange, type TimeRange } from '@/shared/components/ui/time-range-picker'
 import {
   datasourcesHttpService as svc,
@@ -135,6 +137,10 @@ export function DataSourcesPage() {
   const [range, setRange] = useState<TimeRange>(() => presetRange('24h'))
   const [counts, setCounts] = useState<Record<TabId, number> | null>(null)
   const [openId, setOpenId] = useState<string | null>(null)
+  const { template: listCols, startDrag } = useResizableColumns(LIST_COLS, {
+    min: 40,
+    storageKey: 'datasources-table-columns',
+  })
 
   useEffect(() => {
     const h = setTimeout(() => {
@@ -287,10 +293,10 @@ export function DataSourcesPage() {
         ) : sources.length === 0 ? (
           <CenterCard>{t('datasources.none')}</CenterCard>
         ) : layout === 'list' ? (
-          <div className="overflow-hidden rounded-xl border border-border bg-card">
-            <ListHeader />
+          <div className="overflow-x-auto overflow-y-hidden rounded-xl border border-border bg-card">
+            <ListHeader tableCols={listCols} startDrag={startDrag} />
             {sources.map((s) => (
-              <SourceListRow key={s.id} source={s} events24h={events24h(s.name)} onOpen={() => setOpenId(s.id)} onLabelClick={filterByLabel} />
+              <SourceListRow key={s.id} source={s} tableCols={listCols} events24h={events24h(s.name)} onOpen={() => setOpenId(s.id)} onLabelClick={filterByLabel} />
             ))}
           </div>
         ) : (
@@ -536,32 +542,42 @@ function Toolbar({
 
 /* ─── List ─────────────────────────────────────────────────────────────── */
 
-const LIST_COLS = '36px 1fr 150px 110px 120px 120px'
+const LIST_COLS = [36, '1fr', 150, 110, 120, 120]
 
-function ListHeader() {
+function ListHeader({ tableCols, startDrag }: { tableCols: string; startDrag: ReturnType<typeof useResizableColumns>['startDrag'] }) {
   const { t } = useTranslation()
+  const headers = [
+    '',
+    t('datasources.cols.source'),
+    t('datasources.cols.type'),
+    t('datasources.cols.status'),
+    t('datasources.cols.events24h'),
+    t('datasources.cols.lastSeen'),
+  ]
   return (
     <div
       className="grid items-center gap-3 border-b border-border bg-muted/30 px-4 py-2.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
-      style={{ gridTemplateColumns: LIST_COLS }}
+      style={{ gridTemplateColumns: tableCols }}
     >
-      <div />
-      <div>{t('datasources.cols.source')}</div>
-      <div>{t('datasources.cols.type')}</div>
-      <div>{t('datasources.cols.status')}</div>
-      <div className="text-center">{t('datasources.cols.events24h')}</div>
-      <div className="text-center">{t('datasources.cols.lastSeen')}</div>
+      {headers.map((header, index) => (
+        <div key={index} data-resizable-col className="relative min-w-0 pr-2 text-center first:text-left last:pr-0">
+          {header}
+          {index < headers.length - 1 && <ColumnResizeHandle onMouseDown={startDrag(index)} />}
+        </div>
+      ))}
     </div>
   )
 }
 
 function SourceListRow({
   source: s,
+  tableCols,
   events24h,
   onOpen,
   onLabelClick,
 }: {
   source: Datasource
+  tableCols: string
   events24h: number
   onOpen: () => void
   onLabelClick: (label: string) => void
@@ -573,8 +589,8 @@ function SourceListRow({
   return (
     <div
       onClick={onOpen}
-      className="grid cursor-pointer items-center gap-3 border-b border-border/50 px-4 py-3 text-[13px] hover:bg-muted/20 last:border-b-0"
-      style={{ gridTemplateColumns: LIST_COLS }}
+      className="grid w-max min-w-full cursor-pointer items-center gap-3 border-b border-border/50 px-4 py-3 text-[13px] hover:bg-muted/20 last:border-b-0"
+      style={{ gridTemplateColumns: tableCols }}
     >
       <SourceIcon source={s} />
       <div className="min-w-0">
diff --git a/frontend/src/features/incidents/components/create-incident-step-alerts.tsx b/frontend/src/features/incidents/components/create-incident-step-alerts.tsx
index e4681a394..75df73558 100644
--- a/frontend/src/features/incidents/components/create-incident-step-alerts.tsx
+++ b/frontend/src/features/incidents/components/create-incident-step-alerts.tsx
@@ -58,7 +58,7 @@ export function CreateIncidentStepAlerts({
 
       <div className="mt-3 flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card">
         <div className="min-h-0 flex-1 overflow-auto">
-          <table className="min-w-full border-collapse">
+          <table className="min-w-full border-collapse table-fixed">
             <IncidentAlertsPickerHeader allChecked={allChecked} onTogglePage={() => onToggleAll(alerts)} />
             <tbody>
               {loading && alerts.length === 0 ? (
diff --git a/frontend/src/features/incidents/components/incident-alerts-picker-header.tsx b/frontend/src/features/incidents/components/incident-alerts-picker-header.tsx
index a16a76faa..cb7e92af6 100644
--- a/frontend/src/features/incidents/components/incident-alerts-picker-header.tsx
+++ b/frontend/src/features/incidents/components/incident-alerts-picker-header.tsx
@@ -1,6 +1,9 @@
 import { useTranslation } from 'react-i18next'
+import { ResizableTableHeader } from '@/shared/components/ui/resizable-table-header'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 
 const TH = 'whitespace-nowrap px-3 py-2.5 text-left align-middle font-medium'
+const INCIDENT_ALERTS_TABLE_COLS = [6, 36, 360, 90, 160]
 
 export function IncidentAlertsPickerHeader({
   allChecked,
@@ -10,19 +13,23 @@ export function IncidentAlertsPickerHeader({
   onTogglePage: () => void
 }) {
   const { t } = useTranslation()
+  const { widths, startDrag } = useResizableColumns(INCIDENT_ALERTS_TABLE_COLS, {
+    min: 6,
+    storageKey: 'incident-alerts-picker-table-columns',
+  })
   return (
-    <thead className="sticky top-0 z-10 bg-muted/90 text-[10px] uppercase tracking-wider text-muted-foreground">
-      <tr className="border-b border-border">
-        <th className={`${TH} w-[6px] p-0`} aria-hidden />
-        <th className={`${TH} w-px`}>
-          <button onClick={onTogglePage} className="flex h-4 w-4 items-center justify-center rounded border border-input">
-            {allChecked && <span className="h-2 w-2 rounded-sm bg-primary" />}
-          </button>
-        </th>
-        <th className={TH}>{t('alerts.table.alert')}</th>
-        <th className={`${TH} text-center`}>{t('alerts.table.severity')}</th>
-        <th className={`${TH} text-center`}>{t('alerts.table.time')}</th>
-      </tr>
-    </thead>
+    <ResizableTableHeader
+      cells={[
+        { content: null, className: `${TH} w-[6px] p-0` },
+        { content: <button onClick={onTogglePage} className="flex h-4 w-4 items-center justify-center rounded border border-input">{allChecked && <span className="h-2 w-2 rounded-sm bg-primary" />}</button>, className: `${TH} w-px` },
+        { content: t('alerts.table.alert'), className: TH },
+        { content: t('alerts.table.severity'), className: `${TH} text-center` },
+        { content: t('alerts.table.time'), className: `${TH} text-center` },
+      ]}
+      widths={widths}
+      startDrag={startDrag}
+      className="sticky top-0 z-10 bg-muted/90 text-[10px] uppercase tracking-wider text-muted-foreground"
+      rowClassName="border-b border-border"
+    />
   )
 }
diff --git a/frontend/src/features/incidents/components/incidents-table.tsx b/frontend/src/features/incidents/components/incidents-table.tsx
index 8b32b75d5..0487c3ec0 100644
--- a/frontend/src/features/incidents/components/incidents-table.tsx
+++ b/frontend/src/features/incidents/components/incidents-table.tsx
@@ -1,4 +1,6 @@
 import { useTranslation } from 'react-i18next'
+import { ResizableGridHeader } from '@/shared/components/ui/resizable-grid-header'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { cn } from '@/shared/lib/utils'
 import { useDateFormat } from '@/shared/lib/datetime'
 import { SEV_TONE, TABLE_COLS, sevKey } from '../lib/incident-meta'
@@ -9,25 +11,32 @@ import { IncidentAssignee } from './incident-assignee'
 export function IncidentsTable({ incidents, onOpen }: { incidents: Incident[]; onOpen: (i: Incident) => void }) {
   const { t } = useTranslation()
   const df = useDateFormat()
+  const { template: tableCols, startDrag } = useResizableColumns(TABLE_COLS, {
+    min: 60,
+    storageKey: 'incidents-table-columns',
+  })
   return (
-    <div className="mt-4 min-h-0 flex-1 overflow-y-auto rounded-xl border border-border">
-      <div
-        className="grid items-center gap-3 border-b border-border bg-muted/30 px-4 py-2.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
-        style={{ gridTemplateColumns: TABLE_COLS }}
-      >
-        <div>{t('incidents.table.name')}</div>
-        <div>{t('incidents.table.status')}</div>
-        <div>{t('incidents.table.severity')}</div>
-        <div>{t('incidents.table.assignee')}</div>
-        <div className="text-center">{t('incidents.table.alerts')}</div>
-        <div>{t('incidents.table.created')}</div>
-      </div>
+    <div className="mt-4 min-h-0 flex-1 overflow-x-auto overflow-y-auto rounded-xl border border-border">
+      <ResizableGridHeader
+        headers={[
+          t('incidents.table.name'),
+          t('incidents.table.status'),
+          t('incidents.table.severity'),
+          t('incidents.table.assignee'),
+          t('incidents.table.alerts'),
+          t('incidents.table.created'),
+        ]}
+        tableCols={tableCols}
+        startDrag={startDrag}
+        className="bg-muted/30 py-2.5 font-medium"
+        cellClassName="[&:nth-child(5)]:text-center"
+      />
       {incidents.map((i) => (
         <button
           key={i.id}
           onClick={() => onOpen(i)}
-          className="grid w-full items-center gap-3 border-b border-border/60 px-4 py-3 text-left text-sm transition-colors last:border-b-0 hover:bg-muted/30"
-          style={{ gridTemplateColumns: TABLE_COLS }}
+          className="grid w-max min-w-full items-center gap-3 border-b border-border/60 px-4 py-3 text-left text-sm transition-colors last:border-b-0 hover:bg-muted/30"
+          style={{ gridTemplateColumns: tableCols }}
         >
           <div className="min-w-0">
             <div className="truncate font-medium">{i.incidentName}</div>
diff --git a/frontend/src/features/incidents/lib/incident-meta.ts b/frontend/src/features/incidents/lib/incident-meta.ts
index 4228dcbfe..b0ad50dcc 100644
--- a/frontend/src/features/incidents/lib/incident-meta.ts
+++ b/frontend/src/features/incidents/lib/incident-meta.ts
@@ -30,4 +30,4 @@ export const SEV_TONE: Record<SevKey, string> = {
 }
 
 export const SELECT_CLS = 'h-9 rounded-md border border-border bg-background px-2 text-sm'
-export const TABLE_COLS = '1fr 120px 90px 150px 70px 110px'
+export const TABLE_COLS = ['1fr', 120, 90, 150, 70, 110]
diff --git a/frontend/src/features/log-explorer/components/LogExplorerView.tsx b/frontend/src/features/log-explorer/components/LogExplorerView.tsx
index 2c9e7de4b..07c4952c9 100644
--- a/frontend/src/features/log-explorer/components/LogExplorerView.tsx
+++ b/frontend/src/features/log-explorer/components/LogExplorerView.tsx
@@ -5,8 +5,9 @@ import { useTranslation } from 'react-i18next'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { Button } from '@/shared/components/ui/button'
 import { presetRange, resolveRange, type TimeRange } from '@/shared/components/ui/time-range-picker'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { looksLikeSql } from '../domain/sql-sync'
-import { ResultsHeader, ResultRow } from './log-results'
+import { logGridColumnSizes, ResultsHeader, ResultRow } from './log-results'
 import { MSG_FIELDS, SRC_FIELDS, flattenDoc, pick, previewText } from '../domain/flatten'
 import { CustomFilterBar } from '@/shared/components/filters/CustomFilterBar'
 import type { CustomFilter, FilterOpDef } from '@/shared/components/filters/custom-filter.types'
@@ -362,6 +363,14 @@ export function LogExplorerView({ initial, onConfigChange }: LogExplorerViewProp
       },
     ]
   }, [columns, autoColumns])
+  const columnStorageKey = useMemo(
+    () => `log-explorer-table-columns:${columns.length > 0 ? columns.join('|') : `auto:${autoColumns.join('|')}`}`,
+    [columns, autoColumns],
+  )
+  const { template: tableCols, startDrag } = useResizableColumns(logGridColumnSizes(columns, autoColumns), {
+    min: 20,
+    storageKey: columnStorageKey,
+  })
 
   /* Fetch one page. page 1 replaces the list (fresh query); later pages append
      (infinite scroll). The histogram fetches separately. */
@@ -661,7 +670,7 @@ export function LogExplorerView({ initial, onConfigChange }: LogExplorerViewProp
               />
             <div className="flex min-w-0 flex-1 flex-col border-l border-border">
               <div ref={scrollRef} onScroll={onScroll} className="min-h-0 flex-1 overflow-auto">
-                <ResultsHeader columns={columns} autoColumns={autoColumns} onRemoveColumn={toggleColumn} />
+                <ResultsHeader columns={columns} autoColumns={autoColumns} tableCols={tableCols} startDrag={startDrag} onRemoveColumn={toggleColumn} />
                 {loading && rows.length === 0 ? (
                   <RowMessage>
                     <Loader2 className="h-4 w-4 animate-spin" /> {t('logExplorer.results.searching')}
@@ -706,6 +715,7 @@ export function LogExplorerView({ initial, onConfigChange }: LogExplorerViewProp
                         doc={doc}
                         columns={columns}
                         autoColumns={autoColumns}
+                        tableCols={tableCols}
                         expanded={expanded === i}
                         onToggle={toggleExpanded}
                         onAdd={addFilter}
diff --git a/frontend/src/features/log-explorer/components/log-results.tsx b/frontend/src/features/log-explorer/components/log-results.tsx
index 70783aa0e..19aa3440f 100644
--- a/frontend/src/features/log-explorer/components/log-results.tsx
+++ b/frontend/src/features/log-explorer/components/log-results.tsx
@@ -1,7 +1,8 @@
-import { memo, useCallback, useMemo, useState, type ReactNode } from 'react'
+import { memo, useCallback, useMemo, useState, type MouseEvent, type ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { ChevronRight, Copy, Crosshair, Minus, Plus, X } from 'lucide-react'
+import { ColumnResizeHandle } from '@/shared/components/ui/column-resize-handle'
 import { cn } from '@/shared/lib/utils'
 import type { FilterType, LogDocument } from '../types/log-explorer.types'
 import { MSG_FIELDS, SRC_FIELDS, docPreview, flattenDoc, pick } from '../domain/flatten'
@@ -46,10 +47,13 @@ function absTimestamp(iso: string) {
 // Grid columns. Manual mode (user picked columns): time + each picked column (last
 // flexes). Default mode: time + source + auto-detected important columns + a
 // flexible message column.
+export function logGridColumnSizes(columns: string[], autoColumns: string[] = []): Array<string | number> {
+  if (columns.length > 0) return [20, 3, 168, ...columns.map(() => 'minmax(120px, 1fr)')]
+  return [20, 3, 168, 120, ...autoColumns.map(() => 'minmax(96px, 0.7fr)'), 'minmax(0, 1fr)']
+}
+
 function gridTemplate(columns: string[], autoColumns: string[] = []): string {
-  if (columns.length > 0) return `20px 3px 168px ${columns.map(() => 'minmax(120px, 1fr)').join(' ')}`
-  const auto = autoColumns.map(() => 'minmax(96px, 0.7fr)').join(' ')
-  return `20px 3px 168px 120px ${auto ? auto + ' ' : ''}minmax(0, 1fr)`
+  return logGridColumnSizes(columns, autoColumns).map((w) => (typeof w === 'number' ? `${w}px` : w)).join(' ')
 }
 
 function colValue(flat: Record<string, unknown>, c: string): string {
@@ -62,34 +66,48 @@ function colValue(flat: Record<string, unknown>, c: string): string {
 function ResultsHeaderImpl({
   columns,
   autoColumns = [],
+  tableCols,
+  startDrag,
   onRemoveColumn,
 }: {
   columns: string[]
   autoColumns?: string[]
+  tableCols?: string
+  startDrag?: (index: number) => (e: MouseEvent<HTMLElement>) => void
   onRemoveColumn?: (c: string) => void
 }) {
   const { t } = useTranslation()
+  const template = tableCols ?? gridTemplate(columns, autoColumns)
+  const resizeHandle = (index: number) =>
+    startDrag && <ColumnResizeHandle onMouseDown={startDrag(index)} />
   return (
     <div
-      className="sticky top-0 z-10 grid items-center gap-3 border-b border-border/70 bg-card px-4 py-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
-      style={{ gridTemplateColumns: gridTemplate(columns, autoColumns) }}
+      className="sticky top-0 z-10 grid w-max min-w-full items-center gap-3 border-b border-border/70 bg-card px-4 py-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
+      style={{ gridTemplateColumns: template }}
     >
-      <div />
-      <div />
-      <div>{t('logExplorer.results.time')}</div>
+      <div data-resizable-col className="relative min-w-0 pr-2">{resizeHandle(0)}</div>
+      <div data-resizable-col className="relative min-w-0 pr-2">{resizeHandle(1)}</div>
+      <div data-resizable-col className="relative min-w-0 pr-2">
+        {t('logExplorer.results.time')}
+        {resizeHandle(2)}
+      </div>
       {columns.length === 0 ? (
         <>
-          <div>{t('logExplorer.results.source')}</div>
+          <div data-resizable-col className="relative min-w-0 pr-2">
+            {t('logExplorer.results.source')}
+            {resizeHandle(3)}
+          </div>
           {autoColumns.map((c,i) => (
-            <div key={i} className="truncate" title={c}>
+            <div key={i} data-resizable-col className="relative min-w-0 truncate pr-2" title={c}>
               {fieldLabel(c)}
+              {resizeHandle(i + 4)}
             </div>
           ))}
-          <div>{t('logExplorer.results.message')}</div>
+          <div data-resizable-col className="relative min-w-0 pr-2 last:pr-0">{t('logExplorer.results.message')}</div>
         </>
       ) : (
         columns.map((c,i) => (
-          <div key={i} className="group flex min-w-0 items-center gap-1">
+          <div key={i} data-resizable-col className="group relative flex min-w-0 items-center gap-1 pr-2 last:pr-0">
             <span className="truncate" title={c}>
               {fieldLabel(c)}
             </span>
@@ -102,6 +120,7 @@ function ResultsHeaderImpl({
                 <X size={11} />
               </button>
             )}
+            {i < columns.length - 1 && resizeHandle(i + 3)}
           </div>
         ))
       )}
@@ -121,6 +140,7 @@ function ResultRowImpl({
   doc,
   columns,
   autoColumns = [],
+  tableCols,
   expanded,
   onToggle,
   onAdd,
@@ -130,6 +150,7 @@ function ResultRowImpl({
   doc: LogDocument
   columns: string[]
   autoColumns?: string[]
+  tableCols?: string
   expanded: boolean
   onToggle: (index: number) => void
   onAdd?: (f: FilterType) => void
@@ -148,10 +169,10 @@ function ResultRowImpl({
       <div
         onClick={() => onToggle(index)}
         className={cn(
-          'grid cursor-pointer items-center gap-3 border-b border-border/40 px-4 py-1 text-xs leading-tight transition-colors last:border-b-0',
+          'grid w-max min-w-full cursor-pointer items-center gap-3 border-b border-border/40 px-4 py-1 text-xs leading-tight transition-colors last:border-b-0',
           expanded ? 'bg-muted/30' : 'hover:bg-muted/20'
         )}
-        style={{ gridTemplateColumns: gridTemplate(columns, autoColumns) }}
+        style={{ gridTemplateColumns: tableCols ?? gridTemplate(columns, autoColumns) }}
       >
         <ChevronRight size={13} className={cn('text-muted-foreground/60 transition-transform', expanded && 'rotate-90 text-foreground')} />
         <span className={cn('h-3.5 w-[3px] rounded-full', tone.dot)} />
diff --git a/frontend/src/features/parsing-filters/pages/ParsingFiltersPage.tsx b/frontend/src/features/parsing-filters/pages/ParsingFiltersPage.tsx
index 0559db204..f6820f01a 100644
--- a/frontend/src/features/parsing-filters/pages/ParsingFiltersPage.tsx
+++ b/frontend/src/features/parsing-filters/pages/ParsingFiltersPage.tsx
@@ -7,6 +7,8 @@ import { cn } from '@/shared/lib/utils'
 import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
+import { ResizableTableHeader } from '@/shared/components/ui/resizable-table-header'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { pipelinesHttpService } from '@/features/data-processing/services/data-processing-http.service'
 import type { Pipeline } from '@/features/data-processing/types/data-processing.types'
 import { TestPlaygroundModal } from '@/features/playground/components/TestPlaygroundModal'
@@ -19,6 +21,7 @@ const TABS: Tab[] = ['all', 'active', 'inactive', 'system', 'user']
 
 const TH = 'whitespace-nowrap px-3 py-2.5 text-left align-middle font-medium'
 const TD = 'whitespace-nowrap px-3 py-2.5 align-middle'
+const PARSING_FILTERS_TABLE_COLS = [320, 220, 120, 90, 48, 48]
 
 // The name the engine matches on: the file's base name without its extension.
 function pipelineIdentity(relPath: string): string {
@@ -44,6 +47,10 @@ export function ParsingFiltersPage() {
   const [editing, setEditing] = useState<{ filter: Pipeline; creating: boolean } | null>(null)
   const [preparingNew, setPreparingNew] = useState(false)
   const [showTestModal, setShowTestModal] = useState(false)
+  const { widths, startDrag } = useResizableColumns(PARSING_FILTERS_TABLE_COLS, {
+    min: 48,
+    storageKey: 'parsing-filters-table-columns',
+  })
 
   // Deep-link: ?dataType=<value> pre-filters the list to that data type
   // (e.g. opened from an integration's "Filters" button).
@@ -237,17 +244,21 @@ export function ParsingFiltersPage() {
 
       <div className="mt-3 flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card">
         <div className="min-h-0 flex-1 overflow-auto">
-          <table className="min-w-full border-collapse">
-            <thead className="sticky top-0 z-10 bg-muted/90 text-[10px] uppercase tracking-wider text-muted-foreground">
-              <tr className="border-b border-border">
-                <th className={TH}>{t('parsingFilters.cols.filter')}</th>
-                <th className={TH}>{t('parsingFilters.cols.dataTypes')}</th>
-                <th className={TH}>{t('parsingFilters.cols.type')}</th>
-                <th className={`${TH} text-center`}>{t('parsingFilters.cols.active')}</th>
-                <th className={TH} />
-                <th className={TH} />
-              </tr>
-            </thead>
+          <table className="min-w-full border-collapse table-fixed">
+            <ResizableTableHeader
+              cells={[
+                { content: t('parsingFilters.cols.filter'), className: TH },
+                { content: t('parsingFilters.cols.dataTypes'), className: TH },
+                { content: t('parsingFilters.cols.type'), className: TH },
+                { content: t('parsingFilters.cols.active'), className: `${TH} text-center` },
+                { content: null, className: TH },
+                { content: null, className: TH },
+              ]}
+              widths={widths}
+              startDrag={startDrag}
+              className="sticky top-0 z-10 bg-muted/90 text-[10px] uppercase tracking-wider text-muted-foreground"
+              rowClassName="border-b border-border"
+            />
             <tbody>
               {loading && items.length === 0 ? (
                 <tr><td colSpan={6}><Center>
diff --git a/frontend/src/features/soar/components/ExecutionsView.tsx b/frontend/src/features/soar/components/ExecutionsView.tsx
index b4cb124a6..24f4a5120 100644
--- a/frontend/src/features/soar/components/ExecutionsView.tsx
+++ b/frontend/src/features/soar/components/ExecutionsView.tsx
@@ -13,6 +13,8 @@ import { cn } from "@/shared/lib/utils";
 import { Button } from "@/shared/components/ui/button";
 import { Input } from "@/shared/components/ui/input";
 import { InfiniteScrollSentinel } from "@/shared/components/ui/infinite-scroll";
+import { ResizableGridHeader } from "@/shared/components/ui/resizable-grid-header";
+import { useResizableColumns } from "@/shared/hooks/useResizableColumns";
 import {
   presetRange,
   resolveRange,
@@ -48,7 +50,7 @@ const STATUSES: (ExecutionStatus | "all")[] = [
 ];
 const ORIGINS: (ExecutionOrigin | "all")[] = ["all", "FLOW", "MANUAL"];
 const COLS =
-  "90px 100px minmax(160px,1.2fr) minmax(180px,1.6fr) 120px 150px 60px";
+  [90, 100, "minmax(160px,1.2fr)", "minmax(180px,1.6fr)", 120, 150, 60];
 
 const STATUS_META: Record<
   ExecutionStatus,
@@ -78,6 +80,10 @@ export function ExecutionsView() {
   // each node's position in the flow's DAG (its ancestor chain) in the Node
   // column — the flow itself carries no per-run state, only its shape.
   const [runFlows, setRunFlows] = useState<Record<string, Flow>>({});
+  const { template: tableCols, startDrag } = useResizableColumns(COLS, {
+    min: 60,
+    storageKey: "soar-executions-table-columns",
+  });
   const [page, setPage] = useState(0);
   const [pageSize] = useState(50);
   const [loading, setLoading] = useState(true);
@@ -264,19 +270,22 @@ export function ExecutionsView() {
       </div>
 
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card">
-        <div
-          className="grid items-center gap-3 border-b border-border bg-muted/30 px-4 py-2.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
-          style={{ gridTemplateColumns: COLS }}
-        >
-          <div>{t("soar.executions.cols.status")}</div>
-          <div>{t("soar.executions.cols.node")}</div>
-          <div>{t("soar.executions.cols.flow")}</div>
-          <div>{t("soar.executions.cols.command")}</div>
-          <div>{t("soar.executions.cols.agent")}</div>
-          <div>{t("soar.executions.cols.date")}</div>
-          <div className="text-center">{t("soar.executions.cols.retries")}</div>
-        </div>
-        <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="min-h-0 flex-1 overflow-x-auto overflow-y-auto">
+          <ResizableGridHeader
+            headers={[
+              t("soar.executions.cols.status"),
+              t("soar.executions.cols.node"),
+              t("soar.executions.cols.flow"),
+              t("soar.executions.cols.command"),
+              t("soar.executions.cols.agent"),
+              t("soar.executions.cols.date"),
+              t("soar.executions.cols.retries"),
+            ]}
+            tableCols={tableCols}
+            startDrag={startDrag}
+            className="sticky top-0 z-10 bg-muted/30 py-2.5 font-medium"
+            cellClassName="last:text-center"
+          />
           {loading && items.length === 0 ? (
             <Center>
               <Loader2 className="h-4 w-4 animate-spin" />{" "}
@@ -306,6 +315,7 @@ export function ExecutionsView() {
                   key={e.id}
                   e={e}
                   flow={e.rulePath ? runFlows[e.rulePath] : undefined}
+                  tableCols={tableCols}
                   df={df}
                   t={t}
                 />
@@ -327,11 +337,13 @@ export function ExecutionsView() {
 function ExecutionRow({
   e,
   flow,
+  tableCols,
   df,
   t,
 }: {
   e: Execution;
   flow?: Flow;
+  tableCols: string;
   df: ReturnType<typeof useDateFormat>;
   t: ReturnType<typeof useTranslation>["t"];
 }) {
@@ -357,8 +369,8 @@ function ExecutionRow({
 
   return (
     <div
-      className="grid items-center gap-3 border-b border-border px-4 py-2.5 text-sm last:border-0"
-      style={{ gridTemplateColumns: COLS }}
+      className="grid w-max min-w-full items-center gap-3 border-b border-border px-4 py-2.5 text-sm last:border-0"
+      style={{ gridTemplateColumns: tableCols }}
     >
       <div
         className={cn(
diff --git a/frontend/src/features/soar/pages/FlowsPage.tsx b/frontend/src/features/soar/pages/FlowsPage.tsx
index ff94c7985..c70e65a58 100644
--- a/frontend/src/features/soar/pages/FlowsPage.tsx
+++ b/frontend/src/features/soar/pages/FlowsPage.tsx
@@ -6,6 +6,8 @@ import { cn } from '@/shared/lib/utils'
 import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
+import { ResizableTableHeader } from '@/shared/components/ui/resizable-table-header'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { PlatformBroadcastButton, broadcast, BULK_PATHS } from '@/features/platform-broadcast'
 import { soarFlowsService } from '../services/soar-flows.service'
 import { soarExecutionsService } from '../services/soar-executions.service'
@@ -18,6 +20,7 @@ type ListTab = 'all' | 'active' | 'inactive' | 'system' | 'user'
 const LIST_TABS: ListTab[] = ['all', 'active', 'inactive', 'system', 'user']
 const TH = 'whitespace-nowrap px-3 py-2.5 text-left align-middle font-medium'
 const TD = 'whitespace-nowrap px-3 py-2.5 align-middle'
+const FLOWS_TABLE_COLS = [360, 130, 90, 90, 140, 90, 70]
 
 function flowName(relPath: string): string {
   return (relPath.split('/').pop() ?? relPath).replace(/\.ya?ml$/i, '')
@@ -64,6 +67,14 @@ export function FlowsPage() {
   // flows exist.
   const [stateVersion, setStateVersion] = useState(0)
   const [stats, setStats] = useState<Record<string, FlowStat>>({})
+  const { widths, startDrag } = useResizableColumns(FLOWS_TABLE_COLS, {
+    min: 60,
+    storageKey: 'soar-flows-table-columns',
+  })
+  const flowsTableWidth = widths.reduce<number>(
+    (total, width) => total + (typeof width === 'number' ? width : 0),
+    0,
+  )
 
   const openStartFrom = () => {
     setStarting(true)
@@ -190,18 +201,27 @@ export function FlowsPage() {
 
       <div className="mt-3 flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card">
         <div className="min-h-0 flex-1 overflow-auto">
-          <table className="min-w-full border-collapse">
-            <thead className="sticky top-0 z-10 bg-muted text-[10px] uppercase tracking-wider text-muted-foreground">
-              <tr className="border-b border-border">
-                <th className={TH}>{t('soar.cols.flow')}</th>
-                <th className={TH}>{t('soar.cols.platform')}</th>
-                <th className={`${TH} text-center`}>{t('soar.cols.conditions')}</th>
-                <th className={`${TH} text-center`}>{t('soar.cols.commands')}</th>
-                <th className={TH}>{t('soar.cols.lastRun')}</th>
-                <th className={`${TH} text-center`}>{t('soar.cols.active')}</th>
-                <th className={TH} />
-              </tr>
-            </thead>
+          <table className="border-collapse table-fixed" style={{ minWidth: '100%', width: `${flowsTableWidth}px` }}>
+            <colgroup>
+              {widths.map((width, index) => (
+                <col key={index} style={{ width: typeof width === 'number' ? `${width}px` : width }} />
+              ))}
+            </colgroup>
+            <ResizableTableHeader
+              cells={[
+                { content: t('soar.cols.flow'), className: TH },
+                { content: t('soar.cols.platform'), className: TH },
+                { content: t('soar.cols.conditions'), className: `${TH} text-center` },
+                { content: t('soar.cols.commands'), className: `${TH} text-center` },
+                { content: t('soar.cols.lastRun'), className: TH },
+                { content: t('soar.cols.active'), className: `${TH} text-center` },
+                { content: null, className: TH },
+              ]}
+              widths={widths}
+              startDrag={startDrag}
+              className="sticky top-0 z-10 bg-muted text-[10px] uppercase tracking-wider text-muted-foreground"
+              rowClassName="border-b border-border"
+            />
             <tbody>
               {loading && items.length === 0 ? (
                 <tr><td colSpan={7}><Center><Loader2 className="h-4 w-4 animate-spin" /> {t('soar.loading')}</Center></td></tr>
diff --git a/frontend/src/features/team/pages/TeamPage.tsx b/frontend/src/features/team/pages/TeamPage.tsx
index b3e4fe200..25cfbb1e5 100644
--- a/frontend/src/features/team/pages/TeamPage.tsx
+++ b/frontend/src/features/team/pages/TeamPage.tsx
@@ -26,6 +26,8 @@ import { cn } from '@/shared/lib/utils'
 import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
+import { ColumnResizeHandle } from '@/shared/components/ui/column-resize-handle'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { SUPPORTED_LANGUAGES } from '@/shared/i18n'
 import { rolesHttpService, TeamHttpError, usersHttpService } from '../services/team-http.service'
 import type {
@@ -40,6 +42,7 @@ import type {
 } from '../types/team.types'
 
 const PAGE_SIZE = 20
+const MEMBER_COLS = ['1.7fr', '1fr', 90, 130, 40]
 
 /* Roles & permissions arrive from the backend as English DB strings. Translate the
  * stable identifiers (role name, permission resource/action) with a fallback to the
@@ -160,6 +163,10 @@ function MembersView({ roles }: { roles: Role[] }) {
 
   const [openId, setOpenId] = useState<string | null>(null)
   const [inviteOpen, setInviteOpen] = useState(false)
+  const { template: memberCols, startDrag } = useResizableColumns(MEMBER_COLS, {
+    min: 40,
+    storageKey: 'team-members-table-columns',
+  })
 
   // Debounce the search box, and reset to page 1 when the query changes.
   useEffect(() => {
@@ -207,16 +214,23 @@ function MembersView({ roles }: { roles: Role[] }) {
         </Button>
       </div>
 
-      <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card">
+      <div className="mt-3 overflow-x-auto overflow-y-hidden rounded-xl border border-border bg-card">
         <div
-          className="grid items-center gap-3 border-b border-border bg-muted/40 px-4 py-2 text-[10px] uppercase tracking-wider text-muted-foreground"
-          style={{ gridTemplateColumns: MEMBER_COLS }}
+          className="grid w-max min-w-full items-center gap-3 border-b border-border bg-muted/40 px-4 py-2 text-[10px] uppercase tracking-wider text-muted-foreground"
+          style={{ gridTemplateColumns: memberCols }}
         >
-          <div>{t('team.members.colUser')}</div>
-          <div>{t('team.members.colRoles')}</div>
-          <div>{t('team.members.col2fa')}</div>
-          <div>{t('team.members.colStatus')}</div>
-          <div />
+          {[
+            t('team.members.colUser'),
+            t('team.members.colRoles'),
+            t('team.members.col2fa'),
+            t('team.members.colStatus'),
+            '',
+          ].map((header, index, headers) => (
+            <div key={index} data-resizable-col className="relative min-w-0 pr-2 last:pr-0">
+              {header}
+              {index < headers.length - 1 && <ColumnResizeHandle onMouseDown={startDrag(index)} />}
+            </div>
+          ))}
         </div>
 
         {loading && (!users || users.length === 0) && (
@@ -245,7 +259,7 @@ function MembersView({ roles }: { roles: Role[] }) {
         )}
 
         {users && users.length > 0 &&
-          users.map((u) => <MemberRow key={u.id} user={u} onOpen={() => setOpenId(u.id)} />)}
+            users.map((u) => <MemberRow key={u.id} user={u} tableCols={memberCols} onOpen={() => setOpenId(u.id)} />)}
       </div>
 
       {users && users.length > 0 && (
@@ -280,18 +294,16 @@ function MembersView({ roles }: { roles: Role[] }) {
   )
 }
 
-const MEMBER_COLS = '1.7fr 1fr 90px 130px 40px'
-
-function MemberRow({ user: u, onOpen }: { user: UserListItem; onOpen: () => void }) {
+function MemberRow({ user: u, tableCols, onOpen }: { user: UserListItem; tableCols: string; onOpen: () => void }) {
   const { t } = useTranslation()
   return (
     <div
       onClick={onOpen}
       className={cn(
-        'grid cursor-pointer items-center gap-3 border-b border-border px-4 py-3 text-xs last:border-b-0 hover:bg-muted/40',
+        'grid w-max min-w-full cursor-pointer items-center gap-3 border-b border-border px-4 py-3 text-xs last:border-b-0 hover:bg-muted/40',
         u.status !== 'active' && 'opacity-70'
       )}
-      style={{ gridTemplateColumns: MEMBER_COLS }}
+      style={{ gridTemplateColumns: tableCols }}
     >
       <div className="flex min-w-0 items-center gap-3">
         <Avatar user={u} />
diff --git a/frontend/src/features/threat-intel/components/FeedRow.tsx b/frontend/src/features/threat-intel/components/FeedRow.tsx
index 5fa8f2a1f..faf965426 100644
--- a/frontend/src/features/threat-intel/components/FeedRow.tsx
+++ b/frontend/src/features/threat-intel/components/FeedRow.tsx
@@ -5,18 +5,17 @@ import { feedAccuracyMeta, feedTypeTone } from './utils/severity-style'
 
 interface FeedRowProps {
   feed: ThreatFeed
+  tableCols: string
 }
 
-const FEED_COLS = '12px 1fr 160px 140px'
-
-export function FeedRow({ feed }: FeedRowProps) {
+export function FeedRow({ feed, tableCols }: FeedRowProps) {
   const { t } = useTranslation()
   const acc = feedAccuracyMeta(feed.accuracy)
 
   return (
     <div
-      className="group grid items-center gap-3 border-b border-border/60 px-4 py-2.5 text-xs last:border-b-0 hover:bg-muted/40"
-      style={{ gridTemplateColumns: FEED_COLS }}
+      className="group grid w-max min-w-full items-center gap-3 border-b border-border/60 px-4 py-2.5 text-xs last:border-b-0 hover:bg-muted/40"
+      style={{ gridTemplateColumns: tableCols }}
     >
       <span className={cn('h-2 w-2 rounded-full', acc.dot)} title={t(acc.labelKey)} />
       <div className="min-w-0 truncate font-medium">{feed.name}</div>
diff --git a/frontend/src/features/threat-intel/components/FeedsHeader.tsx b/frontend/src/features/threat-intel/components/FeedsHeader.tsx
index 00da0697a..d3382d951 100644
--- a/frontend/src/features/threat-intel/components/FeedsHeader.tsx
+++ b/frontend/src/features/threat-intel/components/FeedsHeader.tsx
@@ -1,18 +1,14 @@
 import { useTranslation } from 'react-i18next'
+import { ResizableGridHeader } from '@/shared/components/ui/resizable-grid-header'
+import type { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 
-const FEED_COLS = '12px 1fr 160px 140px'
-
-export function FeedsHeader() {
+export function FeedsHeader({ tableCols, startDrag }: { tableCols: string; startDrag: ReturnType<typeof useResizableColumns>['startDrag'] }) {
   const { t } = useTranslation()
   return (
-    <div
-      className="grid items-center gap-3 border-b border-border bg-muted/40 px-4 py-2 text-[10px] uppercase tracking-wider text-muted-foreground"
-      style={{ gridTemplateColumns: FEED_COLS }}
-    >
-      <div />
-      <div>{t('threatIntel.feeds.table.name')}</div>
-      <div>{t('threatIntel.feeds.table.type')}</div>
-      <div>{t('threatIntel.feeds.table.accuracy')}</div>
-    </div>
+    <ResizableGridHeader
+      headers={['', t('threatIntel.feeds.table.name'), t('threatIntel.feeds.table.type'), t('threatIntel.feeds.table.accuracy')]}
+      tableCols={tableCols}
+      startDrag={startDrag}
+    />
   )
 }
diff --git a/frontend/src/features/threat-intel/components/FeedsList.tsx b/frontend/src/features/threat-intel/components/FeedsList.tsx
index ec8d8159a..3a9469164 100644
--- a/frontend/src/features/threat-intel/components/FeedsList.tsx
+++ b/frontend/src/features/threat-intel/components/FeedsList.tsx
@@ -1,18 +1,25 @@
 import { useTranslation } from 'react-i18next'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { useTiFeeds } from '../hooks/use-ti-feeds'
 import { FeedRow } from './FeedRow'
 import { FeedsHeader } from './FeedsHeader'
 
+const FEED_COLS = [12, '1fr', 160, 140]
+
 export function FeedsList() {
   const { t } = useTranslation()
   const { data, isLoading } = useTiFeeds()
+  const { template: tableCols, startDrag } = useResizableColumns(FEED_COLS, {
+    min: 36,
+    storageKey: 'threat-intel-feed-table-columns',
+  })
 
   if (data?.kind === 'not-configured') return null
 
   if (isLoading) {
     return (
-      <div className="overflow-hidden rounded-xl border border-border bg-card">
-        <FeedsHeader />
+      <div className="overflow-x-auto overflow-y-hidden rounded-xl border border-border bg-card">
+        <FeedsHeader tableCols={tableCols} startDrag={startDrag} />
         {Array.from({ length: 5 }).map((_, i) => (
           <div
             key={i}
@@ -34,10 +41,10 @@ export function FeedsList() {
   }
 
   return (
-    <div className="overflow-hidden overflow-y-auto max-h-[70dvh] rounded-xl border border-border bg-card">
-      <FeedsHeader />
+    <div className="max-h-[70dvh] overflow-x-auto overflow-y-auto rounded-xl border border-border bg-card">
+      <FeedsHeader tableCols={tableCols} startDrag={startDrag} />
       {feeds.map((feed) => (
-        <FeedRow key={`${feed.type}-${feed.name}`} feed={feed} />
+        <FeedRow key={`${feed.type}-${feed.name}`} feed={feed} tableCols={tableCols} />
       ))}
     </div>
   )
diff --git a/frontend/src/features/threat-intel/components/IocRow.tsx b/frontend/src/features/threat-intel/components/IocRow.tsx
index e3cfc4108..b8daad2cb 100644
--- a/frontend/src/features/threat-intel/components/IocRow.tsx
+++ b/frontend/src/features/threat-intel/components/IocRow.tsx
@@ -7,12 +7,11 @@ import { absTimestamp } from './utils/time-format'
 
 interface IocRowProps {
   ioc: EntitySummary
+  tableCols: string
   onOpen: (id: string) => void
 }
 
-const IOC_COLS = '4px 90px 1fr 130px 1fr 110px 36px'
-
-export function IocRow({ ioc, onOpen }: IocRowProps) {
+export function IocRow({ ioc, tableCols, onOpen }: IocRowProps) {
   const { t } = useTranslation()
   const tone = reputationTone(ioc.reputation)
   const rep = REPUTATION_STYLE[tone]
@@ -22,8 +21,8 @@ export function IocRow({ ioc, onOpen }: IocRowProps) {
   return (
     <div
       onClick={() => onOpen(ioc.id)}
-      className="group grid cursor-pointer items-center gap-3 border-b border-border/60 px-4 py-2.5 text-xs hover:bg-muted/40 last:border-b-0"
-      style={{ gridTemplateColumns: IOC_COLS }}
+      className="group grid w-max min-w-full cursor-pointer items-center gap-3 border-b border-border/60 px-4 py-2.5 text-xs hover:bg-muted/40 last:border-b-0"
+      style={{ gridTemplateColumns: tableCols }}
     >
       <span className={cn('h-3 w-1 rounded-full', rep.bar)} />
       <div className="flex items-center gap-1.5">
diff --git a/frontend/src/features/threat-intel/components/IocTable.tsx b/frontend/src/features/threat-intel/components/IocTable.tsx
index 2b565c21b..72729aafe 100644
--- a/frontend/src/features/threat-intel/components/IocTable.tsx
+++ b/frontend/src/features/threat-intel/components/IocTable.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { ResizableGridHeader } from '@/shared/components/ui/resizable-grid-header'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import type { EntitySummary } from '../domain/threat-intel.types'
 import { Pagination } from '@/shared/components/ui/pagination'
 import { IocRow } from './IocRow'
@@ -17,7 +19,7 @@ interface IocTableProps {
   onLoadMore?: () => void
 }
 
-const IOC_COLS = '4px 90px 1fr 130px 1fr 110px 36px'
+const IOC_COLS = [4, 90, '1fr', 130, '1fr', 110, 36]
 
 export function IocTable({
   iocs,
@@ -34,6 +36,10 @@ export function IocTable({
   const { t } = useTranslation()
   const scrollRef = useRef<HTMLDivElement | null>(null)
   const sentinelRef = useRef<HTMLDivElement | null>(null)
+  const { template: tableCols, startDrag } = useResizableColumns(IOC_COLS, {
+    min: 36,
+    storageKey: 'threat-intel-ioc-table-columns',
+  })
 
   useEffect(() => {
     const node = sentinelRef.current
@@ -52,21 +58,24 @@ export function IocTable({
   return (
     <>
       <div className="flex h-[60dvh] flex-col overflow-hidden rounded-xl border border-border bg-card">
-        <div
-          className="grid items-center gap-3 border-b border-border bg-muted/40 px-4 py-2 text-[10px] uppercase tracking-wider text-muted-foreground"
-          style={{ gridTemplateColumns: IOC_COLS }}
-        >
-          <div />
-          <div>{t('threatIntel.iocs.table.type')}</div>
-          <div>{t('threatIntel.iocs.table.indicator')}</div>
-          <div className="text-right">{t('threatIntel.iocs.table.reputation')}</div>
-          <div>{t('threatIntel.iocs.table.tags')}</div>
-          <div>{t('threatIntel.iocs.table.lastSeen')}</div>
-          <div />
-        </div>
-        <div ref={scrollRef} className="flex-1 overflow-y-auto">
+        <div ref={scrollRef} className="flex-1 overflow-x-auto overflow-y-auto">
+          <ResizableGridHeader
+            headers={[
+              '',
+              t('threatIntel.iocs.table.type'),
+              t('threatIntel.iocs.table.indicator'),
+              t('threatIntel.iocs.table.reputation'),
+              t('threatIntel.iocs.table.tags'),
+              t('threatIntel.iocs.table.lastSeen'),
+              '',
+            ]}
+            tableCols={tableCols}
+            startDrag={startDrag}
+            className="sticky top-0 z-10"
+            cellClassName="[&:nth-child(4)]:text-right"
+          />
           {iocs.map((ioc) => (
-            <IocRow key={ioc.id} ioc={ioc} onOpen={() => onOpen(ioc.id)} />
+            <IocRow key={ioc.id} ioc={ioc} tableCols={tableCols} onOpen={() => onOpen(ioc.id)} />
           ))}
           {!isLoading && iocs.length === 0 && (
             <div className="px-6 py-16 text-center text-sm text-muted-foreground">{t('threatIntel.iocs.empty')}</div>
diff --git a/frontend/src/features/user-auditor/pages/UserAuditorPage.tsx b/frontend/src/features/user-auditor/pages/UserAuditorPage.tsx
index f54a97a1a..a6e3daf8c 100644
--- a/frontend/src/features/user-auditor/pages/UserAuditorPage.tsx
+++ b/frontend/src/features/user-auditor/pages/UserAuditorPage.tsx
@@ -27,6 +27,8 @@ import { cn } from '@/shared/lib/utils'
 import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
+import { ColumnResizeHandle } from '@/shared/components/ui/column-resize-handle'
+import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { CustomFilterBar } from '@/shared/components/filters/CustomFilterBar'
 import type {
   CustomFilter,
@@ -38,6 +40,7 @@ import type { ADUser, ADUserSource, ADUserStats, ADUserStatus } from '../types/a
 
 const SIZE = 50
 const STALE_MS = 30 * 86_400_000
+const LIST_COLS = [32, '1fr', '1.3fr', 110, 110, 110, 90, 36]
 
 type ViewId = 'all' | ADUserSource
 const VIEW_IDS: ViewId[] = ['all', 'windows', 'linux']
@@ -105,6 +108,10 @@ export function UserAuditorPage() {
   const [error, setError] = useState(false)
   const [stats, setStats] = useState<ADUserStats | null>(null)
   const [openUser, setOpenUser] = useState<ADUser | null>(null)
+  const { template: listCols, startDrag } = useResizableColumns(LIST_COLS, {
+    min: 36,
+    storageKey: 'user-auditor-table-columns',
+  })
 
   const filterFields: FilterFieldDef[] = [
     { field: 'status', label: t('userAuditor.filterFields.status') },
@@ -238,12 +245,12 @@ export function UserAuditorPage() {
           </Button>
         </div>
       ) : layout === 'list' ? (
-        <div className="mt-3 overflow-hidden rounded-xl border border-border bg-card">
-          <ListHeader t={t} />
+        <div className="mt-3 overflow-x-auto overflow-y-hidden rounded-xl border border-border bg-card">
+          <ListHeader t={t} tableCols={listCols} startDrag={startDrag} />
           {loading && users.length === 0 ? (
             <LoadingRows />
           ) : (
-            users.map((u) => <UserListRow key={u.id} user={u} onOpen={() => setOpenUser(u)} t={t} />)
+            users.map((u) => <UserListRow key={u.id} user={u} tableCols={listCols} onOpen={() => setOpenUser(u)} t={t} />)
           )}
           {!loading && users.length === 0 && (
             <div className="px-6 py-16 text-center text-sm text-muted-foreground">
@@ -483,22 +490,28 @@ function Toolbar({
 
 /* ─── List ─────────────────────────────────────────────────────────────── */
 
-const LIST_COLS = '32px 1fr 1.3fr 110px 110px 110px 90px 36px'
-
-function ListHeader({ t }: { t: TFunction }) {
+function ListHeader({ t, tableCols, startDrag }: { t: TFunction; tableCols: string; startDrag: ReturnType<typeof useResizableColumns>['startDrag'] }) {
+  const headers = [
+    '',
+    t('userAuditor.list.account'),
+    t('userAuditor.list.identity'),
+    t('userAuditor.list.status'),
+    t('userAuditor.list.lastLogon'),
+    t('userAuditor.list.lastSeen'),
+    t('userAuditor.list.tenant'),
+    '',
+  ]
   return (
     <div
       className="grid items-center gap-3 border-b border-border bg-muted/40 px-4 py-2 text-[10px] uppercase tracking-wider text-muted-foreground"
-      style={{ gridTemplateColumns: LIST_COLS }}
+      style={{ gridTemplateColumns: tableCols }}
     >
-      <div />
-      <div>{t('userAuditor.list.account')}</div>
-      <div>{t('userAuditor.list.identity')}</div>
-      <div>{t('userAuditor.list.status')}</div>
-      <div>{t('userAuditor.list.lastLogon')}</div>
-      <div>{t('userAuditor.list.lastSeen')}</div>
-      <div>{t('userAuditor.list.tenant')}</div>
-      <div />
+      {headers.map((header, index) => (
+        <div key={index} data-resizable-col className="relative min-w-0 pr-2 last:pr-0">
+          {header}
+          {index < headers.length - 1 && <ColumnResizeHandle onMouseDown={startDrag(index)} />}
+        </div>
+      ))}
     </div>
   )
 }
@@ -511,14 +524,14 @@ function LoadingRows() {
   )
 }
 
-function UserListRow({ user, onOpen, t }: { user: ADUser; onOpen: () => void; t: TFunction }) {
+function UserListRow({ user, tableCols, onOpen, t }: { user: ADUser; tableCols: string; onOpen: () => void; t: TFunction }) {
   const status = statusOf(user)
   const identity = accountIdentity(user)
   return (
     <div
       onClick={onOpen}
-      className="group grid cursor-pointer items-center gap-3 border-b border-border px-4 py-2.5 text-xs hover:bg-muted/40 last:border-b-0"
-      style={{ gridTemplateColumns: LIST_COLS }}
+      className="group grid w-max min-w-full cursor-pointer items-center gap-3 border-b border-border px-4 py-2.5 text-xs hover:bg-muted/40 last:border-b-0"
+      style={{ gridTemplateColumns: tableCols }}
     >
       <AccountAvatar user={user} />
       <div className="min-w-0">
diff --git a/frontend/src/shared/components/ui/column-resize-handle.tsx b/frontend/src/shared/components/ui/column-resize-handle.tsx
index cfefd74c4..2f327f474 100644
--- a/frontend/src/shared/components/ui/column-resize-handle.tsx
+++ b/frontend/src/shared/components/ui/column-resize-handle.tsx
@@ -1,4 +1,5 @@
 import type { MouseEvent } from 'react'
+import { GripVertical } from 'lucide-react'
 import { cn } from '@/shared/lib/utils'
 
 interface Props {
@@ -14,12 +15,14 @@ export function ColumnResizeHandle({ onMouseDown, className }: Props) {
       onMouseDown={onMouseDown}
       onClick={(e) => e.stopPropagation()}
       className={cn(
-        'absolute right-0 top-0 z-20 h-full w-2 cursor-col-resize select-none touch-none',
-        'bg-transparent hover:bg-primary/40 active:bg-primary',
+        'group absolute right-0 top-0 z-20 flex h-full w-3 cursor-col-resize select-none items-center justify-center touch-none',
+        'bg-transparent hover:bg-primary/20 active:bg-primary/30',
         'transition-colors',
         className,
       )}
       aria-label="Resize column"
-    />
+    >
+      <GripVertical className="h-3 w-3 text-muted-foreground/45 opacity-70 transition-colors group-hover:text-primary group-hover:opacity-100" strokeWidth={1.75} />
+    </span>
   )
 }
diff --git a/frontend/src/shared/components/ui/resizable-grid-header.tsx b/frontend/src/shared/components/ui/resizable-grid-header.tsx
new file mode 100644
index 000000000..42b8ee7cc
--- /dev/null
+++ b/frontend/src/shared/components/ui/resizable-grid-header.tsx
@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react'
+import type { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { cn } from '@/shared/lib/utils'
+import { ColumnResizeHandle } from './column-resize-handle'
+
+interface ResizableGridHeaderProps {
+  headers: ReactNode[]
+  tableCols: string
+  startDrag: ReturnType<typeof useResizableColumns>['startDrag']
+  className?: string
+  cellClassName?: string
+}
+
+export function ResizableGridHeader({
+  headers,
+  tableCols,
+  startDrag,
+  className,
+  cellClassName,
+}: ResizableGridHeaderProps) {
+  return (
+    <div
+      className={cn(
+        'grid w-max min-w-full items-center gap-3 border-b border-border bg-muted/40 px-4 py-2 text-[10px] uppercase tracking-wider text-muted-foreground',
+        className,
+      )}
+      style={{ gridTemplateColumns: tableCols }}
+    >
+      {headers.map((header, index) => (
+        <div key={index} data-resizable-col className={cn('relative min-w-0 pr-2 last:pr-0', cellClassName)}>
+          {header}
+          {index < headers.length - 1 && <ColumnResizeHandle onMouseDown={startDrag(index)} />}
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/frontend/src/shared/components/ui/resizable-table-header.tsx b/frontend/src/shared/components/ui/resizable-table-header.tsx
new file mode 100644
index 000000000..5df916545
--- /dev/null
+++ b/frontend/src/shared/components/ui/resizable-table-header.tsx
@@ -0,0 +1,50 @@
+import type { CSSProperties, ReactNode } from 'react'
+import type { ColSize, useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { cn } from '@/shared/lib/utils'
+import { ColumnResizeHandle } from './column-resize-handle'
+
+export interface ResizableTableHeaderCell {
+  content: ReactNode
+  className?: string
+}
+
+interface ResizableTableHeaderProps {
+  cells: ResizableTableHeaderCell[]
+  widths: ColSize[]
+  startDrag: ReturnType<typeof useResizableColumns>['startDrag']
+  className?: string
+  rowClassName?: string
+  cellClassName?: string
+}
+
+const widthStyle = (width: ColSize | undefined): CSSProperties | undefined => {
+  if (width == null) return undefined
+  return { width: typeof width === 'number' ? `${width}px` : width }
+}
+
+export function ResizableTableHeader({
+  cells,
+  widths,
+  startDrag,
+  className,
+  rowClassName,
+  cellClassName,
+}: ResizableTableHeaderProps) {
+  return (
+    <thead className={className}>
+      <tr className={rowClassName}>
+        {cells.map((cell, index) => (
+          <th
+            key={index}
+            data-resizable-col
+            className={cn('relative', cellClassName, cell.className)}
+            style={widthStyle(widths[index])}
+          >
+            {cell.content}
+            {index < cells.length - 1 && <ColumnResizeHandle onMouseDown={startDrag(index)} />}
+          </th>
+        ))}
+      </tr>
+    </thead>
+  )
+}
diff --git a/frontend/src/shared/hooks/useResizableColumns.ts b/frontend/src/shared/hooks/useResizableColumns.ts
index 5c82e317a..5b882553e 100644
--- a/frontend/src/shared/hooks/useResizableColumns.ts
+++ b/frontend/src/shared/hooks/useResizableColumns.ts
@@ -8,29 +8,15 @@ interface Opts {
   storageKey?: string
 }
 
-const readStored = (key: string, len: number): ColSize[] | null => {
-  if (typeof window === 'undefined') return null
-  try {
-    const raw = localStorage.getItem(key)
-    if (!raw) return null
-    const parsed = JSON.parse(raw)
-    if (Array.isArray(parsed) && parsed.length === len) return parsed as ColSize[]
-  } catch { /* ignore */ }
-  return null
-}
-
 export function useResizableColumns(initial: ColSize[], opts: Opts = {}) {
   const min = opts.min ?? 40
   const storageKey = opts.storageKey
-  const [widths, setWidths] = useState<ColSize[]>(() =>
-    storageKey ? readStored(storageKey, initial.length) ?? initial : initial,
-  )
-  const dragRef = useRef<{ index: number; startX: number; startW: number } | null>(null)
+  const [widths, setWidths] = useState<ColSize[]>(initial)
+  const dragRef = useRef<{ index: number; startX: number; startW: number; measured: number[] } | null>(null)
 
   useEffect(() => {
-    if (!storageKey || typeof window === 'undefined') return
-    try { localStorage.setItem(storageKey, JSON.stringify(widths)) } catch { /* ignore */ }
-  }, [widths, storageKey])
+    setWidths(initial)
+  }, [initial.length, storageKey])
 
   useEffect(() => {
     const onMove = (e: globalThis.MouseEvent) => {
@@ -39,7 +25,7 @@ export function useResizableColumns(initial: ColSize[], opts: Opts = {}) {
       e.preventDefault()
       const w = Math.max(min, d.startW + (e.clientX - d.startX))
       setWidths((prev) => {
-        const next = prev.slice()
+        const next = d.measured.length === prev.length ? d.measured.slice() : prev.slice()
         next[d.index] = w
         return next
       })
@@ -64,8 +50,15 @@ export function useResizableColumns(initial: ColSize[], opts: Opts = {}) {
       e.stopPropagation()
       const handle = e.currentTarget as HTMLElement
       const cell = handle.closest('[data-resizable-col]') as HTMLElement | null ?? handle.parentElement
-      const startW = cell?.getBoundingClientRect().width ?? min
-      dragRef.current = { index, startX: e.clientX, startW }
+      const row = cell?.parentElement
+      const measured = row
+        ? Array.from(row.children)
+            .filter((child): child is HTMLElement => child instanceof HTMLElement && child.hasAttribute('data-resizable-col'))
+            .map((child) => Math.max(min, child.getBoundingClientRect().width))
+        : []
+      const startW = measured[index] ?? cell?.getBoundingClientRect().width ?? min
+      if (measured.length > 0) setWidths(measured)
+      dragRef.current = { index, startX: e.clientX, startW, measured }
       document.body.style.cursor = 'col-resize'
       document.body.style.userSelect = 'none'
     },

From f1595875a5dd2f5e623c1f38b0a5e71d19077503 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sanchez.saez.alex01@gmail.com>
Date: Thu, 10 Sep 2026 15:01:55 -0600
Subject: [PATCH 3/4] feat(frontend): per-column min widths for resizable
 tables

---
 .../alerting-rules/components/table.tsx       | 13 ++++-
 .../alerts/components/alerts-table-header.tsx |  3 ++
 .../alerts/components/tagging-rules-table.tsx |  7 +--
 .../src/features/alerts/pages/AlertsPage.tsx  |  4 +-
 .../features/api-keys/pages/ApiKeysPage.tsx   | 23 ++++-----
 .../src/features/audit/pages/AuditPage.tsx    | 10 ++--
 .../components/renderers/TableRenderer.tsx    |  4 +-
 .../datasources/pages/DataSourcesPage.tsx     | 11 ++++-
 .../incident-alerts-picker-header.tsx         |  9 +++-
 .../incidents/components/incidents-table.tsx  | 21 +++++----
 .../components/LogExplorerView.tsx            | 11 ++++-
 .../pages/ParsingFiltersPage.tsx              | 20 +++++---
 .../soar/components/ExecutionsView.tsx        | 23 ++++-----
 .../src/features/soar/pages/FlowsPage.tsx     | 25 ++++++----
 frontend/src/features/team/pages/TeamPage.tsx | 20 ++++----
 .../threat-intel/components/FeedsList.tsx     |  9 +++-
 .../threat-intel/components/IocTable.tsx      | 24 +++++-----
 .../user-auditor/pages/UserAuditorPage.tsx    | 12 ++++-
 .../shared/hooks/useResizableColumns.test.ts  | 14 ++++--
 .../src/shared/hooks/useResizableColumns.ts   | 47 ++++++++++++++++---
 20 files changed, 210 insertions(+), 100 deletions(-)

diff --git a/frontend/src/features/alerting-rules/components/table.tsx b/frontend/src/features/alerting-rules/components/table.tsx
index ecabcf85c..b0926d134 100644
--- a/frontend/src/features/alerting-rules/components/table.tsx
+++ b/frontend/src/features/alerting-rules/components/table.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import type { TFunction } from 'i18next'
 import { Crosshair, Lock } from 'lucide-react'
 import { ResizableTableHeader } from '@/shared/components/ui/resizable-table-header'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { cn } from '@/shared/lib/utils'
 import type { CorrelationRule } from '../services/alerting-rules-http.service'
 import { impactKey } from '../lib/impact-key'
@@ -19,8 +19,17 @@ const IMPACT_TONE: Record<string, string> = { high: 'text-red-500', medium: 'tex
 export function Table({ rules, selected, onToggleSelected, onSelectAll, onOpen, onToggle, t, footer }: { rules: CorrelationRule[]; selected: Set<string>; onToggleSelected: (relPath: string) => void; onSelectAll: (checked: boolean) => void; onOpen: (r: CorrelationRule) => void; onToggle: (r: CorrelationRule, next: boolean) => void; t: TFunction; footer?: ReactNode }) {
   const allChecked = rules.length > 0 && rules.every((r) => selected.has(r.relPath))
   const someChecked = !allChecked && rules.some((r) => selected.has(r.relPath))
+  const alertingRulesLabelMins = colMins([
+    t('alertingRules.table.name'),
+    t('alertingRules.table.dataTypes'),
+    t('alertingRules.table.category'),
+    t('alertingRules.table.technique'),
+    t('alertingRules.table.adversary'),
+    t('alertingRules.table.impact'),
+    t('alertingRules.table.active'),
+  ])
   const { widths, startDrag } = useResizableColumns(ALERTING_RULES_TABLE_COLS, {
-    min: 48,
+    min: [48, ...alertingRulesLabelMins],
     storageKey: 'alerting-rules-table-columns',
   })
   return (
diff --git a/frontend/src/features/alerts/components/alerts-table-header.tsx b/frontend/src/features/alerts/components/alerts-table-header.tsx
index 27d94317c..2907d597e 100644
--- a/frontend/src/features/alerts/components/alerts-table-header.tsx
+++ b/frontend/src/features/alerts/components/alerts-table-header.tsx
@@ -4,6 +4,9 @@ import type { ColSize, useResizableColumns } from '@/shared/hooks/useResizableCo
 
 const TH = 'whitespace-nowrap px-3 py-2.5 text-left align-middle font-medium'
 export const ALERTS_TABLE_COLS = [6, 36, 38, 38, 360, 130, 180, 160, 160, 90, 90, 160]
+// Icon/checkbox tracks (indices 0-3) keep their exact width as min; label
+// tracks get a floor sized to keep the uppercase heading readable at ~11px.
+export const ALERTS_TABLE_MINS = [6, 36, 38, 38, 140, 90, 110, 90, 110, 90, 80, 100]
 
 export function AlertsTableHeader({
   allChecked,
diff --git a/frontend/src/features/alerts/components/tagging-rules-table.tsx b/frontend/src/features/alerts/components/tagging-rules-table.tsx
index f8aecb94a..89d9a742a 100644
--- a/frontend/src/features/alerts/components/tagging-rules-table.tsx
+++ b/frontend/src/features/alerts/components/tagging-rules-table.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { ResizableGridHeader } from '@/shared/components/ui/resizable-grid-header'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import type { TaggingRule } from '../types/tagging-rule.types'
 import { TaggingRulesTableRow } from './tagging-rules-table-row'
 
@@ -14,14 +14,15 @@ export function TaggingRulesTable({
   onOpen: (rule: TaggingRule) => void
 }) {
   const { t } = useTranslation()
+  const taggingHeaders = [t('taggingRules.table.rule'), t('taggingRules.table.tags'), t('taggingRules.table.conditions')]
   const { template: tableCols, startDrag } = useResizableColumns(TAGGING_RULES_TABLE_COLS, {
-    min: 60,
+    min: colMins(taggingHeaders),
     storageKey: 'tagging-rules-table-columns',
   })
   return (
     <div className="mt-4 min-h-0 flex-1 overflow-x-auto overflow-y-auto rounded-xl border border-border">
       <ResizableGridHeader
-        headers={[t('taggingRules.table.rule'), t('taggingRules.table.tags'), t('taggingRules.table.conditions')]}
+        headers={taggingHeaders}
         tableCols={tableCols}
         startDrag={startDrag}
         className="bg-muted/30 py-2.5 font-medium"
diff --git a/frontend/src/features/alerts/pages/AlertsPage.tsx b/frontend/src/features/alerts/pages/AlertsPage.tsx
index 255ee5ac1..d4eab2373 100644
--- a/frontend/src/features/alerts/pages/AlertsPage.tsx
+++ b/frontend/src/features/alerts/pages/AlertsPage.tsx
@@ -31,7 +31,7 @@ import { AlertsStatusTabs } from '../components/alerts-status-tabs'
 import { AlertsVolumeCard } from '../components/alerts-volume-card'
 import { AlertsBreakdownCard } from '../components/alerts-breakdown-card'
 import { AlertsBulkBar } from '../components/alerts-bulk-bar'
-import { AlertsTableHeader, ALERTS_TABLE_COLS, ALERTS_TABLE_COLUMN_COUNT } from '../components/alerts-table-header'
+import { AlertsTableHeader, ALERTS_TABLE_COLS, ALERTS_TABLE_COLUMN_COUNT, ALERTS_TABLE_MINS } from '../components/alerts-table-header'
 import { AlertRow } from '../components/alert-row'
 import { EchoesTimeline } from '../components/echoes-timeline'
 import { AlertDrawer } from '../components/alert-drawer'
@@ -60,7 +60,7 @@ export function AlertsPage() {
   const [expandedEchoes, setExpandedEchoes] = useState<Set<string>>(new Set())
   const [openAlert, setOpenAlert] = useState<Alert | null>(null)
   const { widths: alertTableWidths, startDrag: startAlertTableDrag } = useResizableColumns(ALERTS_TABLE_COLS, {
-    min: 6,
+    min: ALERTS_TABLE_MINS,
     storageKey: 'alerts-table-columns',
   })
   const alertTableWidth = alertTableWidths.reduce<number>(
diff --git a/frontend/src/features/api-keys/pages/ApiKeysPage.tsx b/frontend/src/features/api-keys/pages/ApiKeysPage.tsx
index a8dea30d0..85c2adc8a 100644
--- a/frontend/src/features/api-keys/pages/ApiKeysPage.tsx
+++ b/frontend/src/features/api-keys/pages/ApiKeysPage.tsx
@@ -13,7 +13,7 @@ import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
 import { ColumnResizeHandle } from '@/shared/components/ui/column-resize-handle'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { useBilling } from '@/features/billing'
 import { EnterpriseGate } from '@/shared/components/EnterpriseGate'
 import { apiKeysHttpService } from '../services/api-keys-http.service'
@@ -41,8 +41,17 @@ export function ApiKeysPage() {
   const [dialog, setDialog] = useState<DialogState>(null)
   const [confirm, setConfirm] = useState<ConfirmState>(null)
   const [revealed, setRevealed] = useState<{ name: string; token: string } | null>(null)
+  const apiKeyHeaders = [
+    t('apiKeys.col.name'),
+    t('apiKeys.col.allowedIps'),
+    t('apiKeys.col.created'),
+    t('apiKeys.col.lastRotated'),
+    t('apiKeys.col.expires'),
+    t('apiKeys.col.status'),
+    t('apiKeys.col.actions'),
+  ]
   const { template: tableCols, startDrag } = useResizableColumns(API_KEY_TABLE_COLS, {
-    min: 60,
+    min: colMins(apiKeyHeaders),
     storageKey: 'api-keys-table-columns',
   })
 
@@ -140,15 +149,7 @@ export function ApiKeysPage() {
               className="grid items-center gap-3 border-b border-border bg-muted/40 px-4 py-2 text-[10px] uppercase tracking-wider text-muted-foreground"
               style={{ gridTemplateColumns: tableCols }}
             >
-              {[
-                t('apiKeys.col.name'),
-                t('apiKeys.col.allowedIps'),
-                t('apiKeys.col.created'),
-                t('apiKeys.col.lastRotated'),
-                t('apiKeys.col.expires'),
-                t('apiKeys.col.status'),
-                t('apiKeys.col.actions'),
-              ].map((header, index, headers) => (
+              {apiKeyHeaders.map((header, index, headers) => (
                 <div key={index} data-resizable-col className="relative min-w-0 pr-2 last:pr-0 last:text-right">
                   {header}
                   {index < headers.length - 1 && <ColumnResizeHandle onMouseDown={startDrag(index)} />}
diff --git a/frontend/src/features/audit/pages/AuditPage.tsx b/frontend/src/features/audit/pages/AuditPage.tsx
index 594ef3820..cad1eda3a 100644
--- a/frontend/src/features/audit/pages/AuditPage.tsx
+++ b/frontend/src/features/audit/pages/AuditPage.tsx
@@ -18,7 +18,7 @@ import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
 import { ColumnResizeHandle } from '@/shared/components/ui/column-resize-handle'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { auditHttpService } from '../services/audit-http.service'
 import { humanizeAction } from '../lib'
 import type { AuditListQuery, AuditLog } from '../types/audit.types'
@@ -436,10 +436,6 @@ function TableCard({
 }) {
   const { t } = useTranslation()
   const { formatDateTime } = useDateFormat()
-  const { template, startDrag } = useResizableColumns(AUDIT_TABLE_COLS, {
-    min: 60,
-    storageKey: 'audit-log-table-columns',
-  })
   const headers = [
     t('audit.table.timestamp'),
     t('audit.table.actor'),
@@ -449,6 +445,10 @@ function TableCard({
     t('audit.table.ip'),
     '',
   ]
+  const { template, startDrag } = useResizableColumns(AUDIT_TABLE_COLS, {
+    min: colMins(headers),
+    storageKey: 'audit-log-table-columns',
+  })
   return (
     <section className="overflow-x-auto overflow-y-hidden rounded-xl border border-border bg-card">
       <div
diff --git a/frontend/src/features/dashboard/components/renderers/TableRenderer.tsx b/frontend/src/features/dashboard/components/renderers/TableRenderer.tsx
index 0ef2f9a83..0ae2c1114 100644
--- a/frontend/src/features/dashboard/components/renderers/TableRenderer.tsx
+++ b/frontend/src/features/dashboard/components/renderers/TableRenderer.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ResizableTableHeader } from '@/shared/components/ui/resizable-table-header'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import type { Row } from '@/features/dashboard/types'
 
 export function TableRenderer({ rows }: { rows: Row[] }) {
@@ -11,7 +11,7 @@ export function TableRenderer({ rows }: { rows: Row[] }) {
     return Object.keys(rows[0])
   }, [rows])
   const { widths, startDrag } = useResizableColumns(columns.map(() => 'minmax(120px, 1fr)'), {
-    min: 80,
+    min: colMins(columns),
     storageKey: `dashboard-table-columns:${columns.join('|')}`,
   })
 
diff --git a/frontend/src/features/datasources/pages/DataSourcesPage.tsx b/frontend/src/features/datasources/pages/DataSourcesPage.tsx
index d320c3fa2..242ed7663 100644
--- a/frontend/src/features/datasources/pages/DataSourcesPage.tsx
+++ b/frontend/src/features/datasources/pages/DataSourcesPage.tsx
@@ -32,7 +32,7 @@ import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
 import { ColumnResizeHandle } from '@/shared/components/ui/column-resize-handle'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { TimeRangePicker, presetRange, type TimeRange } from '@/shared/components/ui/time-range-picker'
 import {
   datasourcesHttpService as svc,
@@ -137,8 +137,15 @@ export function DataSourcesPage() {
   const [range, setRange] = useState<TimeRange>(() => presetRange('24h'))
   const [counts, setCounts] = useState<Record<TabId, number> | null>(null)
   const [openId, setOpenId] = useState<string | null>(null)
+  const datasourcesLabelMins = colMins([
+    t('datasources.cols.source'),
+    t('datasources.cols.type'),
+    t('datasources.cols.status'),
+    t('datasources.cols.events24h'),
+    t('datasources.cols.lastSeen'),
+  ])
   const { template: listCols, startDrag } = useResizableColumns(LIST_COLS, {
-    min: 40,
+    min: [36, ...datasourcesLabelMins],
     storageKey: 'datasources-table-columns',
   })
 
diff --git a/frontend/src/features/incidents/components/incident-alerts-picker-header.tsx b/frontend/src/features/incidents/components/incident-alerts-picker-header.tsx
index cb7e92af6..e18e98870 100644
--- a/frontend/src/features/incidents/components/incident-alerts-picker-header.tsx
+++ b/frontend/src/features/incidents/components/incident-alerts-picker-header.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { ResizableTableHeader } from '@/shared/components/ui/resizable-table-header'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 
 const TH = 'whitespace-nowrap px-3 py-2.5 text-left align-middle font-medium'
 const INCIDENT_ALERTS_TABLE_COLS = [6, 36, 360, 90, 160]
@@ -13,8 +13,13 @@ export function IncidentAlertsPickerHeader({
   onTogglePage: () => void
 }) {
   const { t } = useTranslation()
+  const pickerLabelMins = colMins([
+    t('alerts.table.alert'),
+    t('alerts.table.severity'),
+    t('alerts.table.time'),
+  ])
   const { widths, startDrag } = useResizableColumns(INCIDENT_ALERTS_TABLE_COLS, {
-    min: 6,
+    min: [6, 36, ...pickerLabelMins],
     storageKey: 'incident-alerts-picker-table-columns',
   })
   return (
diff --git a/frontend/src/features/incidents/components/incidents-table.tsx b/frontend/src/features/incidents/components/incidents-table.tsx
index 0487c3ec0..c08ee30a6 100644
--- a/frontend/src/features/incidents/components/incidents-table.tsx
+++ b/frontend/src/features/incidents/components/incidents-table.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { ResizableGridHeader } from '@/shared/components/ui/resizable-grid-header'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { cn } from '@/shared/lib/utils'
 import { useDateFormat } from '@/shared/lib/datetime'
 import { SEV_TONE, TABLE_COLS, sevKey } from '../lib/incident-meta'
@@ -11,21 +11,22 @@ import { IncidentAssignee } from './incident-assignee'
 export function IncidentsTable({ incidents, onOpen }: { incidents: Incident[]; onOpen: (i: Incident) => void }) {
   const { t } = useTranslation()
   const df = useDateFormat()
+  const incidentsHeaders = [
+    t('incidents.table.name'),
+    t('incidents.table.status'),
+    t('incidents.table.severity'),
+    t('incidents.table.assignee'),
+    t('incidents.table.alerts'),
+    t('incidents.table.created'),
+  ]
   const { template: tableCols, startDrag } = useResizableColumns(TABLE_COLS, {
-    min: 60,
+    min: colMins(incidentsHeaders),
     storageKey: 'incidents-table-columns',
   })
   return (
     <div className="mt-4 min-h-0 flex-1 overflow-x-auto overflow-y-auto rounded-xl border border-border">
       <ResizableGridHeader
-        headers={[
-          t('incidents.table.name'),
-          t('incidents.table.status'),
-          t('incidents.table.severity'),
-          t('incidents.table.assignee'),
-          t('incidents.table.alerts'),
-          t('incidents.table.created'),
-        ]}
+        headers={incidentsHeaders}
         tableCols={tableCols}
         startDrag={startDrag}
         className="bg-muted/30 py-2.5 font-medium"
diff --git a/frontend/src/features/log-explorer/components/LogExplorerView.tsx b/frontend/src/features/log-explorer/components/LogExplorerView.tsx
index 07c4952c9..46d94bee3 100644
--- a/frontend/src/features/log-explorer/components/LogExplorerView.tsx
+++ b/frontend/src/features/log-explorer/components/LogExplorerView.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { Button } from '@/shared/components/ui/button'
 import { presetRange, resolveRange, type TimeRange } from '@/shared/components/ui/time-range-picker'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { looksLikeSql } from '../domain/sql-sync'
 import { logGridColumnSizes, ResultsHeader, ResultRow } from './log-results'
 import { MSG_FIELDS, SRC_FIELDS, flattenDoc, pick, previewText } from '../domain/flatten'
@@ -367,8 +367,15 @@ export function LogExplorerView({ initial, onConfigChange }: LogExplorerViewProp
     () => `log-explorer-table-columns:${columns.length > 0 ? columns.join('|') : `auto:${autoColumns.join('|')}`}`,
     [columns, autoColumns],
   )
+  // Grid mins: three fixed leading tracks (row-actions, indicator, time),
+  // then either the user-picked field names (manual mode) or source + auto
+  // fields + a flex message column (default mode). Label-based floors keep
+  // header names from cropping when a column is dragged narrow.
+  const logGridMins = columns.length > 0
+    ? [20, 3, 168, ...colMins(columns)]
+    : [20, 3, 168, 96, ...colMins(autoColumns), 96]
   const { template: tableCols, startDrag } = useResizableColumns(logGridColumnSizes(columns, autoColumns), {
-    min: 20,
+    min: logGridMins,
     storageKey: columnStorageKey,
   })
 
diff --git a/frontend/src/features/parsing-filters/pages/ParsingFiltersPage.tsx b/frontend/src/features/parsing-filters/pages/ParsingFiltersPage.tsx
index f6820f01a..87eaa3b9f 100644
--- a/frontend/src/features/parsing-filters/pages/ParsingFiltersPage.tsx
+++ b/frontend/src/features/parsing-filters/pages/ParsingFiltersPage.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
 import { ResizableTableHeader } from '@/shared/components/ui/resizable-table-header'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { pipelinesHttpService } from '@/features/data-processing/services/data-processing-http.service'
 import type { Pipeline } from '@/features/data-processing/types/data-processing.types'
 import { TestPlaygroundModal } from '@/features/playground/components/TestPlaygroundModal'
@@ -47,8 +47,16 @@ export function ParsingFiltersPage() {
   const [editing, setEditing] = useState<{ filter: Pipeline; creating: boolean } | null>(null)
   const [preparingNew, setPreparingNew] = useState(false)
   const [showTestModal, setShowTestModal] = useState(false)
+  const parsingFiltersHeaders = [
+    t('parsingFilters.cols.filter'),
+    t('parsingFilters.cols.dataTypes'),
+    t('parsingFilters.cols.type'),
+    t('parsingFilters.cols.active'),
+    48,
+    48,
+  ]
   const { widths, startDrag } = useResizableColumns(PARSING_FILTERS_TABLE_COLS, {
-    min: 48,
+    min: colMins(parsingFiltersHeaders),
     storageKey: 'parsing-filters-table-columns',
   })
 
@@ -247,10 +255,10 @@ export function ParsingFiltersPage() {
           <table className="min-w-full border-collapse table-fixed">
             <ResizableTableHeader
               cells={[
-                { content: t('parsingFilters.cols.filter'), className: TH },
-                { content: t('parsingFilters.cols.dataTypes'), className: TH },
-                { content: t('parsingFilters.cols.type'), className: TH },
-                { content: t('parsingFilters.cols.active'), className: `${TH} text-center` },
+                { content: parsingFiltersHeaders[0], className: TH },
+                { content: parsingFiltersHeaders[1], className: TH },
+                { content: parsingFiltersHeaders[2], className: TH },
+                { content: parsingFiltersHeaders[3], className: `${TH} text-center` },
                 { content: null, className: TH },
                 { content: null, className: TH },
               ]}
diff --git a/frontend/src/features/soar/components/ExecutionsView.tsx b/frontend/src/features/soar/components/ExecutionsView.tsx
index 24f4a5120..ce7eba8a1 100644
--- a/frontend/src/features/soar/components/ExecutionsView.tsx
+++ b/frontend/src/features/soar/components/ExecutionsView.tsx
@@ -14,7 +14,7 @@ import { Button } from "@/shared/components/ui/button";
 import { Input } from "@/shared/components/ui/input";
 import { InfiniteScrollSentinel } from "@/shared/components/ui/infinite-scroll";
 import { ResizableGridHeader } from "@/shared/components/ui/resizable-grid-header";
-import { useResizableColumns } from "@/shared/hooks/useResizableColumns";
+import { colMins, useResizableColumns } from "@/shared/hooks/useResizableColumns";
 import {
   presetRange,
   resolveRange,
@@ -80,8 +80,17 @@ export function ExecutionsView() {
   // each node's position in the flow's DAG (its ancestor chain) in the Node
   // column — the flow itself carries no per-run state, only its shape.
   const [runFlows, setRunFlows] = useState<Record<string, Flow>>({});
+  const executionsHeaders = [
+    t("soar.executions.cols.status"),
+    t("soar.executions.cols.node"),
+    t("soar.executions.cols.flow"),
+    t("soar.executions.cols.command"),
+    t("soar.executions.cols.agent"),
+    t("soar.executions.cols.date"),
+    t("soar.executions.cols.retries"),
+  ];
   const { template: tableCols, startDrag } = useResizableColumns(COLS, {
-    min: 60,
+    min: colMins(executionsHeaders),
     storageKey: "soar-executions-table-columns",
   });
   const [page, setPage] = useState(0);
@@ -272,15 +281,7 @@ export function ExecutionsView() {
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card">
         <div className="min-h-0 flex-1 overflow-x-auto overflow-y-auto">
           <ResizableGridHeader
-            headers={[
-              t("soar.executions.cols.status"),
-              t("soar.executions.cols.node"),
-              t("soar.executions.cols.flow"),
-              t("soar.executions.cols.command"),
-              t("soar.executions.cols.agent"),
-              t("soar.executions.cols.date"),
-              t("soar.executions.cols.retries"),
-            ]}
+            headers={executionsHeaders}
             tableCols={tableCols}
             startDrag={startDrag}
             className="sticky top-0 z-10 bg-muted/30 py-2.5 font-medium"
diff --git a/frontend/src/features/soar/pages/FlowsPage.tsx b/frontend/src/features/soar/pages/FlowsPage.tsx
index c70e65a58..00f382bb9 100644
--- a/frontend/src/features/soar/pages/FlowsPage.tsx
+++ b/frontend/src/features/soar/pages/FlowsPage.tsx
@@ -7,7 +7,7 @@ import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
 import { ResizableTableHeader } from '@/shared/components/ui/resizable-table-header'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { PlatformBroadcastButton, broadcast, BULK_PATHS } from '@/features/platform-broadcast'
 import { soarFlowsService } from '../services/soar-flows.service'
 import { soarExecutionsService } from '../services/soar-executions.service'
@@ -67,8 +67,17 @@ export function FlowsPage() {
   // flows exist.
   const [stateVersion, setStateVersion] = useState(0)
   const [stats, setStats] = useState<Record<string, FlowStat>>({})
+  const flowsHeaders = [
+    t('soar.cols.flow'),
+    t('soar.cols.platform'),
+    t('soar.cols.conditions'),
+    t('soar.cols.commands'),
+    t('soar.cols.lastRun'),
+    t('soar.cols.active'),
+    '',
+  ]
   const { widths, startDrag } = useResizableColumns(FLOWS_TABLE_COLS, {
-    min: 60,
+    min: [...colMins(flowsHeaders.slice(0, -1)), 60],
     storageKey: 'soar-flows-table-columns',
   })
   const flowsTableWidth = widths.reduce<number>(
@@ -209,12 +218,12 @@ export function FlowsPage() {
             </colgroup>
             <ResizableTableHeader
               cells={[
-                { content: t('soar.cols.flow'), className: TH },
-                { content: t('soar.cols.platform'), className: TH },
-                { content: t('soar.cols.conditions'), className: `${TH} text-center` },
-                { content: t('soar.cols.commands'), className: `${TH} text-center` },
-                { content: t('soar.cols.lastRun'), className: TH },
-                { content: t('soar.cols.active'), className: `${TH} text-center` },
+                { content: flowsHeaders[0], className: TH },
+                { content: flowsHeaders[1], className: TH },
+                { content: flowsHeaders[2], className: `${TH} text-center` },
+                { content: flowsHeaders[3], className: `${TH} text-center` },
+                { content: flowsHeaders[4], className: TH },
+                { content: flowsHeaders[5], className: `${TH} text-center` },
                 { content: null, className: TH },
               ]}
               widths={widths}
diff --git a/frontend/src/features/team/pages/TeamPage.tsx b/frontend/src/features/team/pages/TeamPage.tsx
index 25cfbb1e5..81726620a 100644
--- a/frontend/src/features/team/pages/TeamPage.tsx
+++ b/frontend/src/features/team/pages/TeamPage.tsx
@@ -27,7 +27,7 @@ import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
 import { ColumnResizeHandle } from '@/shared/components/ui/column-resize-handle'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { SUPPORTED_LANGUAGES } from '@/shared/i18n'
 import { rolesHttpService, TeamHttpError, usersHttpService } from '../services/team-http.service'
 import type {
@@ -163,8 +163,16 @@ function MembersView({ roles }: { roles: Role[] }) {
 
   const [openId, setOpenId] = useState<string | null>(null)
   const [inviteOpen, setInviteOpen] = useState(false)
+  const memberHeaders = [
+    t('team.members.colUser'),
+    t('team.members.colRoles'),
+    t('team.members.col2fa'),
+    t('team.members.colStatus'),
+    '',
+  ]
+  const memberMins = [...colMins(memberHeaders.slice(0, -1)), 40]
   const { template: memberCols, startDrag } = useResizableColumns(MEMBER_COLS, {
-    min: 40,
+    min: memberMins,
     storageKey: 'team-members-table-columns',
   })
 
@@ -219,13 +227,7 @@ function MembersView({ roles }: { roles: Role[] }) {
           className="grid w-max min-w-full items-center gap-3 border-b border-border bg-muted/40 px-4 py-2 text-[10px] uppercase tracking-wider text-muted-foreground"
           style={{ gridTemplateColumns: memberCols }}
         >
-          {[
-            t('team.members.colUser'),
-            t('team.members.colRoles'),
-            t('team.members.col2fa'),
-            t('team.members.colStatus'),
-            '',
-          ].map((header, index, headers) => (
+          {memberHeaders.map((header, index, headers) => (
             <div key={index} data-resizable-col className="relative min-w-0 pr-2 last:pr-0">
               {header}
               {index < headers.length - 1 && <ColumnResizeHandle onMouseDown={startDrag(index)} />}
diff --git a/frontend/src/features/threat-intel/components/FeedsList.tsx b/frontend/src/features/threat-intel/components/FeedsList.tsx
index 3a9469164..9c7cd96e4 100644
--- a/frontend/src/features/threat-intel/components/FeedsList.tsx
+++ b/frontend/src/features/threat-intel/components/FeedsList.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { useTiFeeds } from '../hooks/use-ti-feeds'
 import { FeedRow } from './FeedRow'
 import { FeedsHeader } from './FeedsHeader'
@@ -9,8 +9,13 @@ const FEED_COLS = [12, '1fr', 160, 140]
 export function FeedsList() {
   const { t } = useTranslation()
   const { data, isLoading } = useTiFeeds()
+  const feedLabelMins = colMins([
+    t('threatIntel.feeds.table.name'),
+    t('threatIntel.feeds.table.type'),
+    t('threatIntel.feeds.table.accuracy'),
+  ])
   const { template: tableCols, startDrag } = useResizableColumns(FEED_COLS, {
-    min: 36,
+    min: [12, ...feedLabelMins],
     storageKey: 'threat-intel-feed-table-columns',
   })
 
diff --git a/frontend/src/features/threat-intel/components/IocTable.tsx b/frontend/src/features/threat-intel/components/IocTable.tsx
index 72729aafe..ffa054fc4 100644
--- a/frontend/src/features/threat-intel/components/IocTable.tsx
+++ b/frontend/src/features/threat-intel/components/IocTable.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ResizableGridHeader } from '@/shared/components/ui/resizable-grid-header'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import type { EntitySummary } from '../domain/threat-intel.types'
 import { Pagination } from '@/shared/components/ui/pagination'
 import { IocRow } from './IocRow'
@@ -36,8 +36,18 @@ export function IocTable({
   const { t } = useTranslation()
   const scrollRef = useRef<HTMLDivElement | null>(null)
   const sentinelRef = useRef<HTMLDivElement | null>(null)
+  const iocHeaders = [
+    '',
+    t('threatIntel.iocs.table.type'),
+    t('threatIntel.iocs.table.indicator'),
+    t('threatIntel.iocs.table.reputation'),
+    t('threatIntel.iocs.table.tags'),
+    t('threatIntel.iocs.table.lastSeen'),
+    '',
+  ]
+  const iocLabelMins = colMins(iocHeaders.slice(1, -1))
   const { template: tableCols, startDrag } = useResizableColumns(IOC_COLS, {
-    min: 36,
+    min: [4, ...iocLabelMins, 36],
     storageKey: 'threat-intel-ioc-table-columns',
   })
 
@@ -60,15 +70,7 @@ export function IocTable({
       <div className="flex h-[60dvh] flex-col overflow-hidden rounded-xl border border-border bg-card">
         <div ref={scrollRef} className="flex-1 overflow-x-auto overflow-y-auto">
           <ResizableGridHeader
-            headers={[
-              '',
-              t('threatIntel.iocs.table.type'),
-              t('threatIntel.iocs.table.indicator'),
-              t('threatIntel.iocs.table.reputation'),
-              t('threatIntel.iocs.table.tags'),
-              t('threatIntel.iocs.table.lastSeen'),
-              '',
-            ]}
+            headers={iocHeaders}
             tableCols={tableCols}
             startDrag={startDrag}
             className="sticky top-0 z-10"
diff --git a/frontend/src/features/user-auditor/pages/UserAuditorPage.tsx b/frontend/src/features/user-auditor/pages/UserAuditorPage.tsx
index a6e3daf8c..e30ef051b 100644
--- a/frontend/src/features/user-auditor/pages/UserAuditorPage.tsx
+++ b/frontend/src/features/user-auditor/pages/UserAuditorPage.tsx
@@ -28,7 +28,7 @@ import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
 import { ColumnResizeHandle } from '@/shared/components/ui/column-resize-handle'
-import { useResizableColumns } from '@/shared/hooks/useResizableColumns'
+import { colMins, useResizableColumns } from '@/shared/hooks/useResizableColumns'
 import { CustomFilterBar } from '@/shared/components/filters/CustomFilterBar'
 import type {
   CustomFilter,
@@ -108,8 +108,16 @@ export function UserAuditorPage() {
   const [error, setError] = useState(false)
   const [stats, setStats] = useState<ADUserStats | null>(null)
   const [openUser, setOpenUser] = useState<ADUser | null>(null)
+  const listLabelMins = colMins([
+    t('userAuditor.list.account'),
+    t('userAuditor.list.identity'),
+    t('userAuditor.list.status'),
+    t('userAuditor.list.lastLogon'),
+    t('userAuditor.list.lastSeen'),
+    t('userAuditor.list.tenant'),
+  ])
   const { template: listCols, startDrag } = useResizableColumns(LIST_COLS, {
-    min: 36,
+    min: [32, ...listLabelMins, 36],
     storageKey: 'user-auditor-table-columns',
   })
 
diff --git a/frontend/src/shared/hooks/useResizableColumns.test.ts b/frontend/src/shared/hooks/useResizableColumns.test.ts
index 4e7dc6dbd..e9d67756b 100644
--- a/frontend/src/shared/hooks/useResizableColumns.test.ts
+++ b/frontend/src/shared/hooks/useResizableColumns.test.ts
@@ -3,9 +3,9 @@ import { act, renderHook } from '@testing-library/react'
 import { useResizableColumns } from './useResizableColumns'
 
 describe('useResizableColumns', () => {
-  test('initial template joins px numbers and passes strings through', () => {
+  test('initial template keeps px tracks fixed and floors flex tracks with default min', () => {
     const { result } = renderHook(() => useResizableColumns([32, '1fr', 120]))
-    expect(result.current.template).toBe('32px 1fr 120px')
+    expect(result.current.template).toBe('32px minmax(40px, 1fr) 120px')
   })
 
   test('drag updates the column width and rebuilds the template', () => {
@@ -18,7 +18,7 @@ describe('useResizableColumns', () => {
       })
     })
     expect(result.current.widths[0]).toBe(180)
-    expect(result.current.template).toBe('180px 1fr 60px')
+    expect(result.current.template).toBe('180px minmax(40px, 1fr) 60px')
   })
 
   test('min clamp is enforced when consumers write below it via drag', () => {
@@ -32,4 +32,12 @@ describe('useResizableColumns', () => {
     expect(result.current.widths[0]).toBe(10)
     expect(result.current.template).toBe('10px')
   })
+
+  test('per-column min array is used to floor flex tracks in the template', () => {
+    const { result } = renderHook(() =>
+      useResizableColumns([32, '1fr', '1fr'], { min: [32, 120, 80] }),
+    )
+    expect(result.current.template).toBe('32px minmax(120px, 1fr) minmax(80px, 1fr)')
+    expect(result.current.mins).toEqual([32, 120, 80])
+  })
 })
diff --git a/frontend/src/shared/hooks/useResizableColumns.ts b/frontend/src/shared/hooks/useResizableColumns.ts
index 5b882553e..4e22f7b56 100644
--- a/frontend/src/shared/hooks/useResizableColumns.ts
+++ b/frontend/src/shared/hooks/useResizableColumns.ts
@@ -4,12 +4,35 @@ import type { MouseEvent as ReactMouseEvent } from 'react'
 export type ColSize = string | number
 
 interface Opts {
-  min?: number
+  min?: number | number[]
   storageKey?: string
 }
 
+const DEFAULT_MIN = 40
+
+const minAt = (min: number | number[] | undefined, index: number): number => {
+  if (min == null) return DEFAULT_MIN
+  if (typeof min === 'number') return min
+  return min[index] ?? DEFAULT_MIN
+}
+
+// Per-column min widths derived from the header label so a drag/resize can't
+// crop the label. Pass a number in the labels array for icon/checkbox columns
+// where no label exists — that number is used verbatim as the min.
+// ponytail: 15px/char + 30px padding is a rough uppercase-heading approximation;
+// tune the charPx/padding options if a specific font stack diverges.
+export function colMins(
+  labels: Array<string | number>,
+  opts: { floor?: number; charPx?: number; padding?: number } = {},
+): number[] {
+  const { floor = 60, charPx = 15, padding = 30 } = opts
+  return labels.map((l) =>
+    typeof l === 'number' ? l : Math.max(floor, Math.round(l.length * charPx) + padding),
+  )
+}
+
 export function useResizableColumns(initial: ColSize[], opts: Opts = {}) {
-  const min = opts.min ?? 40
+  const min = opts.min
   const storageKey = opts.storageKey
   const [widths, setWidths] = useState<ColSize[]>(initial)
   const dragRef = useRef<{ index: number; startX: number; startW: number; measured: number[] } | null>(null)
@@ -23,7 +46,7 @@ export function useResizableColumns(initial: ColSize[], opts: Opts = {}) {
       const d = dragRef.current
       if (!d) return
       e.preventDefault()
-      const w = Math.max(min, d.startW + (e.clientX - d.startX))
+      const w = Math.max(minAt(min, d.index), d.startW + (e.clientX - d.startX))
       setWidths((prev) => {
         const next = d.measured.length === prev.length ? d.measured.slice() : prev.slice()
         next[d.index] = w
@@ -54,9 +77,9 @@ export function useResizableColumns(initial: ColSize[], opts: Opts = {}) {
       const measured = row
         ? Array.from(row.children)
             .filter((child): child is HTMLElement => child instanceof HTMLElement && child.hasAttribute('data-resizable-col'))
-            .map((child) => Math.max(min, child.getBoundingClientRect().width))
+            .map((child, i) => Math.max(minAt(min, i), child.getBoundingClientRect().width))
         : []
-      const startW = measured[index] ?? cell?.getBoundingClientRect().width ?? min
+      const startW = measured[index] ?? cell?.getBoundingClientRect().width ?? minAt(min, index)
       if (measured.length > 0) setWidths(measured)
       dragRef.current = { index, startX: e.clientX, startW, measured }
       document.body.style.cursor = 'col-resize'
@@ -65,7 +88,17 @@ export function useResizableColumns(initial: ColSize[], opts: Opts = {}) {
     [min],
   )
 
-  const template = widths.map((w) => (typeof w === 'number' ? `${w}px` : w)).join(' ')
+  const mins = widths.map((_, i) => minAt(min, i))
+  // ponytail: wrap simple fr tracks in minmax so a narrow viewport can't
+  // collapse labels below their per-column min. Fixed px tracks and strings
+  // that already declare their own function (e.g. `minmax(120px, 1fr)`) are
+  // passed through unchanged.
+  const template = widths
+    .map((w, i) => {
+      if (typeof w === 'number') return `${w}px`
+      return /^[\d.]+fr$/.test(w.trim()) ? `minmax(${mins[i]}px, ${w})` : w
+    })
+    .join(' ')
 
-  return { widths, template, setWidths, startDrag }
+  return { widths, template, setWidths, startDrag, mins }
 }

From 14704d3b79d844efcbabb6bbda424a77cf420dcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sanchez.saez.alex01@gmail.com>
Date: Thu, 10 Sep 2026 15:18:03 -0600
Subject: [PATCH 4/4] fix[frontend](alerts): improved alerts table min widths
 and not truncated texts

---
 frontend/src/features/alerts/components/alert-row.tsx     | 8 +++++---
 .../features/alerts/components/alerts-table-header.tsx    | 5 +++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/alerts/components/alert-row.tsx b/frontend/src/features/alerts/components/alert-row.tsx
index b8031247f..1024a0ee3 100644
--- a/frontend/src/features/alerts/components/alert-row.tsx
+++ b/frontend/src/features/alerts/components/alert-row.tsx
@@ -130,14 +130,16 @@ export function AlertRow({
           onCreateRule={() => onCreateRule(a)}
         />
       </td>
-      <td className={`${TD} font-mono mx-auto text-[11px] text-muted-foreground`} title={a.technique}>
-        {a.technique || '—'}
+      <td className={`${TD} overflow-hidden font-mono text-[11px] text-muted-foreground`} title={a.technique}>
+        <span className="block truncate">{a.technique || '—'}</span>
       </td>
       <td className={TD}>
         <EndpointMini ep={a.target} />
       </td>
       <td className={TD}>
-        <EndpointMini ep={a.adversary} accent />
+         <div className="block truncate">
+            <EndpointMini  ep={a.adversary} accent /> 
+        </div>
       </td>
       <td className={`${TD} text-center`}>
         <span
diff --git a/frontend/src/features/alerts/components/alerts-table-header.tsx b/frontend/src/features/alerts/components/alerts-table-header.tsx
index 2907d597e..b8119b9cb 100644
--- a/frontend/src/features/alerts/components/alerts-table-header.tsx
+++ b/frontend/src/features/alerts/components/alerts-table-header.tsx
@@ -5,8 +5,9 @@ import type { ColSize, useResizableColumns } from '@/shared/hooks/useResizableCo
 const TH = 'whitespace-nowrap px-3 py-2.5 text-left align-middle font-medium'
 export const ALERTS_TABLE_COLS = [6, 36, 38, 38, 360, 130, 180, 160, 160, 90, 90, 160]
 // Icon/checkbox tracks (indices 0-3) keep their exact width as min; label
-// tracks get a floor sized to keep the uppercase heading readable at ~11px.
-export const ALERTS_TABLE_MINS = [6, 36, 38, 38, 140, 90, 110, 90, 110, 90, 80, 100]
+// tracks get a floor sized to keep both the uppercase heading and the row
+// content (alert name, mitre code, endpoint pill, timestamp) legible.
+export const ALERTS_TABLE_MINS = [6, 36, 38, 38, 220, 120, 160, 140, 140, 120, 120, 130]
 
 export function AlertsTableHeader({
   allChecked,