dropdown placement

editors/editoria/src/layout/EditoriaLayout.js

@@ -127,6 +127,8 @@ const CommentTrackToolsContainer = styled.div`
   position: fixed;
   display: flex;
   margin-left: 5px;
+  flex-dirextion: row;
+  // justify-content: center;
   z-index: 1;
   height: 30px;
   width: 27%;
@@ -134,7 +136,7 @@ const CommentTrackToolsContainer = styled.div`
 `;
 
 const CommentTrackTools = styled.div`
-  margin-left: 10px;
+  margin-left: auto;
   display: flex;
   position: relative;
 `;

wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js

 import React from 'react';
+import styled from 'styled-components';
+import { grid } from '@pubsweet/ui-toolkit';
+
+const Wrapper = styled.div`
+  background: #fff;
+  border-radius: 1.03093% / 8%;
+  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px 0px,
+    rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;
+  padding: ${grid(2)};
+  transform-origin: 50% 50% 0px;
+  width: 200px;
+  height: 200px;
+`;
 
 const TrackChangeOptionsComponent = ({ view = {}, groups }) => {
   console.log(groups);
-  return <span>Options</span>;
+  return (
+    <Wrapper>
+      <span>Options</span>
+    </Wrapper>
+  );
 };
 
 export default TrackChangeOptionsComponent;

wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js

@@ -17,6 +17,7 @@ const DropWrapper = styled.div`
   background: white;
   margin-top: ${grid(1)};
   position: absolute;
+  right: -3px;
   top: 32px;
 `;