chore: fix toolbar scrollbar on mac and move toolbar to top

packages/styles/src/Styles/_scrollbar.scss

@@ -16,7 +16,9 @@
     background-clip: padding-box;
     -webkit-border-radius: 10px;
     background-color: var(--sn-stylekit-scrollbar-thumb-color);
-    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow:
+      inset -1px -1px 0px rgba(0, 0, 0, 0.05),
+      inset 1px 1px 0px rgba(0, 0, 0, 0.05);
   }
 
   ::-webkit-scrollbar-button {
@@ -29,5 +31,17 @@
     background-color: transparent;
   }
 
+  .super-toolbar {
+    ::-webkit-scrollbar {
+      height: 0;
+    }
+
+    @media screen and (min-width: 768px) {
+      ::-webkit-scrollbar {
+        height: 13px;
+      }
+    }
+  }
+
   scrollbar-width: thin;
 }

packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx

@@ -26,6 +26,7 @@ import { classNames } from '@standardnotes/utils'
 import { MarkdownTransformers } from './MarkdownTransformers'
 import { RemoveBrokenTablesPlugin } from './Plugins/TablePlugin'
 import TableActionMenuPlugin from './Plugins/TableCellActionMenuPlugin'
+import ToolbarPlugin from './Plugins/ToolbarPlugin/ToolbarPlugin'
 
 type BlocksEditorProps = {
   onChange?: (value: string, preview: string) => void
@@ -73,6 +74,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
 
   return (
     <>
+      <ToolbarPlugin />
       <RichTextPlugin
         contentEditable={
           <div id="blocks-editor" className="editor-scroller h-full min-h-0">

packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx

@@ -390,30 +390,6 @@ const ToolbarPlugin = () => {
       },
     })
   }, [application.keyboardService, editor, isMobile, isToolbarVisible, toolbarStore])
-  useEffect(() => {
-    const container = containerRef.current
-    const rootElement = editor.getRootElement()
-
-    if (!container || !rootElement) {
-      return
-    }
-
-    const resizeObserver = new ResizeObserver(() => {
-      if (isMobile) {
-        return
-      }
-
-      const containerHeight = container.offsetHeight
-
-      rootElement.style.paddingBottom = containerHeight ? `${containerHeight + 8}px` : ''
-    })
-
-    resizeObserver.observe(container)
-
-    return () => {
-      resizeObserver.disconnect()
-    }
-  }, [editor, isMobile])
 
   return (
     <>
@@ -421,7 +397,7 @@ const ToolbarPlugin = () => {
       <div
         className={classNames(
           'bg-contrast',
-          'md:absolute md:bottom-0 md:left-1/2 md:w-full md:-translate-x-1/2 md:border-t md:border-border md:px-2 md:py-1 md:translucent-ui:border-[--popover-border-color] md:translucent-ui:bg-[--popover-background-color] md:translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)]',
+          'md:w-full md:border-b md:border-border md:px-2 md:py-1 md:translucent-ui:border-[--popover-border-color] md:translucent-ui:bg-[--popover-background-color] md:translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)]',
           !canShowToolbar || !isEditable ? 'hidden' : '',
         )}
         id="super-mobile-toolbar"
@@ -465,7 +441,7 @@ const ToolbarPlugin = () => {
         )}
         <div className="flex w-full flex-shrink-0 border-t border-border md:border-0">
           <Toolbar
-            className="flex items-center gap-1 overflow-x-auto px-1 [&::-webkit-scrollbar]:h-0 md:[&::-webkit-scrollbar]:h-[13px]"
+            className="super-toolbar flex items-center gap-1 overflow-x-auto px-1"
             ref={toolbarRef}
             store={toolbarStore}
           >

packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx

@@ -44,7 +44,6 @@ import ReadonlyPlugin from './Plugins/ReadonlyPlugin/ReadonlyPlugin'
 import { SuperSearchContextProvider } from './Plugins/SearchPlugin/Context'
 import { SearchPlugin } from './Plugins/SearchPlugin/SearchPlugin'
 import ModalOverlay from '@/Components/Modal/ModalOverlay'
-import ToolbarPlugin from './Plugins/ToolbarPlugin/ToolbarPlugin'
 import CodeOptionsPlugin from './Plugins/CodeOptionsPlugin/CodeOptions'
 import RemoteImagePlugin from './Plugins/RemoteImagePlugin/RemoteImagePlugin'
 import NotEntitledBanner from '../ComponentView/NotEntitledBanner'
@@ -212,7 +211,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
   }, [])
 
   return (
-    <div className="font-editor relative flex h-full w-full flex-col md:block" ref={ref}>
+    <div className="font-editor relative flex h-full w-full flex-col" ref={ref}>
       {featureStatus !== FeatureStatus.Entitled && (
         <NotEntitledBanner featureStatus={featureStatus} feature={GetSuperNoteFeature()} />
       )}
@@ -250,7 +249,6 @@ export const SuperEditor: FunctionComponent<Props> = ({
                 <SuperSearchContextProvider>
                   <SearchPlugin />
                 </SuperSearchContextProvider>
-                <ToolbarPlugin />
                 <CodeOptionsPlugin />
                 <RemoteImagePlugin />
               </BlocksEditor>