reorganize layout of PageAccessoriesModalControl

src/client/js/components/PageAccessoriesModalControl.jsx

@@ -19,7 +19,8 @@ const PageAccessoriesModalControl = (props) => {
   const { t, pageAccessoriesContainer, isGuestUserMode } = props;
 
   return (
-    <div className="grw-page-accessories-control d-flex align-items-center pb-1">
+    <div className="grw-page-accessories-control d-flex align-items-center justify-content-between pb-1">
+
       <button
         type="button"
         className="btn btn-link grw-btn-page-accessories"
@@ -67,9 +68,10 @@ const PageAccessoriesModalControl = (props) => {
         </UncontrolledTooltip>
       )}
 
-      <span className="border-left grw-border-vr mx-1">&nbsp;</span>
-
-      <SeenUserInfo />
+      <div className="d-flex align-items-center">
+        <span className="border-left grw-border-vr">&nbsp;</span>
+        <SeenUserInfo />
+      </div>
     </div>
   );
 };

src/client/styles/scss/_page-accessories-control.scss

@@ -4,8 +4,7 @@
   border-bottom: 1px solid transparent;
 
   .grw-btn-page-accessories {
-    padding: 0.375rem 0.5rem;
-    margin: 0 0.2rem;
+    padding: 0.375rem;
 
     svg {
       width: 16px;