Merge pull request #90 from edx/aakbar/PROD-2276

Unexpected display layout with longer Emails
openedx · Feb 9, 2021 · ad590b8 · ad590b8
2 parents f77a4fc + 2199048
commit ad590b8
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 37 deletions.
diff --git a/src/users/UserSummary.jsx b/src/users/UserSummary.jsx
@@ -234,47 +234,51 @@ export default function UserSummary({
   return (
     <section className="mb-3">
       <div className="d-flex flex-row flex-wrap">
-        <div className="flex-column p-4 m-3 card">
-          <h4>Account</h4>
-          <Table
-            data={userAccountData}
-            columns={columns}
-          />
-          {userToggleVisible && (
-            <div>
-              <Button
-                className="toggle-password"
-                variant={`${userData.passwordStatus.status === PASSWORD_STATUS.USABLE ? 'danger' : 'primary'}`}
-                onClick={() => setDisableUserModalIsOpen(true)}
-              >
-                {userData.passwordStatus.status === PASSWORD_STATUS.USABLE ? 'Disable User' : 'Enable User'}
-              </Button>
-              {userData.passwordStatus.passwordToggleHistory.length > 0 && (
-                <Button
-                  variant="outline-primary"
-                  className="ml-1"
-                  onClick={() => openHistoryModel()}
-                >
-                  Show history
-                </Button>
-              )}
-            </div>
-          )}
-        </div>
-        <div className="flex-column">
+        <div className="col-sm-6">
           <div className="flex-column p-4 m-3 card">
-            <h4>ID Verification Status</h4>
+            <h4>Account</h4>
             <Table
-              data={IdvData}
-              columns={idvColumns}
+              data={userAccountData}
+              columns={columns}
             />
+            {userToggleVisible && (
+              <div>
+                <Button
+                  className="toggle-password"
+                  variant={`${userData.passwordStatus.status === PASSWORD_STATUS.USABLE ? 'danger' : 'primary'}`}
+                  onClick={() => setDisableUserModalIsOpen(true)}
+                >
+                  {userData.passwordStatus.status === PASSWORD_STATUS.USABLE ? 'Disable User' : 'Enable User'}
+                </Button>
+                {userData.passwordStatus.passwordToggleHistory.length > 0 && (
+                  <Button
+                    variant="outline-primary"
+                    className="ml-1"
+                    onClick={() => openHistoryModel()}
+                  >
+                    Show history
+                  </Button>
+                )}
+              </div>
+            )}
           </div>
-          <div className="flex-column p-4 m-3 card">
-            <h4>SSO Records</h4>
-            <Table
-              data={ssoData}
-              columns={ssoColumns}
-            />
+        </div>
+        <div className="col-sm-6">
+          <div className="flex-column">
+            <div className="flex-column p-4 m-3 card">
+              <h4>ID Verification Status</h4>
+              <Table
+                data={IdvData}
+                columns={idvColumns}
+              />
+            </div>
+            <div className="flex-column p-4 m-3 card">
+              <h4>SSO Records</h4>
+              <Table
+                data={ssoData}
+                columns={ssoColumns}
+              />
+            </div>
           </div>
         </div>
         <Modal

diff --git a/src/users/entitlements/Entitlements.jsx b/src/users/entitlements/Entitlements.jsx
@@ -139,6 +139,7 @@ export default function Entitlements({
             </Button>
             <Button
               type="button"
+              className="mt-2"
               variant="outline-danger"
               disabled={entitlement.expiredAt}
               onClick={() => {