Refactoring completed.

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -51,7 +51,7 @@ const PagePathNav = ({ pageId, pagePath, isPageForbidden }) => {
   return (
     <div className="grw-page-path-nav">
       {formerLink}
-      <span className="d-flex align-items-center flex-wrap">
+      <span className="d-flex align-items-center">
         <h1 className="m-0">{latterLink}</h1>
         <RevisionPathControls
           pageId={pageId}
@@ -162,14 +162,14 @@ const GrowiSubNavigation = (props) => {
     <div className={`grw-subnav d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
 
       {/* Left side */}
-      <div className="d-flex">
+      <div className="d-flex overflow-hidden">
         { isDrawerMode && (
           <div className="d-none d-md-flex align-items-center border-right mr-3 pr-3">
             <DrawerToggler />
           </div>
         ) }
 
-        <div>
+        <div className="overflow-hidden">
           { !isCompactMode && !isPageNotFound && !isPageForbidden && !isUserPage && (
             <div className="mb-2">
               <TagLabels />

src/client/js/components/Page/RevisionPathControls.jsx

@@ -21,14 +21,14 @@ const RevisionPathControls = (props) => {
   const isPageInTrash = isTrashPage(pagePath);
 
   return (
-    <>
+    <div className="mx-2">
       <CopyDropdown pagePath={pagePath} pageId={pageId} buttonStyle={buttonStyle} />
       { !isPageInTrash && !isPageForbidden && (
         <a href="#edit" className="d-edit-none text-muted btn btn-secondary bg-transparent btn-edit border-0" style={buttonStyle}>
           <i className="icon-note" />
         </a>
       ) }
-    </>
+    </div>
   );
 };
 

src/client/styles/scss/_on-edit.scss

@@ -29,19 +29,18 @@ body.on-edit {
     }
   }
 
-  .grw-page-path-nav,
-  .grw-page-path-nav h1 {
-    width: calc(100vw - 300px);
-    overflow: hidden;
-    text-overflow: ellipsis;
+  .grw-page-path-nav {
     white-space: nowrap;
 
-    @include media-breakpoint-up(md) {
-      width: calc(100vw - 350px);
+    .grw-page-path-hierarchical-link {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
-    @include media-breakpoint-up(lg) {
-      width: calc(100vw - 560px);
+    h1 {
+      overflow: hidden;
     }
   }