reorganize dom structure

apps/app/src/components/Layout/BasicLayout.tsx

@@ -35,10 +35,10 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
     <RawLayout className={className ?? ''}>
       <DndProvider backend={HTML5Backend}>
 
-        <div className="page-wrapper d-flex d-print-block">
+        <div className="page-wrapper flex-row">
           <Sidebar />
 
-          <div className="flex-fill mw-0">
+          <div className="flex-grow-1">
             <AlertSiteUrlUndefined />
             {children}
           </div>

apps/app/src/components/Layout/ShareLinkLayout.tsx

@@ -22,10 +22,8 @@ export const ShareLinkLayout = ({ children }: Props): JSX.Element => {
   return (
     <RawLayout className={className}>
 
-      <div className="page-wrapper d-flex d-print-block">
-        <div className="flex-fill mw-0">
-          {children}
-        </div>
+      <div className="page-wrapper">
+        {children}
       </div>
 
       <GrowiNavbarBottom />

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

@@ -573,8 +573,8 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const isUploadable = isUploadableImage || isUploadableFile;
 
   return (
-    <div data-testid="page-editor" id="page-editor" className={`d-flex flex-grow-1 overflow-auto ${props.visibility ? '' : 'd-none'}`}>
-      <div className="page-editor-editor-container flex-grow-1 flex-basis-0 mw-0">
+    <div data-testid="page-editor" id="page-editor" className={`flex-grow-1 d-flex overflow-y-auto ${props.visibility ? '' : 'd-none'}`}>
+      <div className="page-editor-editor-container flex-grow-1 d-flex flex-column" style={{ flexBasis: 0 }}>
         {/* <Editor
           ref={editorRef}
           value={initialValue}
@@ -589,7 +589,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
         /> */}
         <CodeMirrorEditorContainer ref={codeMirrorEditorContainerRef} />
       </div>
-      <div className="d-none d-lg-flex page-editor-preview-container justify-content-center flex-grow-1 flex-basis-0 mw-0">
+      <div className="page-editor-preview-container flex-grow-1 mw-0 d-none d-lg-flex flex-column" style={{ flexBasis: 0 }}>
         <Preview
           ref={previewRef}
           rendererOptions={rendererOptions}

apps/app/src/styles/_layout.scss

@@ -2,6 +2,10 @@
 
 @use './variables' as var;
 
+.dynamic-layout-root {
+  flex-grow: 1;
+}
+
 .dynamic-layout-root.growi-layout-fluid .grw-container-convertible {
   width: 100%;
   max-width: none;
@@ -27,6 +31,11 @@
   overflow-y: scroll;
 }
 
+.page-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 // padding settings for GrowiNavbarBottom
 .page-wrapper {
   padding-bottom: var.$grw-navbar-bottom-height;

packages/editor/src/components/playground/Playground.tsx

@@ -22,7 +22,7 @@ export const Playground = (): JSX.Element => {
         <div className="flex-grow-1 d-flex flex-column" style={{ flexBasis: 0 }}>
           <CodeMirrorEditorContainer ref={containerRef} />
         </div>
-        <div className="flex-grow-1 mw-0 d-flex flex-column bg-light border-start border-dark-subtle p-3" style={{ flexBasis: 0 }}>
+        <div className="flex-grow-1 mw-0 d-none d-lg-flex flex-column bg-light border-start border-dark-subtle p-3" style={{ flexBasis: 0 }}>
           <PlaygroundController />
         </div>
       </div>