fix(editable-table): expand values cells on focus

[tintinthedev]

Description

Issue #8179 pretty much explains the entire problem. The two main causes were:

1. CodeMirror's lineWrapping was set to false. Long lines would never wrap.
2. The CSS for the table that holds the key-value pairs for each request had fixed heights and hidden overflow, clipping any content beyond a line.

Changes

TL;DR: After the changes, writing multi-line text on the table's key cells automatically makes them expand vertically just enough so the content can be clearly visualized. The change applies to the tables in params, body and header tabs.

MultiLineEditor/index.js — enabled lineWrapping: true so CodeMirror wraps long text and calculates content height correctly.

MultiLineEditor/StyledWrapper.js — replaced hardcoded line-height: 30px with proportional line-height: 1.5 for proper multi-line spacing. Removed height/margin-top !important overrides on .CodeMirror-cursor so CM5 sizes the cursor dynamically to match the line-height.

SingleLineEditor/index.js — enabled lineWrapping: true (same as MultiLineEditor) for consistency in the request headers tab.

SingleLineEditor/StyledWrapper.js — replaced hardcoded line-height: 1.875rem with line-height: 1.5. Removed cursor !important overrides (same pattern).

EditableTable/StyledWrapper.js — added three :focus-within rules:

• td:focus-within — removes height/max-height/overflow/nowrap constraints on the cell when its editor is focused, letting content grow vertically.
• td:focus-within > div — removes constraints on the content wrapper, with align-items: center for proper centering.
• Blurred state inner div uses height: 1.5em with align-items: flex-start and min-height: 0 on children, clipping cleanly to exactly one line of text.

Videos showing before vs. after

Before

old.behaviour.mp4

After

new.behaviour.mp4

Contribution Checklist:

• I've used AI significantly to create this pull request
• The pull request only addresses one issue or adds one feature.
• The pull request does not introduce any breaking changes
• I have added screenshots or gifs to help explain the change if applicable.
• I have read the contribution guidelines.
• Create an issue and link to the pull request.

Summary by CodeRabbit

• Bug Fixes
  • Enabled text wrapping in single- and multi-line editors for improved visibility of long content.
  • Improved table cell editor styling to better manage height, overflow, and behavior during focus and resizing.
  • Standardized cursor appearance and line-height across editors for a more consistent, stable editing experience.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 65fc6334-a8f1-47e3-9555-7cfd64c2a23e

📥 Commits

Reviewing files that changed from the base of the PR and between 37475b1 and 31e80ab.

📒 Files selected for processing (1)

• packages/bruno-app/src/components/EditableTable/StyledWrapper.js

💤 Files with no reviewable changes (1)

• packages/bruno-app/src/components/EditableTable/StyledWrapper.js

---

Walkthrough

Editor components are standardized with consistent CodeMirror styling, line wrapping is enabled across single-line and multi-line editors, and keyboard shortcuts are refined. EditableTable cell sizing is adjusted to manage editor overflow and focus transitions.

Changes

Editor Layout Standardization

Layer / File(s)	Summary
CodeMirror cursor and line-height normalization packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js, packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js	.CodeMirror line-height is unified to 1.5 across both editors. .CodeMirror-cursor height and margin-top overrides are removed, leaving border styling intact.
Line wrapping and keyboard shortcut configuration packages/bruno-app/src/components/MultiLineEditor/index.js, packages/bruno-app/src/components/SingleLineEditor/index.js	Both editors enable lineWrapping: true. MultiLineEditor adds extraKeys handlers for Cmd-F and Ctrl-F to prevent default find behavior and adjusts runShortcut noop format.
EditableTable cell sizing and focus behavior packages/bruno-app/src/components/EditableTable/StyledWrapper.js	Table cell content wrappers switch to 1.5em height/max-height with flex-start alignment and min-height:0; :focus-within states set height: auto, max-height: none, overflow: visible, and force nested single-line editors/CodeMirror to expand. .cm-line enforces single-line ellipsis behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• usebruno/bruno#7810: Both PRs modify packages/bruno-app/src/components/EditableTable/StyledWrapper.js to adjust tbody td/CodeMirror height/overflow behavior and related editor styling.
• usebruno/bruno#6843: Both PRs modify packages/bruno-app/src/components/EditableTable/StyledWrapper.js’s CodeMirror/table-cell overflow and .cm-line styling.

Suggested reviewers

• helloanoop
• sid-bruno
• lohit-bruno
• bijin-bruno
• naman-bruno

Poem

Lines now wrap, cursors stand tall,
Cells stretch and breathe when focus calls.
Small CSS shifts, a gentler view,
Editors tidy, rows renew. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: fixing editable table cell expansion on focus, which directly addresses the PR's core objective of resolving issue #8179.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/bruno-app/src/components/EditableTable/StyledWrapper.js`:
- Around line 104-124: The CSS contains a duplicated rule selector ">
div:not(.drag-handle) > * { min-height: 0; }" inside StyledWrapper.js (present
under the initial collapsed state and again under :focus-within); remove the
redundant occurrence so only a single declaration for that selector remains,
keeping whichever placement best reflects intended cascade (prefer keeping the
one outside :focus-within) and ensure no visual regressions.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: c915b6e0-f0ee-4fbb-b79c-805496bc78d8

📥 Commits

Reviewing files that changed from the base of the PR and between b70bfb2 and 37475b1.

📒 Files selected for processing (5)

• packages/bruno-app/src/components/EditableTable/StyledWrapper.js
• packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js
• packages/bruno-app/src/components/MultiLineEditor/index.js
• packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
• packages/bruno-app/src/components/SingleLineEditor/index.js