WIP: Bubbly

[nang-dev]

https://www.figma.com/design/UTEJJgbZy74c4qAhBX4Vb5/PearAI?node-id=3950-28021&t=pZKBkJbUwsfXkALX-11

Can get into weird states:

Ryver's PR: #216

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to 892610f in 2 minutes and 28 seconds

More details

• Looked at 140 lines of code in 4 files
• Skipped 0 files when reviewing.
• Skipped posting 14 drafted comments based on config settings.

1. src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css:47

• Draft comment:
  Verify added margin (6px 0) does not conflict with layout elsewhere.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is asking the PR author to verify that a change does not conflict with other parts of the layout. This falls under the rule of not asking the author to double-check things or ensure behavior is intended. It does not provide a specific suggestion or point out a clear issue.

2. src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css:78

• Draft comment:
  Check use of gap and padding (6px) in tabs-container for consistent spacing.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

3. src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css:132

• Draft comment:
  Ensure overriding active tab styling with !important is intentional and theme-consistent.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50%
  This appears to be a pure UI styling change. The PR author has explicitly chosen to use !important, likely to ensure these styles take precedence over other tab styles. Since this is a UI change, we should trust that the author tested this and determined !important was necessary for the desired visual effect. The comment is just asking for confirmation without identifying any specific problem.
  The use of !important could make styles harder to override in themes or cause specificity issues. There might be a cleaner way to achieve the same effect.
  While !important can sometimes indicate CSS specificity issues, in this case it appears to be an intentional choice for a UI component where we want guaranteed styling. The author likely tested this thoroughly.
  Delete this comment. It's asking for confirmation about a UI styling choice without identifying any specific problems. We should trust the author's judgment on UI changes.

4. src/vs/workbench/browser/parts/media/compositepart.css:13

• Draft comment:
  Added margin (6px 0) looks fine; confirm alignment with surrounding composites.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  The comment is asking the PR author to confirm alignment, which is similar to asking them to double-check or ensure something. This violates the rule against asking the author to confirm their intention or ensure behavior. Therefore, this comment should not be approved.

5. src/vs/workbench/browser/parts/panel/media/panelpart.css:104

• Draft comment:
  New tab styling for panels: verify consistent padding, border-radius, and usage of !important.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is asking the PR author to verify styling details, which falls under the category of asking them to double-check things. It doesn't provide a specific suggestion or point out a clear issue with the code.

6. src/vs/workbench/browser/parts/views/media/views.css:267

• Draft comment:
  Check added border and border-radius for the viewpane filter input for visual consistency.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is purely informative and does not provide any actionable feedback or suggestions. It simply states what was done without offering any insight or asking for clarification or changes.

7. src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css:47

• Draft comment:
  Hard-coded margin added here; consider using a CSS variable for spacing to maintain theme consistency.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

8. src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css:82

• Draft comment:
  Explicit gap and padding values are set; consider using design system variables for consistency across components.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

9. src/vs/workbench/browser/parts/media/compositepart.css:13

• Draft comment:
  Margin added to composite title; ensure this aligns with overall layout spacing and design system.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

10. src/vs/workbench/browser/parts/panel/media/panelpart.css:104

• Draft comment:
  New bubbly tab styling added for panels. Verify accessibility (contrast, hover effects) and consistency with other tab components. Also, using !important may override later customizations.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50%
  None

11. src/vs/workbench/browser/parts/panel/media/panelpart.css:128

• Draft comment:
  Panel padding of 6px is added; ensure it doesn't cause unintended layout shifts with adjacent components.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

12. src/vs/workbench/browser/parts/views/media/views.css:268

• Draft comment:
  Border and border-radius added to the filter input. Confirm that these styles are consistent with theme design and accessible across different contexts.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

13. src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css:27

• Draft comment:
  Typo in the comment: 'The following tabls shows the current stacking order:' should be corrected to 'The following tabs shows the current stacking order:'
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

14. src/vs/workbench/browser/parts/panel/media/panelpart.css:17

• Draft comment:
  Typo Alert: The word 'hiden' is used in the comments (e.g., 'no border when main editor area is hiden'). It should be 'hidden' to ensure proper spelling.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_wHkHIbaIiVF7TfU0

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

Commented out border-top rule; consider removing instead of commenting if no longer needed.

[ellipsis-dev]

The active tab styling now uses hard-coded rgba values with !important. Consider using theme variables to better support customization.

Suggested change

	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border: 1px solid var(--tab-border-color) !important;