UserPicker and TeamPicker should use min-width instead of fixed widths to avoid…

UserPicker and TeamPicker should use min-width instead of fixed widths to avoid overflowing form buttons.  #14341

public/app/core/components/PermissionList/AddPermission.tsx

@@ -84,7 +84,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
   render() {
   render() {
     const { onCancel } = this.props;
     const { onCancel } = this.props;
     const newItem = this.state;
     const newItem = this.state;
-    const pickerClassName = 'width-20';
+    const pickerClassName = 'min-width-20';
     const isValid = this.isValid();
     const isValid = this.isValid();
     return (
     return (
       <div className="gf-form-inline cta-form">
       <div className="gf-form-inline cta-form">

public/app/features/teams/TeamMembers.tsx

@@ -115,7 +115,7 @@ export class TeamMembers extends PureComponent<Props, State> {
             </button>
             </button>
             <h5>Add Team Member</h5>
             <h5>Add Team Member</h5>
             <div className="gf-form-inline">
             <div className="gf-form-inline">
-              <UserPicker onSelected={this.onUserSelected} className="width-30" />
+              <UserPicker onSelected={this.onUserSelected} className="min-width-30" />
               {this.state.newTeamMember && (
               {this.state.newTeamMember && (
                 <button className="btn btn-success gf-form-btn" type="submit" onClick={this.onAddUserToTeam}>
                 <button className="btn btn-success gf-form-btn" type="submit" onClick={this.onAddUserToTeam}>
                   Add to team
                   Add to team

public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap

@@ -58,7 +58,7 @@ exports[`Render should render component 1`] = `
         className="gf-form-inline"
         className="gf-form-inline"
       >
       >
         <UserPicker
         <UserPicker
-          className="width-30"
+          className="min-width-30"
           onSelected={[Function]}
           onSelected={[Function]}
         />
         />
       </div>
       </div>
@@ -152,7 +152,7 @@ exports[`Render should render team members 1`] = `
         className="gf-form-inline"
         className="gf-form-inline"
       >
       >
         <UserPicker
         <UserPicker
-          className="width-30"
+          className="min-width-30"
           onSelected={[Function]}
           onSelected={[Function]}
         />
         />
       </div>
       </div>
@@ -372,7 +372,7 @@ exports[`Render should render team members when sync enabled 1`] = `
         className="gf-form-inline"
         className="gf-form-inline"
       >
       >
         <UserPicker
         <UserPicker
-          className="width-30"
+          className="min-width-30"
           onSelected={[Function]}
           onSelected={[Function]}
         />
         />
       </div>
       </div>

public/sass/utils/_widths.scss

@@ -20,6 +20,12 @@
 }
 }
 
 
 @for $i from 1 through 30 {
 @for $i from 1 through 30 {
+  .min-width-#{$i} {
+    min-width: ($spacer * $i) - $gf-form-margin !important;
+  }
+}
+
+@for $i from 1 through 30 {
   .offset-width-#{$i} {
   .offset-width-#{$i} {
     margin-left: ($spacer * $i) !important;
     margin-left: ($spacer * $i) !important;
   }
   }