fix: add vertical-align top to fix wrong height (#1508)

* fix: add vertical-align top to fix wrong height

* fix: spin is not centered and align in the componeent autoComplete, tree, upload

packages/semi-foundation/autoComplete/autoComplete.scss

@@ -27,6 +27,8 @@ $module: #{$prefix}-autocomplete;
         padding-top: $spacing-autoComplete_loading_wrapper-paddingTop;
         padding-bottom: $spacing-autoComplete_loading_wrapper-paddingBottom;
         cursor: not-allowed;
+        // make sure that spin align vertical, no need to make 20px as a spacing token here
+        height: 20px;
         // height: $spacing-extra-loose;
         // @include all-center;
         .#{$prefix}-spin {

packages/semi-foundation/spin/spin.scss

@@ -29,6 +29,7 @@ $module: #{$prefix}-spin;
         & > svg {
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
             animation-fill-mode: forwards;
+            vertical-align: top;
             @include size($width-spin_middle);
         }
     }

packages/semi-foundation/tree/tree.scss

@@ -302,6 +302,7 @@ $module: #{$prefix}-tree;
 
         &-spin-icon {
             display: flex;
+            line-height: 0; // make the spin icon in the center
             & svg {
                 width: $width-tree_spinIcon;
                 height: $width-tree_spinIcon;

packages/semi-foundation/upload/upload.scss

@@ -258,6 +258,7 @@ $module: #{$prefix}-upload;
             }
 
             &-loading {
+                line-height: 0; // make the spin icon in the center
                 .#{$prefix}-spin-wrapper svg {
                     height: $width-upload_file_card-icon;
                     width: $width-upload_file_card-icon;