diff --git a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
index 2f67b3df92..1432b95382 100644
--- a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
+++ b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
@@ -157,30 +157,30 @@ class CreatePermissionForm extends React.Component<Props, State> {
         {advancedDialog}
         <form onSubmit={this.submit}>
           <div className="field is-grouped">
-
-          <div className="control">
-          <Radio
-            name="permission_scope"
-            value="USER_PERMISSION"
-            checked={!this.state.groupPermission}
-            label={t("permission.user-permission")}
-            onChange={this.permissionScopeChanged}
-          />
-          <Radio
-            name="permission_scope"
-            value="GROUP_PERMISSION"
-            checked={this.state.groupPermission}
-            label={t("permission.group-permission")}
-            onChange={this.permissionScopeChanged}
-          />
-          </div></div>
+            <div className="control">
+              <Radio
+                name="permission_scope"
+                value="USER_PERMISSION"
+                checked={!this.state.groupPermission}
+                label={t("permission.user-permission")}
+                onChange={this.permissionScopeChanged}
+              />
+              <Radio
+                name="permission_scope"
+                value="GROUP_PERMISSION"
+                checked={this.state.groupPermission}
+                label={t("permission.group-permission")}
+                onChange={this.permissionScopeChanged}
+              />
+            </div>
+          </div>
           <div className="columns">
-            <div className="column is-two-thirds">
+            <div className="column is-three-fifths">
               {this.renderAutocompletionField()}
             </div>
-            <div className="column is-one-third">
+            <div className="column is-two-fifths">
               <div className="columns">
-                <div className="column is-half">
+                <div className="column is-narrow">
                   <RoleSelector
                     availableRoles={availableRoleNames}
                     label={t("permission.role")}
@@ -189,7 +189,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
                     role={matchingRole}
                   />
                 </div>
-                <div className="column is-half">
+                <div className="column">
                   <LabelWithHelpIcon
                     label={t("permission.permissions")}
                     helpText={t("permission.help.permissionsHelpText")}
@@ -253,7 +253,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
   handleRoleChange = (role: string) => {
     const selectedRole = this.findAvailableRole(role);
     if (!selectedRole) {
-      return
+      return;
     }
     this.setState({
       verbs: selectedRole.verbs