fix anomalies in dropdown

src/redesign/_style.scss

@@ -622,7 +622,7 @@ select.form-control {
 }
 
 .-mt-4 {
-    margin-top: -1.5rem;
+    margin-top: -1.4rem;
 }
 
 .alert .alert-icon {
@@ -656,3 +656,7 @@ select.form-control {
 .arrow-back-icon {
   margin-top:2px;
 }
+
+.icon-size {
+  width: 2.3rem;
+}

src/redesign/register/CountryDropdown.jsx

@@ -88,12 +88,15 @@ class CountryDropdown extends React.Component {
   }
 
   handleClick = (e) => {
-    if (!this.props.value) {
-      const dropDownItems = this.getItems(e.target.value);
-      this.setState({
-        dropDownItems, icon: ExpandLess, errorMessage: '', showFieldError: false,
-      });
+    let dropDownItems = this.getItems(e.target.value);
+
+    if (dropDownItems?.length === 1) {
+      dropDownItems = this.getItems();
     }
+    this.setState({
+      dropDownItems, icon: ExpandLess, errorMessage: '', showFieldError: false,
+    });
+
     if (this.state.dropDownItems?.length > 0) {
       this.setState({ dropDownItems: '', icon: ExpandMore });
     }
@@ -144,7 +147,7 @@ class CountryDropdown extends React.Component {
           name={this.props.name}
           autoComplete="off"
           floatingLabel={this.props.floatingLabel}
-          trailingElement={<Icon src={this.state.icon} />}
+          trailingElement={<Icon src={this.state.icon} className="icon-size" />}
           handleChange={this.handleOnChange}
           handleClick={this.handleClick}
           handleBlur={this.handleOnBlur}