fix: layout glitches on multiline environment variables when scrolling#7732
Merged
Conversation
shubh-bruno
requested review from
bijin-bruno,
helloanoop,
lohit-bruno,
naman-bruno and
sid-bruno
as code owners
Contributor
WalkthroughThis PR adds a height transition to the EnvironmentVariablesTable container and adjusts virtualized row handling: forwards row styles/props, computes table height from variable count, bounds overscan, removes fixed item height, tweaks placeholders, and appends a new empty row when editing the last row's value. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User as User
participant UI as EnvironmentVariablesTable
participant Virtuoso as TableVirtuoso
participant Formik as Formik
User->>UI: type into value field (last row)
UI->>Formik: onChange(newValue)
Note right of UI: detect isLastRow
UI->>Formik: setTimeout -> append empty variable at next index (uid, defaults)
Formik->>Virtuoso: variables list updated
Virtuoso->>UI: re-render rows (forwards style/props)
UI->>UI: container height changes
Note right of UI: CSS transition animates height (rgba(0,0,0,0.5))
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/bruno-app/src/components/EnvironmentVariablesTable/index.js (1)
22-33:⚠️ Potential issue | 🟠 MajorFix the
TableRowshape:itemis{ variable, index }, not the raw variable.
TableVirtuosopasses each element fromfilteredVariablesdirectly as theitemprop. SincefilteredVariablescontains{ variable, index }objects, accessingitem.uidanditem.namereturnsundefined. This collapses all rowdata-testidvalues toenv-var-row-undefined, breaking test selectors. The memoization comparator then comparesundefined === undefinedfor every row (always true), preventing necessary re-renders. Excludingstylefrom the comparison also breaks Virtuoso's positioning logic.Suggested fix
const TableRow = React.memo( ({ children, item, style, ...rest }) => ( - <tr key={item.uid} style={style} {...rest} data-testid={`env-var-row-${item?.name}`}> + <tr + style={style} + {...rest} + data-testid={`env-var-row-${item?.variable?.uid ?? item?.index}`} + > {children} </tr> - ), - (prevProps, nextProps) => { - const prevUid = prevProps?.item?.uid; - const nextUid = nextProps?.item?.uid; - return prevUid === nextUid && prevProps.children === nextProps.children; - } + ) );🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/bruno-app/src/components/EnvironmentVariablesTable/index.js` around lines 22 - 33, TableRow currently treats item as the raw variable but TableVirtuoso provides item as { variable, index }, causing uid/name to be undefined and memoization to incorrectly block renders; update the render to read const variable = item?.variable and use variable?.uid for the key and variable?.name in data-testid, and update the memo comparator to compare prevProps.item?.variable?.uid !== nextProps.item?.variable?.uid (or equality) plus prevProps.children === nextProps.children AND prevProps.style === nextProps.style so style changes from Virtuoso still trigger re-renders.
🧹 Nitpick comments (1)
packages/bruno-app/src/components/EnvironmentVariablesTable/index.js (1)
627-628: Please rewrite or remove this inline note.The sentence is hard to parse and already stale: it mentions
0.1s, while the new height transition is0.15s. If this is a real follow-up, capture the concrete layout constraint instead of leaving a half-formed note.As per coding guidelines "Add in meaningful comments instead of obvious ones where complex code flow is explained properly."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/bruno-app/src/components/EnvironmentVariablesTable/index.js` around lines 627 - 628, The inline dev note in the EnvironmentVariablesTable component about button placement is stale and unclear—remove it or replace it with a concise, actionable comment that documents the real layout constraint: TableVirtuoso's height transition (0.15s) can cause buttons inside the virtuoso container to reflow during mount, so either render action buttons outside the TableVirtuoso virtualization container or use a stable positioning strategy (e.g., position: sticky/fixed or a separate toolbar) to avoid transition-driven layout shifts; update the comment to reference TableVirtuoso and the 0.15s transition and include the chosen mitigation so future maintainers know why the buttons are placed where they are.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/bruno-app/src/components/EnvironmentVariablesTable/index.js`:
- Around line 563-565: The placeholder logic in EnvironmentVariablesTable treats
falsy values like 0 and false as empty because it uses !variable.value; update
the placeholder expression to only consider null/undefined or blank strings as
empty. Specifically, replace the !variable.value check in the placeholder prop
for the variable.value field with an explicit check like variable.value ===
undefined || variable.value === null || (typeof variable.value === 'string' &&
variable.value.trim() === '') so numeric 0 and boolean false are preserved as
real values.
---
Outside diff comments:
In `@packages/bruno-app/src/components/EnvironmentVariablesTable/index.js`:
- Around line 22-33: TableRow currently treats item as the raw variable but
TableVirtuoso provides item as { variable, index }, causing uid/name to be
undefined and memoization to incorrectly block renders; update the render to
read const variable = item?.variable and use variable?.uid for the key and
variable?.name in data-testid, and update the memo comparator to compare
prevProps.item?.variable?.uid !== nextProps.item?.variable?.uid (or equality)
plus prevProps.children === nextProps.children AND prevProps.style ===
nextProps.style so style changes from Virtuoso still trigger re-renders.
---
Nitpick comments:
In `@packages/bruno-app/src/components/EnvironmentVariablesTable/index.js`:
- Around line 627-628: The inline dev note in the EnvironmentVariablesTable
component about button placement is stale and unclear—remove it or replace it
with a concise, actionable comment that documents the real layout constraint:
TableVirtuoso's height transition (0.15s) can cause buttons inside the virtuoso
container to reflow during mount, so either render action buttons outside the
TableVirtuoso virtualization container or use a stable positioning strategy
(e.g., position: sticky/fixed or a separate toolbar) to avoid transition-driven
layout shifts; update the comment to reference TableVirtuoso and the 0.15s
transition and include the chosen mitigation so future maintainers know why the
buttons are placed where they are.
🪄 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: 5ba89434-5814-477e-9b21-ae763bdc0495
📒 Files selected for processing (2)
packages/bruno-app/src/components/EnvironmentVariablesTable/StyledWrapper.jspackages/bruno-app/src/components/EnvironmentVariablesTable/index.js
sid-bruno
approved these changes
Apr 16, 2026
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/bruno-app/src/components/EnvironmentVariablesTable/index.js (1)
628-629: Consider making this comment actionable.If this is a known issue to address later, consider adding a
TODO:prefix or linking to a tracking issue so it doesn't get lost.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/bruno-app/src/components/EnvironmentVariablesTable/index.js` around lines 628 - 629, Convert the informal note above the TableVirtuoso buttons into an actionable TODO: add a "TODO:" prefix, briefly describe the exact problem (buttons cause TableVirtuoso to render with a transition height 0.1s), and include either a tracking issue ID or a short URL (or "TBD" if none) so it can be found later; update the comment near where TableVirtuoso and the buttons are referenced (search for TableVirtuoso and the buttons render block in EnvironmentVariablesTable) and keep the comment concise and neutral for future follow-up.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/bruno-app/src/components/EnvironmentVariablesTable/index.js`:
- Around line 575-587: The value onChange handler appends a new row when
isLastRow is true, but handleNameChange does the same, causing duplicate empty
rows if both setTimeouts run; update the logic around formik.setFieldValue in
the value change branch (and similarly in handleNameChange if applicable) to
first check the current last row in formik.values (e.g., inspect
formik.values[formik.values.length - 1]) and only append a new empty row (via
formik.setFieldValue with uuid()) if that last row is not already an empty
placeholder (name === '' && value === '' && !secret or enabled state), or
alternatively gate the append with a boolean flag (e.g., isAppendingEmptyRow)
stored in component state to prevent double-appends.
---
Nitpick comments:
In `@packages/bruno-app/src/components/EnvironmentVariablesTable/index.js`:
- Around line 628-629: Convert the informal note above the TableVirtuoso buttons
into an actionable TODO: add a "TODO:" prefix, briefly describe the exact
problem (buttons cause TableVirtuoso to render with a transition height 0.1s),
and include either a tracking issue ID or a short URL (or "TBD" if none) so it
can be found later; update the comment near where TableVirtuoso and the buttons
are referenced (search for TableVirtuoso and the buttons render block in
EnvironmentVariablesTable) and keep the comment concise and neutral for future
follow-up.
🪄 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: 7db3aeb3-7ce0-47ff-8c3e-7f4109a5b85a
📒 Files selected for processing (1)
packages/bruno-app/src/components/EnvironmentVariablesTable/index.js
sid-bruno
changed the title
bijin-bruno
approved these changes
Apr 16, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds dynamic height compute to reduce glitchy render on tables with multiline values.
JIRA
Contribution Checklist:
Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.
Publishing to New Package Managers
Please see here for more information.
Summary by CodeRabbit
New Features
Style
Bug Fixes