From 19b9eac84af9e12238a9b44bb5bee98b5068640d Mon Sep 17 00:00:00 2001
From: Wilson Furtado <72563697+wilsonfurtado2000@users.noreply.github.com>
Date: Mon, 6 Jan 2025 10:12:14 +0100
Subject: [PATCH] fix(input) fix content overlapping when clearable icon is
 present

---
 react/features/base/ui/components/web/Input.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/react/features/base/ui/components/web/Input.tsx b/react/features/base/ui/components/web/Input.tsx
index 5b4c804f2c..5613048de0 100644
--- a/react/features/base/ui/components/web/Input.tsx
+++ b/react/features/base/ui/components/web/Input.tsx
@@ -98,6 +98,9 @@ const useStyles = makeStyles()(theme => {
 
             '&.error': {
                 boxShadow: `0px 0px 0px 2px ${theme.palette.textError}`
+            },
+            '&.clearable-input': {
+                paddingRight: '46px'
             }
         },
 
@@ -121,10 +124,6 @@ const useStyles = makeStyles()(theme => {
             cursor: 'pointer'
         },
 
-        clearableInput: {
-            paddingRight: '46px'
-        },
-
         clearButton: {
             position: 'absolute',
             right: '16px',
@@ -185,6 +184,7 @@ const Input = React.forwardRef<any, IProps>(({
 }: IProps, ref) => {
     const { classes: styles, cx } = useStyles();
     const isMobile = isMobileBrowser();
+    const showClearIcon = clearable && value !== '' && !disabled;
 
     const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
         onChange?.(e.target.value), []);
@@ -211,7 +211,7 @@ const Input = React.forwardRef<any, IProps>(({
                         autoComplete = { autoComplete }
                         autoFocus = { autoFocus }
                         className = { cx(styles.input, isMobile && 'is-mobile',
-                            error && 'error', clearable && styles.clearableInput, icon && 'icon-input') }
+                            error && 'error', showClearIcon && 'clearable-input', icon && 'icon-input') }
                         disabled = { disabled }
                         id = { id }
                         maxLength = { maxLength }
@@ -232,7 +232,7 @@ const Input = React.forwardRef<any, IProps>(({
                         autoComplete = { autoComplete }
                         autoFocus = { autoFocus }
                         className = { cx(styles.input, isMobile && 'is-mobile',
-                            error && 'error', clearable && styles.clearableInput, icon && 'icon-input') }
+                            error && 'error', showClearIcon && 'clearable-input', icon && 'icon-input') }
                         data-testid = { testId }
                         disabled = { disabled }
                         id = { id }
@@ -252,7 +252,7 @@ const Input = React.forwardRef<any, IProps>(({
                         type = { type }
                         value = { value } />
                 )}
-                {clearable && !disabled && value !== '' && <button className = { styles.clearButton }>
+                {showClearIcon && <button className = { styles.clearButton }>
                     <Icon
                         onClick = { clearInput }
                         size = { 20 }