feat(web): add drag-to-resize columns on AI providers table

[fengshao1227]

Summary

Implement drag-to-resize for the Identity and Base URL columns on the AI Providers table, allowing users to widen truncated channel names. Built with a custom useResizableColumns hook — no external dependencies.

Scope

• Frontend panel
• Manager Server
• CPA panel mode
• Full Docker mode
• Native packages / release
• Docs / Wiki
• CI / build / tooling

Changes

• New useResizableColumns hook: pointer event drag handling, min-width enforcement, localStorage persistence, double-click reset
• Convert static SCSS $table-columns to dynamic inline gridTemplateColumns on header and data rows
• Add resize handle elements (position: absolute in grid gap) with hover/active visual feedback
• Resize handles hidden on mobile (card layout unaffected)
• i18n resize_column aria-label for all 4 locales

User Impact

Users with long channel name prefixes can now drag the Identity column wider to see distinguishing suffixes. Widths persist across page refreshes. Double-click a handle to reset.

Compatibility / Runtime Notes

• CPA panel mode: Same behavior
• Manager Server mode: Same behavior
• Full Docker / native packages: Same behavior

Data / Security Notes

N/A — column widths stored in browser localStorage only

Risk / Rollback

Risk level: Low

Rollback notes:

• Revert the commit; stale providerTable.columnWidths entries in localStorage are harmless and ignored

Verification

• Type check
• Lint
• Tests
• Build
• Manual UI check
• Docs/link check
• Not applicable, docs-only

Commands / evidence:

npm --workspace apps/web run test    # 82 passed, 673 tests
npm --workspace apps/web run type-check  # clean

Screenshots / Recordings

N/A

Docs

• README updated
• Wiki updated
• Release notes needed
• Not needed

Related

Closes #276

[seakee]

Thanks for working on this and for addressing the column-width usability issue.

After reviewing the implementation, I do not plan to merge this PR in its current form.

The main concern is that the implementation applies the complete grid-template-columns value as an inline style to both the header and every table row. This overrides the responsive SCSS layout, including the card-style layout used on smaller screens. As a result, the claim that the mobile layout remains unaffected does not hold in practice.

The implementation also duplicates the full table column definition in TypeScript while the same layout is already maintained in SCSS. These values have already diverged from the current main branch, so merging this would reintroduce outdated column widths and make future table changes harder to maintain.

There are also several unresolved interaction and robustness issues, including incomplete pointer cleanup, no maximum width constraint, insufficient validation of persisted localStorage values, and no usable keyboard interaction for the resize handles.

The underlying request is valid, but I think this needs a different implementation approach. The responsive layout should remain controlled by SCSS, while React only provides the adjustable column widths through CSS custom properties. This would avoid overriding the mobile layout and eliminate the need to duplicate the entire grid definition in two places.

Given the current design and maintenance concerns, I am going to close this PR rather than merge it. Thank you again for the contribution and the effort put into improving the provider table.