Merge pull request #8555 from weseek/fix/editor-layout

fix: Editor layout and styles

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

@@ -57,7 +57,7 @@ const EditorNavbarBottom = (): JSX.Element => {
   }, []);
 
   return (
-    <div data-testid="grw-editor-navbar-bottom">
+    <div className="border-top" data-testid="grw-editor-navbar-bottom">
       {/* Collapsed SlackNotification */}
       {isSlackConfigured && (
         <Collapse isOpen={isSlackExpanded && !isDeviceLargerThanLg}>
@@ -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' : ''}
               `}

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

@@ -436,7 +436,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
       <EditorNavbar />
 
       <div className={`flex-expand-horiz ${props.visibility ? '' : 'd-none'}`}>
-        <div className="page-editor-editor-container flex-expand-vert">
+        <div className="page-editor-editor-container flex-expand-vert border-end">
           <CodeMirrorEditorMain
             onChange={markdownChangedHandler}
             onSave={saveWithShortcut}
@@ -454,7 +454,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
         <div
           ref={previewRef}
           onScroll={scrollPreviewHandlerThrottle}
-          className="page-editor-preview-container flex-expand-vert d-none d-lg-flex"
+          className="page-editor-preview-container flex-expand-vert overflow-y-auto d-none d-lg-flex"
         >
           <Preview
             rendererOptions={rendererOptions}

apps/app/src/styles/_editor.scss

@@ -27,7 +27,6 @@
    * Expand Editor
    *****************/
   .dynamic-layout-root {
-    width: calc(100vw - var.$grw-sidebar-nav-width);
     @extend .flex-expand-vh-100;
   }
 

packages/core/scss/_flex-expand.scss

@@ -13,9 +13,13 @@
 .flex-expand-vh-100 {
   height: 100vh;
 
-  .flex-expand-horiz,
-  .flex-expand-vert {
+  .flex-expand-horiz {
     height: 100%;
     overflow-y: auto;
   }
+
+  .flex-expand-vert {
+    height: 100%;
+    overflow-y: hidden;
+  }
 }

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

@@ -203,7 +203,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [isUploading, isDragAccept, isDragReject, acceptedUploadFileType]);
 
   return (
-    <div className={`${style['codemirror-editor']} flex-expand-vert`}>
+    <div className={`${style['codemirror-editor']} flex-expand-vert overflow-y-hidden`}>
       <div {...getRootProps()} className={`dropzone ${fileUploadState} flex-expand-vert`}>
         <input {...getInputProps()} />
         <FileDropzoneOverlay isEnabled={isDragActive} />

packages/editor/src/components/CodeMirrorEditor/Toolbar/AttachmentsDropup.module.scss

@@ -0,0 +1,21 @@
+.btn-attachment-toggle {
+  $color-active: var(--bs-tertiary-color);
+  $color-active-rgb: var(--bs-tertiary-color-rgb);
+
+  --bs-btn-color: var(--bs-tertiary-color);
+  --bs-btn-bg: var(--bs-secondary-bg);
+
+  --bs-btn-hover-color: #{$color-active};
+  --bs-btn-hover-bg: rgba(#{$color-active-rgb}, 0.2);
+
+  --bs-btn-active-color: #{$color-active};
+  // --bs-btn-active-bg: transparent;
+
+  --bs-btn-border-width: 0;
+
+  &:global {
+    &:hover {
+      --bs-btn-active-bg: rgba(#{$color-active-rgb}, 0.2);
+    }
+  }
+}

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

@@ -13,6 +13,11 @@ import type { GlobalCodeMirrorEditorKey } from '../../../consts';
 import { AttachmentsDropdownItem } from './AttachmentsDropdownItem';
 import { LinkEditButton } from './LinkEditButton';
 
+import styles from './AttachmentsDropup.module.scss';
+
+const btnAttachmentToggleClass = styles['btn-attachment-toggle'];
+
+
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
   acceptedUploadFileType: AcceptedUploadFileType,
@@ -27,7 +32,7 @@ export const AttachmentsDropup = (props: Props): JSX.Element => {
   return (
     <>
       <Dropdown isOpen={isOpen} toggle={() => setOpen(!isOpen)} direction="up" className="lh-1">
-        <DropdownToggle className="btn-toolbar-button rounded-circle">
+        <DropdownToggle className={`${btnAttachmentToggleClass} btn-toolbar-button rounded-circle`} color="unset">
           <span className="material-symbols-outlined fs-6">add</span>
         </DropdownToggle>
         <DropdownMenu>

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 border-top codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
       <AttachmentsDropup editorKey={editorKey} onUpload={onUpload} acceptedUploadFileType={acceptedUploadFileType} />
       <TextFormatTools editorKey={editorKey} />
       <EmojiButton