This PR refactors table resize with the new layout using flex-wrap to
manage all the table with divs.
Due to flex-wrap, we have to manually compute some filling divs like the
last column filler div or the empty table container, otherwise the
header can wrap and display on two lines, which is the only real issue
with this implementation with wrap.
Remember that **using flex-wrap is necessary** to handle z-index as we
want for the scrolling and hovered portal cell interaction UX. Otherwise
we lose the capacity to have z-index fine-tuning on very specific edge
cases.
To handle the resize, the most performant solution was to create CSS
variables for each column width on the table, creating a class for each
column, then assigning each class to all divs that are in the same
column, using the index of the array or the fixed known position index
for that.
This PR also refactors a lot of small details around the resizing, the
naming of the component and the DX.
It notably introduces a new hook : `useHTMLElementByIdWhenAvailable`,
that is very relies on MutationObserver API to get a native HTML element
as soon as it is rendered.
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
Lucas Bordeau
5b9cda3341