From 66a5cf8548f925959a41e00cb5539c95c0f2bd89 Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Mon, 15 Apr 2024 09:09:49 -0500
Subject: [PATCH] [BUG] Fix the `EuiRange` prepend prop CSS (#7678)

Co-authored-by: Cee Chen <constance.chen@elastic.co>
---
 changelogs/upcoming/7678.md                   |  5 +++++
 .../form/range/range_wrapper.styles.ts        | 20 +++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 changelogs/upcoming/7678.md

diff --git a/changelogs/upcoming/7678.md b/changelogs/upcoming/7678.md
new file mode 100644
index 00000000000..e8d28d7fb38
--- /dev/null
+++ b/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
diff --git a/src/components/form/range/range_wrapper.styles.ts b/src/components/form/range/range_wrapper.styles.ts
index 983c0fa0b72..20d9da4b9da 100644
--- a/src/components/form/range/range_wrapper.styles.ts
+++ b/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`