adjust spacing

apps/app/src/components/PageEditor/EditorNavbarBottom.tsx

@@ -77,7 +77,7 @@ const EditorNavbarBottom = (): JSX.Element => {
         </Collapse>
       )
       }
-      <div className={`flex-expand-horiz align-items-center px-2 px-md-3 ${moduleClass}`}>
+      <div className={`flex-expand-horiz align-items-center px-2 py-1 py-md-2 px-md-3 ${moduleClass}`}>
         <form>
           <OptionsSelector collapsed={!isDeviceLargerThanMd} />
         </form>

apps/app/src/components/PageEditor/OptionsSelector.tsx

@@ -274,7 +274,7 @@ export const OptionsSelector = ({ collapsed }: {collapsed?: boolean}): JSX.Eleme
   return (
     <Dropdown isOpen={dropdownOpen} toggle={() => { setStatus(OptionsStatus.Home); setDropdownOpen(!dropdownOpen) }} direction="up" className="">
       <DropdownToggle
-        className={`btn btn-outline-neutral-secondary d-flex align-items-center justify-content-center p-1 m-1
+        className={`btn btn-sm btn-outline-neutral-secondary d-flex align-items-center justify-content-center
               ${collapsed ? 'border-0' : 'border border-secondary'}
               ${dropdownOpen ? 'active' : ''}
               `}

packages/editor/src/components/CodeMirrorEditor/Toolbar/Toolbar.tsx

@@ -23,7 +23,7 @@ export const Toolbar = memo((props: Props): JSX.Element => {
 
   const { editorKey, acceptedUploadFileType, onUpload } = props;
   return (
-    <div className={`d-flex gap-2 p-2 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
+    <div className={`d-flex gap-2 py-1 px-2 px-md-3 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
       <AttachmentsDropup editorKey={editorKey} onUpload={onUpload} acceptedUploadFileType={acceptedUploadFileType} />
       <TextFormatTools editorKey={editorKey} />
       <EmojiButton