From 1b6a27376ca0fd5b914f5fc618fee4175aad19e8 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Mon, 7 Aug 2023 12:00:15 +0500
Subject: [PATCH] web: fix editor & toolbar alignment

---
 apps/web/src/components/editor/index.tsx   | 3 ++-
 apps/web/src/components/editor/tiptap.tsx  | 2 +-
 apps/web/src/components/editor/toolbar.jsx | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/editor/index.tsx b/apps/web/src/components/editor/index.tsx
index 23c487b5a..bd43dda05 100644
--- a/apps/web/src/components/editor/index.tsx
+++ b/apps/web/src/components/editor/index.tsx
@@ -522,7 +522,8 @@ function EditorChrome(
             maxWidth: editorMargins ? "min(100%, 850px)" : "auto",
             width: "100%"
           }}
-          px={6}
+          pl={6}
+          pr={2}
           onClick={onRequestFocus}
         >
           {!isMobile && (
diff --git a/apps/web/src/components/editor/tiptap.tsx b/apps/web/src/components/editor/tiptap.tsx
index bdb1b8946..251a45b2e 100644
--- a/apps/web/src/components/editor/tiptap.tsx
+++ b/apps/web/src/components/editor/tiptap.tsx
@@ -335,7 +335,7 @@ function TipTap(props: TipTapProps) {
   return (
     <>
       <Portal containerId={toolbarContainerId}>
-        <ScopedThemeProvider scope="editorToolbar">
+        <ScopedThemeProvider scope="editorToolbar" sx={{ width: "100%" }}>
           <Toolbar
             editor={editor}
             location={isMobile ? "bottom" : "top"}
diff --git a/apps/web/src/components/editor/toolbar.jsx b/apps/web/src/components/editor/toolbar.jsx
index 7db3587ec..971ce7eef 100644
--- a/apps/web/src/components/editor/toolbar.jsx
+++ b/apps/web/src/components/editor/toolbar.jsx
@@ -239,6 +239,7 @@ function Toolbar() {
             fontSize: "heading",
             color: "paragraph",
             p: 0,
+            pl: 4,
             borderWidth: 0,
             borderRadius: "default",
             textOverflow: "ellipsis",
@@ -248,7 +249,7 @@ function Toolbar() {
         />
       </Flex>
 
-      <Flex>
+      <Flex sx={{ gap: 1 }}>
         {tools.map((tool) => (
           <Button
             key={tool.title}
@@ -256,7 +257,6 @@ function Toolbar() {
             data-test-id={tool.title}
             disabled={!tool.enabled}
             title={tool.title}
-            mr={1}
             sx={{
               display: [
                 tool.hideOnMobile ? "none" : "flex",