fix i

src/components/ToolBar.js

@@ -188,6 +188,34 @@ const ToolBar = ({ editor, toolsLib = [], toolsOptions  }) => {
         return false
     }
 
+    const positionMobileDropdown = (sectionNode) => {
+        if (!sectionNode || typeof window === 'undefined' || window.innerWidth > 768) {
+            return
+        }
+
+        const menuNode = sectionNode.querySelector('.atma-editor-toolbar-s-opts')
+
+        if (!menuNode) {
+            return
+        }
+
+        const triggerRect = sectionNode.getBoundingClientRect()
+        const viewportPadding = 12
+        const availableWidth = window.innerWidth - viewportPadding * 2
+        const menuWidth = Math.min(menuNode.scrollWidth, availableWidth)
+        const clampedLeft = Math.min(
+            Math.max(triggerRect.left, viewportPadding),
+            window.innerWidth - viewportPadding - menuWidth
+        )
+
+        menuNode.style.position = 'fixed'
+        menuNode.style.top = `${triggerRect.bottom + 8}px`
+        menuNode.style.left = `${clampedLeft}px`
+        menuNode.style.right = 'auto'
+        menuNode.style.width = `${menuWidth}px`
+        menuNode.style.maxWidth = `${availableWidth}px`
+    }
+
     const getItem = (type = null, idx, isTitle = false) => {
         let item = null;
 
@@ -207,6 +235,13 @@ const ToolBar = ({ editor, toolsLib = [], toolsOptions  }) => {
                 return (
                     <div
                         key={idx}
+                        onMouseDown={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }}
+                        onTouchStart={(e) => {
+                            e.stopPropagation();
+                        }}
                         onClick={(e) => {
                             let wrap = editor.options.element.closest('.atma-editor-wrap');
 
@@ -292,12 +327,44 @@ const ToolBar = ({ editor, toolsLib = [], toolsOptions  }) => {
                     }
                 })
                 toolItems.push(
-                    <div key={`tools-s${i}`} className="atma-editor-toolbar-s" onClick={(e)=>{ e.target.closest('.atma-editor-toolbar-s').classList.toggle('show'); }}>
+                    <div key={`tools-s${i}`} className="atma-editor-toolbar-s" onClick={(e)=>{
+                        const sectionNode = e.target.closest('.atma-editor-toolbar-s');
+
+                        if (!sectionNode) {
+                            return;
+                        }
+
+                        const wrap = editor.options.element.closest('.atma-editor-wrap');
+                        const wasShown = sectionNode.classList.contains('show');
+
+                        wrap.querySelectorAll('.atma-editor-toolbar-s').forEach(function (s) {
+                            s.classList.remove('show');
+                        })
+
+                        if (!wasShown) {
+                            sectionNode.classList.add('show');
+                            positionMobileDropdown(sectionNode);
+                        }
+                    }}>
                         <Fragment>
                             {
                                 <div className={`qicon q${activeType === false || section.toggle === false ? section.items[0] : activeType}`} />
                             }
-                            <div className={'atma-editor-toolbar-s-opts'}>{ gItems }</div>
+                            <div
+                                className={'atma-editor-toolbar-s-opts'}
+                                onMouseDown={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                }}
+                                onTouchStart={(e) => {
+                                    e.stopPropagation();
+                                }}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                }}
+                            >
+                                { gItems }
+                            </div>
                         </Fragment>
                     </div>
                 )

src/index.scss

@@ -1382,8 +1382,48 @@ body{
 }
 
 @media (max-width: 768px) {
+    .atma-editor-toolbar{
+        width: 100%;
+        max-width: 100%;
+        overflow-x: visible;
+        overflow-y: visible;
+        -webkit-overflow-scrolling: touch;
+
+        &-g{
+            flex-wrap: wrap;
+
+            &:after{
+                display: none;
+            }
+        }
+
+        &-s{
+            &-opts{
+                left: auto;
+                right: 0;
+                transform: none;
+                width: max-content;
+                max-width: calc(100vw - 24px);
+                max-height: min(60vh, 360px);
+                overflow-y: auto;
+                z-index: 100001;
+            }
+        }
+    }
+
+    .atma-editor-toolbar-s-opts-item{
+        max-width: 100%;
+
+        span{
+            white-space: normal;
+            word-break: break-word;
+        }
+    }
+
     .atma-editor-emoji-popover{
-        left: 0;
-        width: min(344px, calc(100vw - 32px));
+        left: auto;
+        right: 0;
+        width: min(344px, calc(100vw - 24px));
+        max-width: calc(100vw - 24px);
     }
 }