[DTMF Dialer] Dialpad back button overlap fix (#4079)

* update styling to include space for back button

* Change files

* Duplicate change files for beta release

* fix styles

Author: dmceachernmsft

change-beta/@azure-communication-react-050d4869-a611-4569-b4e3-379a73dddeff.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "fix",
+  "workstream": "DTMF Dialer",
+  "comment": "update styling to include space for back button",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-050d4869-a611-4569-b4e3-379a73dddeff.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "fix",
+  "workstream": "DTMF Dialer",
+  "comment": "update styling to include space for back button",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/Dialpad/Dialpad.tsx

@@ -370,7 +370,7 @@ const DialpadContainer = (props: {
     >
       {dialpadMode === 'dialer' && (
         <TextField
-          styles={concatStyleSets(textFieldStyles(theme), props.styles?.textField)}
+          styles={concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), props.styles?.textField)}
           value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           onChange={(e: any) => {

packages/react-components/src/components/styles/Dialpad.styles.ts

@@ -51,17 +51,18 @@ export const digitStyles = (theme: Theme): IStyle => {
 /**
  * @private
  */
-export const textFieldStyles = (theme: Theme): Partial<ITextFieldStyles> => ({
+export const textFieldStyles = (theme: Theme, buttonPresent: boolean): Partial<ITextFieldStyles> => ({
   field: {
     padding: 0,
     textAlign: 'center',
     fontSize: `${_pxToRem(18)}`,
     fontWeight: 400,
-    width: `${_pxToRem(192)}`,
+    width: `${buttonPresent ? '10rem' : '12rem'}`,
     height: '3rem',
     borderRadius: '0.5rem',
     position: 'relative',
-    overflowX: 'auto'
+    overflowX: 'hidden',
+    textOverflow: 'clip'
   },
   root: {
     backgroundColor: `${theme.palette.neutralLighter}`,
@@ -72,6 +73,7 @@ export const textFieldStyles = (theme: Theme): Partial<ITextFieldStyles> => ({
   fieldGroup: {
     border: 'none',
     borderRadius: '0.5rem',
+    width: '12rem',
     height: '3rem',
     backgroundColor: `${theme.palette.neutralLighter}`,
     ':after': {