Fix buttons positioning

gravitational · Jan 26, 2024 · c68d992 · c68d992
1 parent 3f36f27
commit c68d992
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/web/packages/shared/components/TextEditor/TextEditor.jsx b/web/packages/shared/components/TextEditor/TextEditor.jsx
@@ -156,14 +156,14 @@ function getMode(docType) {
 }
 
 const EditorButton = styled(ButtonSecondary)`
-  padding: ${({theme}) => theme.space[2]}px;
+  padding: ${({ theme }) => theme.space[2]}px;
   background-color: transparent;
 `;
 
 const ButtonSection = styled(Flex)`
   position: absolute;
-  right: ${({theme}) => theme.space[4]}px;
-  top: ${({theme}) => theme.space[4]}px;
+  right: 0;
+  top: 0;
 `;
 
 export default TextEditor;
diff --git a/web/packages/shared/components/TextEditor/TextEditor.story.jsx b/web/packages/shared/components/TextEditor/TextEditor.story.jsx
@@ -28,8 +28,9 @@ export default {
 
 export const Editor = () => {
   return (
-    <Flex height="600px" width="600px">
+    <Flex height="600px" width="600px" py={3} pr={3} bg="levels.deep">
       <TextEditor
+        bg="levels.deep"
         data={[
           {
             content,
@@ -43,8 +44,9 @@ export const Editor = () => {
 
 export const ReadOnly = () => {
   return (
-    <Flex height="600px" width="600px">
+    <Flex height="600px" width="600px" py={3} pr={3} bg="levels.deep">
       <TextEditor
+        bg="levels.deep"
         readOnly
         data={[
           {
@@ -59,8 +61,9 @@ export const ReadOnly = () => {
 
 export const WithButtons = () => {
   return (
-    <Flex height="600px" width="600px">
+    <Flex height="600px" width="600px" py={3} pr={3} bg="levels.deep">
       <TextEditor
+        bg="levels.deep"
         data={[
           {
             content,