style(💄): fix Steps style in small screen

components/steps/index.tsx

@@ -47,12 +47,13 @@ export default class Steps extends React.Component<StepsProps, any> {
   renderSteps = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
     const prefixCls = getPrefixCls('steps', this.props.prefixCls);
     const iconPrefix = getPrefixCls('', this.props.iconPrefix);
-    const { percent, size } = this.props;
-    const className = classNames(
+    const { percent, size, className } = this.props;
+    const stepsClassName = classNames(
       {
         [`${prefixCls}-rtl`]: direction === 'rtl',
+        [`${prefixCls}-with-progress`]: percent !== undefined,
       },
-      this.props.className,
+      className,
     );
     const icons = {
       finish: <CheckOutlined className={`${prefixCls}-finish-icon`} />,
@@ -90,11 +91,11 @@ export default class Steps extends React.Component<StepsProps, any> {
     return (
       <RcSteps
         icons={icons}
-        {...omit(this.props, ['progress'])}
+        {...omit(this.props, ['percent'])}
         stepIcon={stepIconRender}
         prefixCls={prefixCls}
         iconPrefix={iconPrefix}
-        className={className}
+        className={stepsClassName}
       />
     );
   };

components/steps/style/custom-icon.less

@@ -5,7 +5,7 @@
     border: 0;
     > .@{steps-prefix-cls}-icon {
       top: @steps-icon-custom-top;
-      left: 0.5px;
+      left: 4.5px;
       width: @steps-icon-custom-size;
       height: @steps-icon-custom-size;
       font-size: @steps-icon-custom-font-size;

components/steps/style/progress.less

@@ -1,21 +1,23 @@
 @progress-prefix-cls: ~'@{ant-prefix}-progress';
 
-.@{steps-prefix-cls}:not(.@{steps-prefix-cls}-dot):not(.@{steps-prefix-cls}-navigation) {
-  &:not(.@{steps-prefix-cls}-vertical) {
-    .@{steps-prefix-cls}-item {
-      padding-top: 4px;
+.@{steps-prefix-cls}-with-progress {
+  .@{steps-prefix-cls}-item {
+    padding-top: 4px;
+
+    .@{steps-prefix-cls}-item-tail {
+      top: 4px !important;
     }
   }
-  .@{steps-prefix-cls}-item {
-    .@{steps-prefix-cls}-item-icon {
-      position: relative;
-      .@{progress-prefix-cls} {
-        position: absolute;
-        top: -5px;
-        right: -5px;
-        bottom: -5px;
-        left: -5px;
-      }
+
+  .@{steps-prefix-cls}-item-icon {
+    position: relative;
+
+    .@{progress-prefix-cls} {
+      position: absolute;
+      top: -5px;
+      right: -5px;
+      bottom: -5px;
+      left: -5px;
     }
   }
 }

components/steps/style/vertical.less

@@ -4,7 +4,7 @@
   .@{steps-prefix-cls}-item {
     display: block;
     flex: 1 0 auto;
-    padding-left: 0;
+    padding-left: 0 !important;
     overflow: visible;
 
     &-icon {