Change CSS for read-only indicator

frontend/nav/index.tsx

@@ -98,9 +98,10 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
                     <span className="top-menu-container">
                       {NavLinks({ close, alertCount })}
                     </span>
-                    <ReadOnlyIcon locked={!!isLocked} />
                   </div>
                   <div className="nav-right">
+                    <ReadOnlyIcon locked={!!isLocked} />
+
                     <div className="menu-popover">
                       <Popover
                         portalClassName={"nav-right"}

frontend/read_only_mode/index.tsx

@@ -18,9 +18,15 @@ export const readOnlyInterceptor = (config: AxiosRequestConfig) => {
   return Promise.resolve(config);
 };
 
+const MOVE_ME_ELSEWHERE: React.CSSProperties = {
+  float: "right",
+  boxSizing: "inherit",
+  margin: "9px 0px 0px 9px"
+};
+
 export const ReadOnlyIcon = (p: { locked: boolean }) => {
   if (p.locked) {
-    return <div className="fa-stack fa-lg">
+    return <div className="fa-stack fa-lg" style={MOVE_ME_ELSEWHERE}>
       <i className="fa fa-pencil fa-stack-1x"></i>
       <i className="fa fa-ban fa-stack-2x fa-rotate-90 text-danger"></i>
     </div>;