fix: WDS Input widget bugs (#29241)

Fixes #29091 Fixes #29086 Fixes #29088
appsmithorg · Dec 1, 2023 · fde6e2d · fde6e2d
1 parent fa01d10
commit fde6e2d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/app/client/packages/design-system/headless/src/components/Field/src/Field.tsx b/app/client/packages/design-system/headless/src/components/Field/src/Field.tsx
@@ -72,7 +72,7 @@ const _Field = (props: FieldProps, ref: FieldRef) => {
           isRequired={isRequired}
           necessityIndicator={necessityIndicator}
         >
-          {label}
+          <span>{label}</span>
         </Label>
       )}
       {contextualHelp}

diff --git a/app/client/packages/design-system/widgets/src/styles/src/field.module.css b/app/client/packages/design-system/widgets/src/styles/src/field.module.css
@@ -21,6 +21,15 @@
     display: flex;
     height: fit-content;
     color: var(--color-fg);
+    max-width: 100%;
+  }
+
+  & [data-field-label] span {
+    webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   /**
@@ -32,6 +41,7 @@
     width: var(--inner-spacing-2);
     height: var(--inner-spacing-2);
     color: var(--color-fg-negative);
+    margin-left: var(--inner-spacing-1);
   }
 
   /**

diff --git a/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css b/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css
@@ -18,6 +18,7 @@
     flex-grow: 1;
     color: var(--color-fg);
     text-overflow: ellipsis;
+    width: 100%;
 
     &:autofill,
     &:autofill:hover,