Skip to content

Thulasizwe/bug/3557#4611

Merged
James-Baloyi merged 8 commits intoshesha-io:mainfrom
czwe-01:thulasizwe/bug/3557
Mar 19, 2026
Merged

Thulasizwe/bug/3557#4611
James-Baloyi merged 8 commits intoshesha-io:mainfrom
czwe-01:thulasizwe/bug/3557

Conversation

@czwe-01
Copy link
Copy Markdown
Collaborator

@czwe-01 czwe-01 commented Mar 17, 2026

#3557

Summary by CodeRabbit

  • Style

    • Refined spacing and margins across components (radio groups and a separator).
    • Adjusted sizing behavior for read-only fields.
    • Simplified wrapper structure in multi-color input.
    • Updated table scrolling and removed fixed-height constraint in the editor area.
  • New Features

    • Preserve dimensions when editing attachments and data tables in designer mode.
    • Added a dimensions prop and styling support for table components.
  • Bug Fixes

    • Flex-wrap visibility now respects display settings.

czwe-01 added 2 commits March 17, 2026 10:22
- Removed unnecessary margin from SectionSeparator.
- Added preserveDimensionsInDesigner property to AttachmentsEditor.
- Adjusted flexWrap logic in ContainerComponent based on flexDirection.
- Removed default width and height from DateField when readOnly.
- Cleaned up MultiColorInput by removing unused InputRow.
- Updated RadioGroup to apply default margins for better spacing.
- Removed unused InputRow import from MultiColorInput.
- Cleaned up the margin style in RadioGroup for improved readability.
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 17, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

Walkthrough

Small UI and styling tweaks plus a new optional dimensions prop and designer flags: spacing and wrapper adjustments, read‑only sizing change, preserveDimensionsInDesigner flags added, dimensions prop threaded through table components into styling to emit height rules and adjust overflow.

Changes

Cohort / File(s) Summary
Layout & Spacing
shesha-reactjs/src/components/sectionSeparator/index.tsx, shesha-reactjs/src/designer-components/radio/radioGroup.tsx, shesha-reactjs/src/designer-components/multiColorInput/index.tsx
Removed marginRight: 1 from SectionSeparator wrapper; applied DEFAULT_MARGINS to RadioGroup Space wrapper; removed InputRow wrapper around Direction SettingInput in MultiColorInput.
Designer flags
shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx, shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx
Added preserveDimensionsInDesigner: true to AttachmentsEditor and DataTable component metadata.
Read-only sizing
shesha-reactjs/src/designer-components/dateField/dateField.tsx
Removed forced width: '100%' / height: '100%' from the read-only finalStyle branch; sizing now comes from font/dimensions/fullStyle combination.
Table dimensions API & plumbing
shesha-reactjs/src/components/dataTable/index.tsx, shesha-reactjs/src/components/reactTable/interfaces.ts, shesha-reactjs/src/components/reactTable/index.tsx, shesha-reactjs/src/components/reactTable/styles/styles.ts, shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx
Introduced optional dimensions?: IDimensionsValue prop across DataTable/ReactTable interfaces and components; forwarded dimensions through table wrapper to DataTable and into useMainStyles to emit height/min/max-height CSS.
Table styles & overflow
shesha-reactjs/src/designer-components/dataTable/table/styles/styles.ts, shesha-reactjs/src/components/reactTable/styles/styles.ts
Added .sha-react-table { overflow: auto; } in GlobalTableStyles; removed overflow-x: auto from inner table rules; integrated dimensions-driven height rules into table styling.
Container settings logic
shesha-reactjs/src/designer-components/container/settingsForm.ts
Changed visibility condition for flexWrap field: now controlled by display === 'flex' instead of flexDirection.
Configuration-studio styling
shesha-reactjs/src/configuration-studio/styles.ts
Removed explicit overflow: auto and fixed-height calc from .sha-cs-doc-editor, eliminating the fixed scroll/height constraint.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant Designer as Designer UI
participant Wrapper as TableWrapper
participant DataTable as DataTable Component
participant ReactTable as ReactTable Component
participant Styles as useMainStyles

Designer->>Wrapper: provide props (including dimensions)
Wrapper->>DataTable: render with dimensions={props.dimensions}
DataTable->>ReactTable: pass dimensions prop down
ReactTable->>Styles: call useMainStyles({ ..., dimensions })
Styles-->>ReactTable: return styles including height/min/max rules
ReactTable-->>DataTable: render table with applied styles
DataTable-->>Wrapper: rendered table (with overflow/height behavior)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • James-Baloyi
  • AlexStepantsov

Poem

🐰 I nudged a margin, slipped a wrapper free,

Kept widths and heights where they ought to be.
Tables learn to scroll and designers keep their frame,
Small tidy hops — the layout's not the same.
🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title is a branch name (Thulasizwe/bug/3557) that provides no meaningful information about the changeset; it does not describe the actual changes made. Replace the branch name with a descriptive title that summarizes the main change, such as 'Fix table dimensions and styling issues' or another title that reflects the primary objective of the changes.
✅ 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 unit tests (beta)
  • Create PR with unit tests
📝 Coding Plan
  • Generate coding plan for human review comments

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

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

