diff --git a/packages/styles/src/Styles/_scrollbar.scss b/packages/styles/src/Styles/_scrollbar.scss index 1ae72596a..857264fd4 100644 --- a/packages/styles/src/Styles/_scrollbar.scss +++ b/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; } diff --git a/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx index a9edfe7dd..34d52f7cd 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx +++ b/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 = ({ return ( <> + diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx index 8c5a167a1..6e5a8935c 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx +++ b/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 = () => {
{ )}
diff --git a/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx index a90f4f1f4..b6db168c2 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx +++ b/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 = ({ }, []) return ( -
+
{featureStatus !== FeatureStatus.Entitled && ( )} @@ -250,7 +249,6 @@ export const SuperEditor: FunctionComponent = ({ -