chore: Styles fixes for suffix in textarea chat (#36911)

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;

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 */