diff --git a/docs/styles.md b/docs/styles.md index 782edea2..78bfc361 100644 --- a/docs/styles.md +++ b/docs/styles.md @@ -288,12 +288,12 @@ Variables for the Number with Scale input component: Variables for the Object Base component: -| Variable | Default Value | Description | -| :---------------------------------------- | :----------------: | :---------------------------------------------------- | -| `--df-object-base-inline-width` | `150px` | Width of inline input fields | -| `--df-object-base-inline-margin` | `0px 8px 0px 0px ` | Margin for inline elements (top, right, bottom, left) | -| `--df-object-base-delimiter-height` | `28px` | Height of the delimiter (e.g., colon or separator) | -| `--df-object-base-delimiter-margin-right` | `8px` | Right margin of the delimiter | +| Variable | Default Value | Description | +| :---------------------------------------- | :----------------: | :----------------------------------------------------------------------------- | +| `--df-object-base-inline-width` | `150px` | Minimum width of inline input fields (field stretches to full width with flex) | +| `--df-object-base-inline-margin` | `0px 8px 0px 0px ` | Margin for inline elements (top, right, bottom, left) | +| `--df-object-base-delimiter-height` | `28px` | Height of the delimiter (e.g., colon or separator) | +| `--df-object-base-delimiter-margin-right` | `8px` | Right margin of the delimiter | --- @@ -531,10 +531,10 @@ Variables for the Section layout: Variables for the Transparent layout: -| Variable | Default Value | Description | -| :-------------------------------------- | :-----------: | :------------------------------ | -| `--df-transparent-array-item-max-width` | `338px` | Maximum width of array items | -| `--df-transparent-error-wrapper-width` | `auto` | Transparent error wrapper width | +| Variable | Default Value | Description | +| :-------------------------------------- | :-----------: | :----------------------------------------------------------------------------------------------- | +| `--df-transparent-array-item-max-width` | `338px` | Maximum width of array items | +| `--df-transparent-error-wrapper-width` | `auto` | Width of the error wrapper (wrapper stretches to full width inside array items, e.g. table_item) | --- diff --git a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-dark-chromium-linux.png b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-dark-chromium-linux.png index 97f86183..6c574aa5 100644 Binary files a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-dark-chromium-linux.png and b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-dark-webkit-linux.png b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-dark-webkit-linux.png index 361ad10d..dba76615 100644 Binary files a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-dark-webkit-linux.png and b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-light-chromium-linux.png b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-light-chromium-linux.png index 7c75c4d4..2a3fc9f9 100644 Binary files a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-light-chromium-linux.png and b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-light-webkit-linux.png b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-light-webkit-linux.png index c19149f0..6b26c70f 100644 Binary files a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-light-webkit-linux.png and b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-Flat-layouts-transparent-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-dark-chromium-linux.png b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-dark-chromium-linux.png index a4aee749..cb3c002c 100644 Binary files a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-dark-chromium-linux.png and b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-dark-webkit-linux.png b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-dark-webkit-linux.png index 1f9a4b1d..475beb84 100644 Binary files a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-dark-webkit-linux.png and b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-light-chromium-linux.png b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-light-chromium-linux.png index db85ce13..ae1d87bf 100644 Binary files a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-light-chromium-linux.png and b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-light-webkit-linux.png b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-light-webkit-linux.png index 9effbdef..91b1a0b0 100644 Binary files a/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-light-webkit-linux.png and b/src/lib/kit/components/Inputs/MultiOneOf/__snapshots__/MultiOneOf.visual.test.tsx-snapshots/Multi-OneOf-layouts-transparent-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss index b193cc67..1b2fca93 100644 --- a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss +++ b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss @@ -6,7 +6,8 @@ display: flex; & > .#{$ns}use-search { - width: var(--df-object-base-inline-width, 150px); + flex: 1; + min-width: var(--df-object-base-inline-width, 150px); margin: var( --df-object-base-inline-margin, var(--g-spacing-0) var(--g-spacing-2) var(--g-spacing-0) var(--g-spacing-0) diff --git a/src/lib/kit/components/Layouts/Transparent/Transparent.scss b/src/lib/kit/components/Layouts/Transparent/Transparent.scss index ccce8687..e2cafd18 100644 --- a/src/lib/kit/components/Layouts/Transparent/Transparent.scss +++ b/src/lib/kit/components/Layouts/Transparent/Transparent.scss @@ -17,6 +17,8 @@ & > .#{$ns}error-wrapper { width: var(--df-transparent-error-wrapper-width, auto); + flex-grow: 1; + min-width: 0; } }