Form: fields should not exceed group column width when many items are selected (T1326645)

[pharret31]

No description provided.

[Copilot]

Pull request overview

Adds a regression fix for Form layout so editor content (notably TagBox with many selected items) can shrink within a group column instead of overflowing.

Changes:

• Adjusted Form CSS to allow field content to shrink (min-width: 0) in left/right label layouts.
• Added a QUnit regression test covering TagBox width behavior in a grouped Form (T1326645).
• Cleaned up several test titles/assertion messages for clarity.

Reviewed changes

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

File	Description
packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.markup.tests.js	Adds TagBox regression test and updates wording; includes theme + TagBox imports needed for the scenario.
packages/devextreme-scss/scss/widgets/base/_form.scss	Adds min-width: 0 to help field item content shrink instead of overflowing its column.

[Copilot]

This width assertion may be flaky: summing outerWidth() of the label and content can differ from the actual rendered field width due to rounding and box model differences across browsers/themes. Consider comparing element bounding rectangles (e.g., right edge of the field item/content vs right edge of the group) and/or allowing a small tolerance (1–2px).

Suggested change

	const $label = $group.find(`.${FIELD_ITEM_LABEL_CLASS}`).first();
	const $content = $group.find(`.${FIELD_ITEM_CONTENT_CLASS}`).first();
	const groupWidth = $group.outerWidth();
	const totalItemWidth = $label.outerWidth() + $content.outerWidth();
	assert.strictEqual(totalItemWidth <= groupWidth, true, `field item content width (${totalItemWidth}) should not exceed group width (${groupWidth})`);
	const $content = $group.find(`.${FIELD_ITEM_CONTENT_CLASS}`).first();
	const groupRect = $group.get(0).getBoundingClientRect();
	const contentRect = $content.get(0).getBoundingClientRect();
	const widthTolerance = 2;
	assert.ok(
	contentRect.right <= groupRect.right + widthTolerance,
	`field item content right edge (${contentRect.right}) should not exceed group right edge (${groupRect.right}) with tolerance ${widthTolerance}px`,
	);

[Copilot]

min-width: 0 is added only for .dx-field-item-content, but in .dx-flex-layout both .dx-field-item-content and .dx-field-item-content-wrapper are configured as flex items (flex-shrink/grow/basis). If a field uses the wrapper (e.g., when helpText is rendered), the wrapper can still be prevented from shrinking by the default min-width: auto. Consider applying min-width: 0 to the wrapper as well (or scoping the rule specifically to the flex layout selectors).

Suggested change

	.dx-field-item-content {
	vertical-align: top;
	min-width: 0;
	.dx-field-item-content,
	.dx-field-item-content-wrapper {
	min-width: 0;
	}
	.dx-field-item-content {
	vertical-align: top;