Skip to content

fix: move gql variables prettify icon to a better position#6455

Merged
bijin-bruno merged 2 commits intousebruno:mainfrom
barelyhuman:fix/BRU-2357
Dec 18, 2025
Merged

fix: move gql variables prettify icon to a better position#6455
bijin-bruno merged 2 commits intousebruno:mainfrom
barelyhuman:fix/BRU-2357

Conversation

@barelyhuman
Copy link
Contributor

@barelyhuman barelyhuman commented Dec 18, 2025

Description

Move the prettify icon for GQL Variables editor to a similar position as the Query Editor.

JIRA

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.

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.

Visual

Screen.Recording.2025-12-18.at.6.12.45.PM.mov

Publishing to New Package Managers

Please see here for more information.

Summary by CodeRabbit

  • Style
    • Adjusted the vertical positioning of the Prettify button in the GraphQL Variables editor.

✏️ Tip: You can customize this high-level summary in your review settings.

Copilot AI review requested due to automatic review settings December 18, 2025 12:36
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 18, 2025

Walkthrough

A CSS class was edited in the GraphQL Variables component: the Prettify button's top-0 class was removed, leaving its absolute positioning at the right edge intact (right-0, z-10) with no behavior changes.

Changes

Cohort / File(s) Change Summary
GraphQL Variables styling
packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
Removed the top-0 class from the Prettify button's class list, preserving absolute, right-0, and z-10 (no functional changes)

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Areas to spot-check:

  • Confirm visual placement across responsive breakpoints and themes.
  • Verify no test snapshots or style assertions rely on the previous class.

Suggested reviewers

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

Suggested labels

size/S

Poem

A tiny class slipped off the line,
The prettify button stayed divine,
Right-aligned and simply free,
A minor tweak — serenity. 🎈

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: repositioning the prettify icon in the GQL Variables editor, which aligns with the PR's stated objective.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ 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

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

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR moves the prettify icon in the GraphQL Variables editor to avoid overlap with the tab navigation. The icon position is adjusted from the top edge to below the tabs, making it properly visible and accessible to users.

Key Changes

  • Updated the prettify button position in GraphQL Variables editor from top-0 to top-13 to account for the tab bar above the editor

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link
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

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 62b8784 and 5aa7a13.

📒 Files selected for processing (1)
  • packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions. () => {} is good
No space between function name and parentheses. func() not func ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly

Files:

  • packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
🧠 Learnings (1)
📚 Learning: 2025-12-17T21:41:24.730Z
Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.

Applied to files:

  • packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
  • GitHub Check: CodeQL analysis (javascript-typescript)
  • GitHub Check: Agent
  • GitHub Check: SSL Tests - macOS
  • GitHub Check: Playwright E2E Tests
  • GitHub Check: SSL Tests - Linux
  • GitHub Check: SSL Tests - Windows
  • GitHub Check: CLI Tests
  • GitHub Check: Unit Tests

@bijin-bruno bijin-bruno merged commit aac219d into usebruno:main Dec 18, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants