From d2b17bcd0cf37369c33801f37d4c3bc428586740 Mon Sep 17 00:00:00 2001
From: DDDDD12138 <43703884+DDDDD12138@users.noreply.github.com>
Date: Tue, 24 Dec 2024 20:21:14 +0800
Subject: [PATCH] fix(components): [inputnumber, input] resolve styling issues
 caused by using `prefix` and `suffix` (#19042)

* feat: use consistent line-height within `el-input` component

* feat: Adjust input padding based on `size`
---
 packages/theme-chalk/src/input-number.scss | 8 ++++++++
 packages/theme-chalk/src/input.scss        | 8 +++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss
index 0df3645c87..e340989bed 100644
--- a/packages/theme-chalk/src/input-number.scss
+++ b/packages/theme-chalk/src/input-number.scss
@@ -103,6 +103,14 @@
         font-size: map.get($input-font-size, $size);
       }
 
+      @include when(controls-right) {
+        .#{$namespace}-input--#{$size} {
+          .#{$namespace}-input__wrapper {
+            padding-right: #{map.get($input-height, $size) + 7};
+          }
+        }
+      }
+
       .#{$namespace}-input--#{$size} {
         .#{$namespace}-input__wrapper {
           padding-left: #{map.get($input-height, $size) + 7};
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index c1cfb5c82d..23dabd83d3 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -199,7 +199,7 @@
     }
   }
 
-  @include e(inner) {
+  & {
     // use map.get as default value for date picker range
     @include set-css-var-value(
       'input-inner-height',
@@ -210,7 +210,9 @@
           ) - $border-width * 2
       )
     );
+  }
 
+  @include e(inner) {
     width: 100%;
     flex-grow: 1;
     -webkit-appearance: none;
@@ -255,6 +257,7 @@
       flex-shrink: 0;
       flex-wrap: nowrap;
       height: 100%;
+      line-height: getCssVar('input-inner-height');
       text-align: center;
       color: var(
         #{getCssVarName('input-icon-color')},
@@ -359,8 +362,7 @@
       @include e(wrapper) {
         padding: $border-width map.get($input-padding-horizontal, $size)-$border-width;
       }
-
-      @include e(inner) {
+      & {
         @include set-css-var-value(
           'input-inner-height',
           calc(