Skip to content

fix(editor): Set deterministic width for sidebar #15753

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

nikhilkuria
Copy link
Contributor

@nikhilkuria nikhilkuria commented May 27, 2025

Summary

The sidebar had two properties, min-width (200px) and max-width (244px). When the sidebar renders, it has the min-width of 200px.
Unless there are components in it that push for a wider width, it stays at 200px.

When there is the creatorCTA, it does not have a width set. Because of this, it pushes the sidebar wider and hence the components looks weird.

There are two ways we can fix it.

  1. Keep the side bar at 244px, but fix the layout of the elements in the bottom
  2. Restrict the width of the side bar to be 200px

I decided to go with the second. In the first, the wide sidebar looked weird due to a lot of empty spaces.

This is how the fixed sidebar looks like

Screenshot 2025-05-27 at 15 21 36

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/ADO-3591/bug-creators-banner-and-main-sidebar-spacing-issues

Review / Merge checklist

  • PR title and summary are descriptive. (conventions)
  • Docs updated or follow-up ticket created.
  • Tests included.
  • PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

@n8n-assistant n8n-assistant bot added the n8n team Authored by the n8n team label May 27, 2025
@nikhilkuria nikhilkuria changed the title fix(ADO-3591) set deterministic width for sidebar fix(editor): Set deterministic width for sidebar May 27, 2025
Copy link

codecov bot commented May 27, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

📢 Thoughts on this report? Let us know!

@nikhilkuria nikhilkuria marked this pull request as ready for review May 27, 2025 15:00
@nikhilkuria nikhilkuria requested review from a team and Cadiac May 27, 2025 15:00
Copy link

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

cubic reviewed 1 file and found no issues. Review PR in cubic.dev.

Copy link
Contributor

@Cadiac Cadiac left a comment

Choose a reason for hiding this comment

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

☺️

@shortstacked
Copy link
Contributor

Workflow Test Results 📊 ⚠️ 4 Warnings (0 Failed), 👍 79 Successful out of 83 total workflows.

View full workflow run

Tested Ref: 226d1df5dbb01963125a399a7937d01e9582ecb4 by @Cadiac

⚠️ Warnings (4)

Workflow ID Workflow Name Reason
237 BasicLLMChain:AzureChat Workflow contains new data that previously did not exist.
35 Slack:User:getPresence info:UserProfile:get update... Workflow contains new data that previously did not exist.
257 Agent:auto-fix:anthropic Workflow contains new data that previously did not exist.
53 ConvertKit:CustomField:create getAll update delete... Workflow contains new data that previously did not exist.

Copy link
Contributor

⚠️ Some Cypress E2E specs are failing, please fix them before merging

6 similar comments
Copy link
Contributor

⚠️ Some Cypress E2E specs are failing, please fix them before merging

Copy link
Contributor

⚠️ Some Cypress E2E specs are failing, please fix them before merging

Copy link
Contributor

⚠️ Some Cypress E2E specs are failing, please fix them before merging

Copy link
Contributor

⚠️ Some Cypress E2E specs are failing, please fix them before merging

Copy link
Contributor

⚠️ Some Cypress E2E specs are failing, please fix them before merging

Copy link
Contributor

⚠️ Some Cypress E2E specs are failing, please fix them before merging

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
n8n team Authored by the n8n team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants