From 31e125a3757bb5df78e2325517d188e923b5f9f0 Mon Sep 17 00:00:00 2001
From: Ali-D-Akbar <aliakbarit019@gmail.com>
Date: Mon, 8 Feb 2021 13:36:32 +0500
Subject: [PATCH 1/2] use grid to prevent unexpected UI layout

---
 src/users/UserSummary.jsx | 78 ++++++++++++++++++++-------------------
 1 file changed, 41 insertions(+), 37 deletions(-)

diff --git a/src/users/UserSummary.jsx b/src/users/UserSummary.jsx
index 90f3b8c96..28ca4cd5d 100644
--- 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

From 21990482019076fad18af4464441a270a9fd755e Mon Sep 17 00:00:00 2001
From: Ali-D-Akbar <aliakbarit019@gmail.com>
Date: Mon, 8 Feb 2021 15:00:40 +0500
Subject: [PATCH 2/2] add margin between reissue and expire button

---
 src/users/entitlements/Entitlements.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/users/entitlements/Entitlements.jsx b/src/users/entitlements/Entitlements.jsx
index 99cd8c7cf..3403b6039 100644
--- 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={() => {