@czwe-01 czwe-01 requested a review from James-Baloyi March 17, 2026 08:46
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@shesha-reactjs/src/designer-components/container/containerComponent.tsx`:
- Line 64: The current assignment for flexWrap in containerComponent.tsx uses
model?.flexDirection?.includes('row') ? model.flexWrap : 'unset', which forces
'unset' when flexDirection is undefined; update the condition in the component
rendering logic (where flexWrap is computed) to treat an undefined/absent
model.flexDirection as row-default so that when model.flexWrap is provided it is
preserved (e.g., evaluate as true if model.flexDirection is undefined OR
includes('row')), otherwise fall back to 'unset' — adjust the expression that
computes flexWrap accordingly (reference: the flexWrap assignment using
model?.flexDirection?.includes('row') and model.flexWrap).

In `@shesha-reactjs/src/designer-components/radio/radioGroup.tsx`:
- Line 62: The Space component's inline style is appending "px" to
DEFAULT_MARGINS which already include units, causing duplicated units; update
the margin expression in radioGroup.tsx (where Space is rendered with
model.direction) to use the raw DEFAULT_MARGINS values without adding "px" (e.g.
margin: `${DEFAULT_MARGINS.vertical} ${DEFAULT_MARGINS.horizontal}`) so the CSS
receives valid unit-suffixed strings.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: f72d6899-de99-4102-ae15-351a8a9b9715

📥 Commits

Reviewing files that changed from the base of the PR and between 97daf5e and b51d34c.

📒 Files selected for processing (6)
  • shesha-reactjs/src/components/sectionSeparator/index.tsx
  • shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx
  • shesha-reactjs/src/designer-components/container/containerComponent.tsx
  • shesha-reactjs/src/designer-components/dateField/dateField.tsx
  • shesha-reactjs/src/designer-components/multiColorInput/index.tsx
  • shesha-reactjs/src/designer-components/radio/radioGroup.tsx
💤 Files with no reviewable changes (2)
  • shesha-reactjs/src/designer-components/dateField/dateField.tsx
  • shesha-reactjs/src/components/sectionSeparator/index.tsx

czwe-01 added 2 commits March 17, 2026 11:15
- Simplified flexWrap assignment in ContainerComponent to directly use model.flexWrap.
- Adjusted hidden condition in settingsForm to check for display instead of flexDirection.
- Cleaned up margin style in RadioGroup for better consistency.
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@shesha-reactjs/src/designer-components/dataTable/table/styles/styles.ts`:
- Around line 61-62: Remove the added overflow: auto from the .sha-react-table
rule so it no longer reintroduces overflow-x on the outer container; ensure
overflow-x remains applied only on the inner .sha-table (as intended by PR
`#4534`) and let the component-scoped overflow-y logic in the reactTable styles
(the dynamic overflow-y/boxShadow/freezeHeaders behavior) control vertical
overflow without being overridden by a global rule.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 63ac7e5a-9726-4bd1-8512-3ebc7600aa43

📥 Commits

Reviewing files that changed from the base of the PR and between 9b6d048 and 1df51dc.

📒 Files selected for processing (1)
  • shesha-reactjs/src/designer-components/dataTable/table/styles/styles.ts

- Introduced dimensions prop in DataTable and ReactTable interfaces for better layout control.
- Updated styles to accommodate dimensions for height, minHeight, and maxHeight.
- Enhanced TableWrapper to pass dimensions prop for consistent behavior in the designer.
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
shesha-reactjs/src/components/reactTable/styles/styles.ts (1)

222-240: ⚠️ Potential issue | 🟠 Major

Restore horizontal overflow on the inner table container.

The styling now applies dimension constraints, but horizontal scrolling is no longer guaranteed in this hook. In non-designer renders, this can remove horizontal scroll for wide tables.

💡 Proposed fix
       .${shaTable} {
         border-spacing: 0;
         display: inline-block;
         min-width: 100%;
+        overflow-x: auto;

Based on learnings: moving overflow-x: auto from the outer .sha-react-table container to the inner .sha-table element is intentional and works correctly.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@shesha-reactjs/src/components/reactTable/styles/styles.ts` around lines 222 -
240, The inner table container lost horizontal scrolling; add horizontal
overflow back to the inner table element by ensuring the CSS for .${shaTable}
includes overflow-x: auto (and overflow-y: visible/hidden as needed) so wide
tables can scroll horizontally; locate the styles for the .${shaTable} block and
restore/add the overflow-x rule there (rather than on the outer
.sha-react-table) so non-designer renders regain horizontal scroll.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@shesha-reactjs/src/components/reactTable/styles/styles.ts`:
- Around line 222-240: The inner table container lost horizontal scrolling; add
horizontal overflow back to the inner table element by ensuring the CSS for
.${shaTable} includes overflow-x: auto (and overflow-y: visible/hidden as
needed) so wide tables can scroll horizontally; locate the styles for the
.${shaTable} block and restore/add the overflow-x rule there (rather than on the
outer .sha-react-table) so non-designer renders regain horizontal scroll.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 10765e32-727f-4965-ad8d-fb83b970b176

📥 Commits

Reviewing files that changed from the base of the PR and between 1df51dc and e3df0cc.

📒 Files selected for processing (6)
  • shesha-reactjs/src/components/dataTable/index.tsx
  • shesha-reactjs/src/components/reactTable/index.tsx
  • shesha-reactjs/src/components/reactTable/interfaces.ts
  • shesha-reactjs/src/components/reactTable/styles/styles.ts
  • shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx
  • shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx

@James-Baloyi James-Baloyi merged commit cb6aad1 into shesha-io:main Mar 19, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants