James/b/table styles

[James-Baloyi]

Summary by CodeRabbit

• New Features

  • Tables now support stored/uploaded background images.

• Bug Fixes

  • Improved table sizing and horizontal scrolling behavior for more consistent layout.
  • Fixed canvas popup stacking so popups appear above other content.
  • Adjusted where table background is applied to improve header/scroll visuals.

[coderabbitai]

Walkthrough

This PR moves reactTable background styling into the inner table, changes the table wrapper layout to inline-block with content-width behavior, adds z-index to a sidebar popup container, and implements stored-file background image fetching and usage in TableWrapper while expanding useSheshaApplication to return backendUrl and httpHeaders.

Changes

Cohort / File(s)	Summary
ReactTable Container Layout & Background shesha-reactjs/src/components/reactTable/styles/styles.ts	Changed main table wrapper from display: block to display: inline-block with width: max-content and min-width: calc(100% - 16px). Moved background application from outer wrapper to inner .shaTable so background/scroll visuals apply at the table element.
SidebarContainer Z-Index shesha-reactjs/src/components/sidebarContainer/styles/styles.ts	Added z-index: 100 to .canvas-popup-container to adjust stacking order.
TableWrapper Stored Background Support shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx	Added getBackgroundImageUrl import and storedFileBackgroundUrl state with effect to fetch stored-file URLs (using backendUrl and httpHeaders from useSheshaApplication). Passed stored URL into getBackgroundStyle and updated memo deps to include it. useSheshaApplication() now exposes { anyOfPermissionsGranted, backendUrl, httpHeaders }.

Sequence Diagram

sequenceDiagram
    participant TW as TableWrapper Component
    participant Hook as useSheshaApplication Hook
    participant Helper as getBackgroundImageUrl Helper
    participant Style as getBackgroundStyle Util

    TW->>Hook: read backendUrl, httpHeaders (and permissions)
    TW->>TW: detect background.type === "storedFile"
    TW->>Helper: getBackgroundImageUrl(background, backendUrl, httpHeaders)
    Helper-->>TW: storedFileBackgroundUrl
    TW->>TW: set storedFileBackgroundUrl state
    TW->>Style: getBackgroundStyle(..., storedFileBackgroundUrl)
    Style-->>TW: computed background CSS
    TW->>TW: apply background to inner .shaTable

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• enhance DataTable component to handle column mismatches #4450: Modifies the same TableWrapper implementation and public props — directly related to stored-file background handling and hook return shape.
• fix cell divider #4474: Adjusts reactTable/styles/styles.ts layout/background rules — overlaps with the background relocation and layout change here.
• Thulasizwe/en/key information bar #3014: Implements stored-file background fetching and expands useSheshaApplication() to expose backendUrl/httpHeaders — strongly related to TableWrapper changes.

Suggested reviewers

• AlexStepantsov

Poem

🐰 A table snug in inline-block light,
Backgrounds fetched from files out of sight,
Popups stacked up with z-index so neat,
Rows and headers now settle complete —
Hooray, I hop with a developer's delight! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'James/b/table styles' is vague and does not clearly describe the actual changes made in the pull request.	Use a more descriptive title that clearly summarizes the main change, such as 'Add support for stored background images in table wrapper' or 'Update table layout and background styling'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@shesha-reactjs/src/components/reactTable/styles/styles.ts`:
- Around line 193-195: The current rule sets min-width: calc(100% - 16px)
unconditionally, causing unwanted gaps when no box-shadow/margins are present;
change the styling to only subtract the 16px when the box-shadow margin is
applied by either (A) introducing a CSS variable (e.g., --box-shadow-margin) and
using min-width: calc(100% - var(--box-shadow-margin, 0)) so the subtraction
defaults to 0, or (B) move min-width: calc(100% - 16px) into a conditional class
(e.g., .withBoxShadow or .hasBoxShadow) that you add when the 8px margins are
present; update the rule that defines display, width and min-width in styles.ts
to use one of these approaches so the subtraction is only applied when the
boxShadow margin exists.

In `@shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx`:
- Around line 159-173: The effect that sets storedFileBackgroundUrl via
fetchStoredFileUrl must handle errors and avoid stale state updates: wrap the
await getBackgroundImageUrl(...) call in try/catch and log or swallow errors to
prevent unhandled rejections, and add a cleanup mechanism (e.g., an
AbortController passed into getBackgroundImageUrl if supported or an
isCancelled/isMounted flag) inside the useEffect so that
setStoredFileBackgroundUrl is only called when the fetch is still valid; update
the useEffect to cancel or ignore outstanding requests on unmount or when
props/background changes to prevent stale updates from fetchStoredFileUrl.

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

Tie the -16px min-width to the boxShadow margin.
The width reduction is applied even when no boxShadow/margin is set, which can leave an unintended gap or trigger horizontal scroll in full-width layouts. Consider applying the subtraction only when the 8px margins are actually added.

♻️ Suggested adjustment

-      min-width: calc(100% - 16px);
+      min-width: ${boxShadow ? 'calc(100% - 16px)' : '100%'};

🤖 Prompt for AI Agents

In `@shesha-reactjs/src/components/reactTable/styles/styles.ts` around lines 193 -
195, The current rule sets min-width: calc(100% - 16px) unconditionally, causing
unwanted gaps when no box-shadow/margins are present; change the styling to only
subtract the 16px when the box-shadow margin is applied by either (A)
introducing a CSS variable (e.g., --box-shadow-margin) and using min-width:
calc(100% - var(--box-shadow-margin, 0)) so the subtraction defaults to 0, or
(B) move min-width: calc(100% - 16px) into a conditional class (e.g.,
.withBoxShadow or .hasBoxShadow) that you add when the 8px margins are present;
update the rule that defines display, width and min-width in styles.ts to use
one of these approaches so the subtraction is only applied when the boxShadow
margin exists.