web: fix editor & toolbar alignment

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 && (

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"}

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",