Fix: permanent notification (#1333)

Why
When the permanent notification is displayed, a vertical scroll bar
is always displayed because the height of the window is more than
100%

What
Adjust app-container height when the permanent notification is visible

app/addons/fauxton/appwrapper.js

@@ -76,6 +76,9 @@ class App extends React.Component {
  const mainClass = classNames(
  {'closeMenu': this.props.isPrimaryNavMinimized}
  );
+ const appContainerClass = classNames(
+ {'app-container__with-perm-notification': this.props.isPermanentNotificationShowing}
+ );
  return (
  <div>
  <ToastContainer
@@ -96,7 +99,7 @@ class App extends React.Component {
  <NotificationPanelContainer />
  </div>
  <div id="main" className={mainClass}>
- <div id="app-container">
+ <div id="app-container" className={appContainerClass}>
  <div className="wrapper">
  <div role="main" className="pusher">
  <ContentWrapper router={this.props.router} setNavbarActiveLink={this.props.setNavbarActiveLink}/>
@@ -113,9 +116,11 @@ class App extends React.Component {
 }
 
 export default connect(
- ({ navigation }) => {
+ ({ navigation, notifications }) => {
  return {
- isPrimaryNavMinimized: navigation.isMinimized};
+ isPrimaryNavMinimized: navigation.isMinimized,
+ isPermanentNotificationShowing: notifications.permanentNotificationVisible,
+ };
  },
  (dispatch) => {
  return {

app/addons/fauxton/assets/less/components.less

@@ -54,13 +54,19 @@ button.clipboard-copy-element {
 
 #perma-warning {
  background-color: white;
+ height: 3.5rem;
+ border-bottom-style: solid;
+ border-width: 2px;
+ border-top-style: solid;
+ border-color: #B11925; 
+ overflow-y: auto;
 }
 
 .perma-warning__content {
- margin: 4px;
- padding: 10px;
+ margin: 0rem;
+ padding: 0.5rem 1rem 0.5rem 1rem;
  color: #B11925;
- outline-style: solid;
- outline-color: #B11925;
- outline-width: 4px;
+ top: 50%;
+ transform: translateY(-50%);
+ position: relative;
 }

app/addons/fauxton/notifications/components/PermanentNotification.js

@@ -34,15 +34,15 @@ export default class PermanentNotification extends React.Component {
  }
 
  getContent () {
- if (!this.props.visible || !this.props.message) {
- return null;
- }
  return (
  <p className="perma-warning__content" dangerouslySetInnerHTML={this.getMsg()}></p>
  );
  }
 
  render () {
+ if (!this.props.visible || !this.props.message) {
+ return null;
+ }
  return (
  <div id="perma-warning">
  {this.getContent()}

assets/less/templates.less

@@ -28,6 +28,10 @@
  height: 100vh;
  position: relative;
  overflow: hidden;
+
+ &.app-container__with-perm-notification {
+ height: calc(100vh - 3.5rem);
+ }
 }
 
 @media screen and (max-height: 600px) {