Fix: allow resizing multiple selected columns simultaneously (#4921)

[Ahamed1846]

Allow resizing multiple columns at once (#4921)

Fixes #4921

This PR enables resizing multiple fully-selected columns simultaneously, matching the behavior of spreadsheet tools like Google Sheets and LibreOffice Calc. Previously, resizing affected only the column whose handle was dragged, even when multiple columns were selected.

Technical details

Problem

Column resizing only affected the one being dragged, even if multiple columns were fully selected. Users expect spreadsheet-style behavior where selected columns resize together.

Fix

A new function handleResize() was added in Header.svelte that:

• Receives the resized column and new width
• Applies the width to all fully selected columns
• Falls back to single-column behavior when only one column is selected

Behavior Changes

• Dragging a column edge now resizes:
  • Only that column when it’s the only selected column
  • All selected columns when the dragged column is part of a multi-column selection
• Matches the UX of major spreadsheet applications
• No backend changes required
• More intuitive and consistent behavior

Files touched

• mathesar_ui/src/systems/table-view/header/Header.svelte
• mathesar_ui/src/components/sheet/SheetCellResizer.svelte
• mathesar_ui/src/stores/table-data/columns.ts

---

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the develop branch of the repository
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I tried running the project locally and verified that there are no
  visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[seancolsen]

I'd like to also see changes in SheetCellResizer.svelte so that all the columns resize in realtime as the user is dragging.

[Ahamed1846]

Implemented realtime multi-column resizing in SheetCellResizer.svelte as requested.
Let me know if you'd like any tweaks!

[seancolsen]

This is working pretty well now!

There's still a small issue that I wonder if you could try fixing...

When I stop resizing multiple columns, I notice a momentary flash where the columns go back to their original size briefly, and then return to their new size thereafter. It looks a bit janky. And it doesn't happen when resizing just one column.

[Ahamed1846]

I’ve spent some time digging into this, but I’m hitting a wall. I’ve tried a few approaches, but none led to a clean solution. Could you share how you’d approach this or point me in the right direction? I want to make sure I’m moving forward correctly.

[seancolsen]

@Ahamed1846 it looks like you're part of the Kalvium student group. Could you get some help from other students in the program? Can some of you work together to figure this out?

[Ahamed1846]

Fixed the flashing issue during multi-column resizing.
Let me know if you'd like any tweaks!

[seancolsen]

@Ahamed1846 sorry, but the deeper I dug into this PR the more problems I kept finding. While your work did appear to function correctly, there were some problems with the implementation. In getting my head around those problems, I ended up doing the implementation myself via #5075. I apologize, but it would take a bit of time (that I don't have) to explain all the differences. I encourage you to look at my PR though if you're curious.