chore: align panel styling with properties panel

[barinali]

Adjusts sizing, borders, icons, and input styling to visually match the properties panel when displayed side by side.

Related to camunda/camunda-modeler#5773

Checklist

Ensure you provide everything we need to review your contribution:

• Contribution meets our definition of done
• Pull request establishes context
  • Link to related issue(s), i.e. Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}
  • Brief textual description of the changes
  • Screenshots or short videos showing UI/UX changes
  • Steps to try out, i.e. using the @bpmn-io/sr tool

[Copilot]

Pull request overview

Aligns the Variable Outline panel’s visual styling (borders, sizing, icon dimensions, and input appearance) with the Camunda Modeler properties panel to improve side-by-side consistency.

Changes:

• Tweaks borders and icon sizing in the variables outline styles.
• Adjusts Search bar container sizing and search input styling.
• Adjusts FilterBar sizing/padding and border styling.
• Adds a changelog entry for the styling alignment.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
lib/components/outline-variables.scss	Updates border fallbacks and element icon sizing; adjusts inline element entry interaction styling.
lib/components/Search/Search.scss	Updates search header sizing and input background/border styling.
lib/components/FilterBar/FilterBar.scss	Updates filter bar sizing/padding and border styling.
CHANGELOG.md	Documents the styling alignment change.

---

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

[Copilot]

The search container now has a fixed height: 64px. Fixed heights tend to break with user font scaling / zoom or if Carbon component internals change, causing vertical clipping or misalignment. Consider using min-height and relying on padding + align-items: center to achieve the target sizing.

Suggested change

	height: 64px;
	min-height: 64px;

[Copilot]

In the inline variant of .variable-element-entry, the hover and selected styles now set the same color as the default text and there’s no other visual affordance left (underline was removed earlier in this block). This makes the selected inline entry effectively indistinguishable from the non-selected state. Consider reintroducing a distinct selected/hover treatment for the inline variant (e.g. underline, different color token, or another non-layout-shifting indicator).

[Copilot]

--cds-border-subtle fallback values were updated to hsl(225, 10%, 75%) in several places, but this file still has at least one remaining usage with the old #e0e0e0 fallback (e.g. the border-left on .variable-row-details). To avoid inconsistent borders when the Carbon var isn’t present, please standardize the fallback color across the file.

[Copilot]

.bio-vo-filter-bar still allows wrapping (flex-wrap: wrap) but now has a fixed height: 32px. If the contents ever wrap (e.g. narrow panels, different font scaling, future additional actions), the second line will overflow/clip. Consider using min-height instead of height, or removing flex-wrap if wrapping is no longer supported.

Suggested change

	height: 32px;
	min-height: 32px;