html, body {
  height: 100%;
}


body {
  overflow: hidden;
}


// setup panel scrolling
.app, .app-layout, .app-layout-body, .app-tool-region, .app-tool, .tool-panel {
  height: inherit;
}


// acount for the fixed nav bar
.app-layout {
    padding-top: 30px;
}


.app-tool {
  background: white;
}

// shared between both panels
.tool-panel {
    overflow: auto;
}

// panel on the left, with list of info
.list-panel {
    width: 60%;
}

// panel on the right, with details on info
.info-panel {
    width: 40%;
}

@include mq-medium {
  .tool-panel {
    float: left;
    height: 100%;
  }

  .list-panel {
      width: 60%;
  }

  .info-panel {
      width: 40%;
  }
}

html, body {
  height: 100%;
}


body {
  overflow: hidden;
}


// setup panel scrolling
.app, .app-layout, .app-layout-body, .app-tool-region, .app-tool, .tool-panel {
  height: inherit;
}


// acount for the fixed nav bar
.app-layout {
    padding-top: 30px;
}


.app-tool {
  background: white;
}

// shared between both panels
.tool-panel {
    overflow: auto;
}

// panel on the left, with list of info
.list-panel {
    height: 60%;
}

// panel on the right, with details on info
.info-panel {
    height: 40%;
}

@include mq-medium {
  .tool-panel {
    float: left;
    height: 100%;
  }

  .list-panel {
      width: 60%;
  }

  .info-panel {
      width: 40%;
  }
}

Fix panel for small screens
Fix panel for small screens
