[atable] modal z-sorting

[crabinak]

@Alchez @agritheory This is to hopefully address #239.

In order to clip the modal within the table container, I had to change it from fixed to absolute positioning. I had to rework how it positions itself as a result. The modal now gets the cumulative width of previous cells within the row/height of previous rows in the table to position itself correctly. I added an extra "pinned_extra_columns" variant in the Histoire list story where you can see the modal display under the pinned columns (I also wrapped atable in a positioned div to make sure it is positioning relative to the table and not the page) . It feels like this works a bit better than before as it is now contained within the table instead of sort of floating above everything.

I set the pinned columns to z-index 10 and the modal is 5, so we can have some leeway in between if we need it.

There is one small glitch that is confounding me where the modal is visible within the 1px row border when it is beneath sticky columns. I have no idea what is causing this, but let me know if you are seeing it as well.

[github-actions]

Coverage Report for ./atable

Status	Category	Percentage	Covered / Total
🔴	Lines	66.39% (🎯 70%)	164 / 247
🔴	Statements	67.55% (🎯 70%)	177 / 262
🟢	Functions	79.24% (🎯 70%)	42 / 53
🔴	Branches	44.67% (🎯 70%)	88 / 197

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
atable/src/components/ACell.vue	90.9%	60.71%	100%	90.74%	109, 132-135, 165, 173-175
atable/src/components/ARow.vue	64.28%	56.25%	75%	58.33%	51-65, 17
atable/src/components/ATable.vue	55.55%	35.29%	81.81%	54.71%	107-111, 121-149, 163-164
atable/src/components/ATableModal.vue	33.33%	25%	33.33%	28.57%	22-41
atable/src/stores/table.ts	74%	50%	84.21%	73.91%	40-41, 54, 85-86, 108-112, 128, 135, 139-150, 177, 185-186, 192
Unchanged Files
atable/src/utils.ts	100%	100%	100%	100%
atable/src/components/AExpansionRow.vue	0%	0%	0%	0%	33-3
atable/src/components/ATableHeader.vue	100%	57.14%	100%	100%
atable/src/components/ATableLoading.vue	0%	100%	100%	0%	3
atable/src/components/ATableLoadingBar.vue	0%	100%	100%	0%	3

Generated in workflow #577 for commit 5db4044 by the Vitest Coverage Report Action

[agritheory]

@crabinak I'll bet that's a transparent outline or border instead of one that would match the table (inherited?) bg-color

[Alchez]

@crabinak I changed the style logic to use offsetValues instead, which were resolving to the same value as the calculated ones. Can you check and let me know if they look fine to you as well?

There is one small glitch that is confounding me where the modal is visible within the 1px row border when it is beneath sticky columns. I have no idea what is causing this, but let me know if you are seeing it as well.

I am seeing this as well, and I'm not sure what could be causing it. Claude seems to think that it has something to do with the table properties, but I'm not convinced.

[crabinak]

@Alchez Thanks. For some reason I thought offsetValues gave issues last time, but that was probably when using a fixed modal.

I found a fix for the border issue. Since the row's border was set on the row and not the table cells, the modal ended up z-sorted above the row with borders but below the sticky content. I moved border-top from ARow to ACell and it seems to have fixed it.