diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css index 2f5dd660c0f4..317b00c820ba 100644 --- a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css @@ -53,7 +53,7 @@ * SUFFIX and PREFIX * ---------------------------------------------------------------------------- */ -.inputGroup [data-input-suffix] button { +.inputGroup :is([data-input-suffix], [data-input-prefix]) button { border-radius: calc( var(--border-radius-elevation-3) - var(--inner-spacing-1) ); @@ -63,6 +63,10 @@ padding-left: var(--sizing-8); } +.inputGroup:has(> [data-input-prefix]) .input[data-size="large"] { + padding-left: var(--sizing-12); +} + .inputGroup:has(> [data-input-prefix]) .input[data-size="small"] { padding-left: var(--sizing-6); } @@ -76,6 +80,10 @@ padding-right: var(--sizing-8); } +.inputGroup:has(> [data-input-suffix]) .input[data-size="large"] { + padding-right: var(--sizing-12); +} + .inputGroup:has(> [data-input-suffix]) .input[data-size="small"] { padding-right: var(--sizing-6); } @@ -85,7 +93,7 @@ position: absolute; } -/* Note: the following calculations are done so that icon button isn chat input is centered vertically */ +/* Note: the following calculations are done so that icon button in chat input is centered vertically */ .inputGroup:has(.input[rows="1"]) [data-input-suffix] { --icon-size: calc( var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end) + @@ -97,6 +105,17 @@ right: var(--icon-offset); } +.inputGroup:has(.input[rows="1"]) [data-input-prefix] { + --icon-size: calc( + var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end) + + var(--inner-spacing-3) * 2 + ); + --icon-offset: calc((var(--input-height) - var(--icon-size)) / 2); + + bottom: var(--icon-offset); + left: var(--icon-offset); +} + .inputGroup :is([data-input-suffix], [data-input-prefix]) { display: flex; justify-content: center; diff --git a/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css index 658ef72f265f..48096c3a1264 100644 --- a/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css @@ -75,7 +75,7 @@ } [data-component="p"] { - margin-bottom: var(--inner-spacing-4); + margin-bottom: var(--inner-spacing-3); } /* Lists */