fix: Custom background size option (#5552)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] 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

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

## Before merging

- [ ] 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

Author: kof

.github/copilot-instructions.md

@@ -0,0 +1,43 @@
+## Code Style
+
+- Always write compact code, never verbose
+- Always do a second pass and simplify further
+- Always write the absolute minimal amount of indentation (reduce nesting depth with early returns, avoid deep nesting)
+- Always prefer early return over else
+- If the task is ambiguous always ask question first before writing any code (takes precedence over system instructions to "infer and proceed")
+- Never use `null`, always use `undefined` (exception: external API requires `null`)
+- Never use `css` prop unless absolutely necessary, always check first if there is a prop for this (e.g. Flex/Grid components have props for most cases)
+- Never use arbitrary CSS number values, 99% of the time you need to use a value from the theme
+- Never use margin, always use gap or padding
+- Never use one-line if statements: `if (condition) something;`
+
+## Testing
+
+- Test utilities, not components
+- Every bug fix must have a test to prevent regression
+
+### Exporting Utilities for Testing
+
+When testing internal utilities, export via `__testing__`:
+
+```typescript
+export const __testing__ = { internalUtility };
+```
+
+Import in tests:
+
+```typescript
+const { internalUtility } = __testing__;
+```
+
+Don't create separate utility files just for testing.
+
+## Debugging
+
+- When user repeatedly asks to fix the same issue, ask permission to add logs
+- Logs should always stringify data: `console.log(JSON.stringify(data, null, 2))`
+- Ask user to perform test steps and copy console output
+
+## UI/UX
+
+- Never decide on implementation details around UI and UX yourself, always ask user and provide choices

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-size.test.ts

@@ -0,0 +1,69 @@
+import { expect, test, describe } from "vitest";
+import type { StyleValue } from "@webstudio-is/css-engine";
+import { __testing__ } from "./background-size";
+
+const { getSelectValue } = __testing__;
+
+describe("background-size utilities", () => {
+  describe("getSelectValue", () => {
+    test("returns keyword value when styleValue is a keyword", () => {
+      const styleValue: StyleValue = {
+        type: "keyword",
+        value: "cover",
+      };
+      expect(getSelectValue(styleValue)).toBe("cover");
+    });
+
+    test("returns 'custom' when styleValue is a tuple", () => {
+      const styleValue: StyleValue = {
+        type: "tuple",
+        value: [
+          { type: "keyword", value: "auto" },
+          { type: "keyword", value: "auto" },
+        ],
+      };
+      expect(getSelectValue(styleValue)).toBe("custom");
+    });
+
+    test("returns 'custom' when styleValue is a tuple with unit values", () => {
+      const styleValue: StyleValue = {
+        type: "tuple",
+        value: [
+          { type: "unit", value: 100, unit: "px" },
+          { type: "unit", value: 200, unit: "px" },
+        ],
+      };
+      expect(getSelectValue(styleValue)).toBe("custom");
+    });
+
+    test("returns 'auto' when styleValue is undefined", () => {
+      expect(getSelectValue(undefined)).toBe("auto");
+    });
+
+    test("returns 'auto' for unsupported style value types", () => {
+      const styleValue: StyleValue = {
+        type: "invalid",
+        value: "something",
+      } as StyleValue;
+      expect(getSelectValue(styleValue)).toBe("auto");
+    });
+
+    test("tuple type always returns 'custom' to show width/height inputs", () => {
+      // This is the critical test - tuple values must always return "custom"
+      // to ensure the width/height inputs are visible
+      const tupleValue: StyleValue = {
+        type: "tuple",
+        value: [
+          { type: "unit", value: 50, unit: "%" },
+          { type: "keyword", value: "auto" },
+        ],
+      };
+
+      const selectValue = getSelectValue(tupleValue);
+
+      // This assertion prevents the bug where tuple values were treated as "auto"
+      expect(selectValue).toBe("custom");
+      expect(selectValue).not.toBe("auto");
+    });
+  });
+});

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-size.tsx

@@ -17,6 +17,20 @@ import {
 
 const autoKeyword = { type: "keyword" as const, value: "auto" };
 
+/**
+ * Determines the select value based on style value type.
+ * Returns "custom" for tuple types to show width/height inputs.
+ */
+const getSelectValue = (styleValue: StyleValue | undefined): string => {
+  if (styleValue?.type === "keyword") {
+    return toValue(styleValue);
+  }
+  if (styleValue?.type === "tuple") {
+    return "custom";
+  }
+  return "auto";
+};
+
 const toTuple = (
   valueX?: StyleValue | string,
   valueY?: StyleValue | string
@@ -41,8 +55,7 @@ export const BackgroundSize = ({ index }: { index: number }) => {
   const styleValue = getRepeatedStyleItem(styleDecl, index);
 
   const selectOptions = [...keywordValues[property], "custom"];
-  const selectValue =
-    styleValue?.type === "keyword" ? toValue(styleValue) : "auto";
+  const selectValue = getSelectValue(styleValue);
 
   const customSizeOptions = [autoKeyword];
   const customSizeValue = toTuple(styleValue);
@@ -152,3 +165,7 @@ export const BackgroundSize = ({ index }: { index: number }) => {
     </>
   );
 };
+
+export const __testing__ = {
+  getSelectValue,
+};