fix: CSS var() truncation in advanced styles panel (#5378) (#5468)

## Description

This PR fixes a UI bug by preserving and displaying the complete CSS
variable (without truncating the second parameter) in both the input
field and the dropdown suggestion list under Display.
Closes #5378

## Steps for reproduction

**Before this fix (current behavior):**
1. Open an existing project or create a new one.
2. Select an element and navigate to **Style → Advanced → + → Add new
CSS Property** and choose `display`.
3. Set `display` to: `var(--anchor-display, none)`.
5. The displayed value is truncated and the `none` appears to be missing
under the Advanced section, even though it’s saved internally.

**After this fix (expected behavior):**
1. Follow the same steps as above.
2. The advanced property and the Display dropdown both consistently show
`var(--anchor-display, none)` without truncation.

## Code Review

- [x] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [x] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Co-authored-by: Oleg Isonen <[email protected]>

Author: niatalwalkar

apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx

@@ -335,7 +335,8 @@ const itemToString = (item: CssValueInputValue | null) => {
     return "";
   }
   if (item.type === "var") {
-    return `var(--${item.value})`;
+    // Use toValue to include fallback when present
+    return toValue(item as StyleValue);
   }
   if (item.type === "keyword") {
     // E.g. we want currentcolor to be lower case