[BUG] Fix the EuiRange prepend prop CSS (#7678)

Co-authored-by: Cee Chen <constance.chen@elastic.co>

changelogs/upcoming/7678.md

@@ -0,0 +1,5 @@
+**Bug fixes**
+
+- Visual fixes for `EuiRange`s with `showInput`:
+  - Longer `append`/`prepend` labels no longer cause a background bug
+  - Inputs can no longer overwhelm the actual range in width

src/components/form/range/range_wrapper.styles.ts

@@ -16,10 +16,26 @@ export const euiRangeWrapperStyles = (euiThemeContext: UseEuiTheme) => {
       display: flex;
       align-items: center;
 
+      /* TODO: When converting forms to Emotion, allow passing wrapperProps
+         to EuiFieldNumber and then move this CSS to range_input.styles.ts */
       > .euiFormControlLayout {
-        /* There's no way to target the layout of the extra input, so we must
-         * use the descendant selector to allow the width to shrink. */
+        /* Allow the width to shrink */
         inline-size: auto;
+        /* Don't allow inputs to overwhelm the actual range in width */
+        max-inline-size: 50%;
+
+        /* The input should take priority over prepend/append labels */
+        .euiFormControlLayout__childrenWrapper {
+          flex-shrink: 0;
+        }
+
+        .euiFormControlLayout__prepend,
+        .euiFormControlLayout__append {
+          flex-shrink: 1;
+          /* Remove the default 50% max-width on prepend/appends, as a max-width is
+             already set on the wrapper, and a static width already set on the input */
+          max-inline-size: none;
+        }
       }
     `,
     regular: css`