fix: add tab card height and overflow styling to document editor

[czwe-01]

#4552

Summary by CodeRabbit

• Style
  • Improved documentation editor layout and overflow handling to better manage vertical spacing relative to header and tab areas.

[coderabbitai]

Warning

Rate limit exceeded

@czwe-01 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 5 minutes and 17 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 75c229c and 315ea18.

📒 Files selected for processing (1)

• shesha-reactjs/src/configuration-studio/styles.ts

Walkthrough

A styling adjustment introduces a new constant for tab card height and updates the documentation editor area to calculate its vertical size by subtracting both header and tab card heights from the viewport height, with automatic overflow handling.

Changes

Cohort / File(s)	Summary
Doc Editor Styling shesha-reactjs/src/configuration-studio/styles.ts	Adds tabCardHeight constant (4 units) and updates doc editor area height calculation to calc(100vh - headerHeight - tabCardHeight) with overflow: auto enforcement.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• Thulasizwe/fix/3558 #4232: Modifies layout-related styles to compute viewport height minus header-related constants and add overflow handling.

Suggested reviewers

• James-Baloyi

Poem

🐰 A constant so small, just four units tall,
Heights subtract with care, no overflow at all,
Doc editor finds space, between tab and the sky,
Layout perfection—no scroll shall pass by! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding tab card height and overflow styling to the document editor, which matches the file modification in styles.ts.
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
• 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: 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/configuration-studio/styles.ts`:
- Line 23: The stylesheet uses a magic constant tabCardHeight (tabCardHeight =
4) and computes editor heights from 100vh minus that offset, which is brittle;
change the layout so the editor fills its parent container instead of doing
viewport math: remove usage of tabCardHeight and any 100vh-based height
calculations in styles.ts and switch the editor/container rules (where
tabCardHeight is referenced, including the occurrence around line 106) to use
height: 100% or flex/grid sizing so the editor inherits the constrained parent
height, ensuring the editor/container classes and any related selectors are
updated to use container-driven sizing.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 41c4fed and 75c229c.

📒 Files selected for processing (1)

• shesha-reactjs/src/configuration-studio/styles.ts