Merge pull request #2878 from weseek/imprv/refact-omit-too-long-page-path

ページパスとページタイトルが長い場合のEditモードのサブナビバーの表示

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

@@ -51,13 +51,15 @@ 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}
-          pagePath={pagePath}
-          isPageForbidden={isPageForbidden}
-        />
+        <div className="mx-2">
+          <RevisionPathControls
+            pageId={pageId}
+            pagePath={pagePath}
+            isPageForbidden={isPageForbidden}
+          />
+        </div>
       </span>
     </div>
   );
@@ -72,10 +74,12 @@ const UserPagePathNav = ({ pageId, pagePath }) => {
     <div className="grw-page-path-nav">
       <span className="d-flex align-items-center flex-wrap">
         <h4 className="grw-user-page-path">{latterLink}</h4>
-        <RevisionPathControls
-          pageId={pageId}
-          pagePath={pagePath}
-        />
+        <div className="mx-2">
+          <RevisionPathControls
+            pageId={pageId}
+            pagePath={pagePath}
+          />
+        </div>
       </span>
     </div>
   );
@@ -162,14 +166,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 grw-subnav-left-side">
         { isDrawerMode && (
           <div className="d-none d-md-flex align-items-center border-right mr-3 pr-3">
             <DrawerToggler />
           </div>
         ) }
 
-        <div>
+        <div className="grw-path-nav-container">
           { !isCompactMode && !isPageNotFound && !isPageForbidden && !isUserPage && (
             <div className="mb-2">
               <TagLabels />

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

@@ -29,22 +29,6 @@ body.on-edit {
     }
   }
 
-  .grw-page-path-nav,
-  .grw-page-path-nav h1 {
-    width: calc(100vw - 300px);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    @include media-breakpoint-up(md) {
-      width: calc(100vw - 350px);
-    }
-
-    @include media-breakpoint-up(lg) {
-      width: calc(100vw - 560px);
-    }
-  }
-
   .page-wrapper {
     position: relative;
     top: $grw-navbar-border-width;
@@ -174,6 +158,27 @@ body.on-edit {
   /*********************
    * Navigation styles
    */
+  // ellipsis .grw-page-path-hierarchical-link
+  .grw-subnav-left-side {
+    overflow: hidden;
+    .grw-path-nav-container {
+      overflow: hidden;
+      .grw-page-path-nav {
+        white-space: nowrap;
+
+        .grw-page-path-hierarchical-link {
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        h1 {
+          overflow: hidden;
+        }
+      }
+    }
+  }
+
   .nav:hover {
     .btn-copy,
     .btn-edit,

src/lib/components/PagePathHierarchicalLink.jsx

@@ -46,7 +46,7 @@ const PagePathHierarchicalLink = (props) => {
   const RootElm = ({ children }) => {
     return props.isInnerElem
       ? <>{children}</>
-      : <span className="grw-page-path-hierarchical-link text-break">{children}</span>;
+      : <span className="grw-page-path-hierarchical-link d-inline-block text-break">{children}</span>;
   };
 
   return (