Increase scrollable area on toolbar (#15615)

* increase scorllable area

* fix

* fix

* ..

app/assets/stylesheets/components/editor-toolbar.scss

@@ -1,11 +1,5 @@
 .editor-toolbar {
   display: flex;
-  background: var(--base-0);
-
-  &::-webkit-scrollbar {
-    background: transparent;
-    height: 0;
-  }
 
   .toolbar-btn .spinner-or-cancel {
     .cancel {

app/assets/stylesheets/views/article-form.scss

@@ -167,8 +167,15 @@
     position: sticky;
     top: 0;
     background: var(--base-0);
-    padding: var(--su-2) var(--content-padding-x);
+    padding: 0 var(--content-padding-x);
     padding-right: var(--toolbar-padding-right, 0);
+    overflow-x: auto;
+    flex-shrink: 0;
+
+    &::-webkit-scrollbar {
+      background: transparent;
+      height: 0;
+    }
 
     margin: calc(var(--content-padding-y) * -1)
       calc(var(--content-padding-x) * -1) var(--su-6)
@@ -180,6 +187,7 @@
 
     @media (min-width: $breakpoint-m) {
       --toolbar-padding-right: var(--content-padding-x);
+      overflow: visible;
     }
   }
 

app/javascript/article-form/components/Toolbar.jsx

@@ -10,11 +10,13 @@ export const Toolbar = ({ version, textAreaId }) => {
         version === 'v1' ? 'border-t-0' : ''
       }`}
     >
-      {version === 'v1' ? (
-        <ImageUploader editorVersion={version} />
-      ) : (
-        <MarkdownToolbar textAreaId={textAreaId} />
-      )}
+      <div className="my-2">
+        {version === 'v1' ? (
+          <ImageUploader editorVersion={version} />
+        ) : (
+          <MarkdownToolbar textAreaId={textAreaId} />
+        )}
+      </div>
     </div>
   );
 };

app/javascript/crayons/MarkdownToolbar/MarkdownToolbar.jsx

@@ -321,7 +321,7 @@ export const MarkdownToolbar = ({ textAreaId }) => {
 
   return (
     <div
-      className="editor-toolbar relative overflow-x-auto m:overflow-visible"
+      className="editor-toolbar relative"
       aria-label="Markdown formatting toolbar"
       role="toolbar"
       aria-controls={textAreaId}
@@ -335,7 +335,7 @@ export const MarkdownToolbar = ({ textAreaId }) => {
             variant="ghost"
             contentType="icon"
             icon={icon}
-            className="toolbar-btn mr-2"
+            className="toolbar-btn mr-1"
             tabindex={index === 0 ? '0' : '-1'}
             onClick={() => insertSyntax(controlName)}
             onKeyUp={(e) => handleToolbarButtonKeyPress(e, 'toolbar-btn')}