Improve: revision-path styles when on-edit

resource/js/components/Page/RevisionPath.js

@@ -73,9 +73,6 @@ export default class RevisionPath extends React.Component {
       marginLeft: "0.2em",
       marginRight: "0.2em",
     }
-    const pathSegmentStyle = {
-      wordBreak: 'keep-all'
-    }
     const editButtonStyle = {
       marginLeft: "0.5em",
       padding: "0 2px",
@@ -89,7 +86,7 @@ export default class RevisionPath extends React.Component {
 
       // add elements for page
       afterElements.push(
-        <span key={page.pagePath} className="path-segment" style={pathSegmentStyle}>
+        <span key={page.pagePath} className="path-segment">
           <a href={page.pagePath}>{page.pageName}</a>
         </span>
       );

resource/styles/scss/_on-edit.scss

@@ -34,7 +34,7 @@ body.on-edit {
    */
   .nav-main-right-tab:not(.dropdown) {
     // hide if screen size is less than smartphone
-    @media (max-width: $screen-xs-max) {
+    @media (max-width: $screen-xs) {
       display: none;
     }
   }
@@ -128,12 +128,12 @@ body.on-edit {
 
   .row.bg-title {
     $left-margin: $nav-main-left-tab-width * 2 + 25px;  // width of .nav-main-left-tab x 2 + some margin
-    $right-margin: 128px + 94px;                        // width of presentation and history tabs width
+    $right-margin: 128px + 94px + 46px;                 // width of all of nav-main-right-tab
 
     position: absolute;
     z-index: 1;
     left: $left-margin;
-    min-width: calc(100% - #{$left-margin} - #{$right-margin});
+    width: calc(100% - #{$left-margin} - #{$right-margin});
 
     // for crowi layout
     > .col-md-9, .col-xs-12 {
@@ -143,17 +143,24 @@ body.on-edit {
 
     background: none;
 
+    .header-wrap {
+      overflow-x: hidden;
+    }
     h1#revision-path {
       @include variable-font-size(20px);
       line-height: 1em;
 
+      // nowrap even if the path is too long
       .d-flex {
-        flex-wrap: nowrap;  // nowrap even if the path is too long
+        flex-wrap: nowrap;
+      }
+      .path-segment {
+        white-space: nowrap;
       }
     }
 
     // hide if screen size is less than smartphone
-    @media (max-width: $screen-xs) {
+    @media (max-width: $screen-sm) {
       display: none;
     }
   }

resource/styles/scss/theme/_override-agileadmin.scss

@@ -1,3 +1,7 @@
+.bg-title {
+  overflow: unset;
+}
+
 /*
  * Growi original
  */