При нажатии на вертикальный сплиттер kendo ui контейнер делится на всю высоту

Question

У меня есть макет, который я работаю, но столкнулся с проблемой. Это выглядит так, когда запускается (как и должно быть)

Но если я нажму на черную полосу вертикального разделителя, то это будет выглядеть так

Понятия не имею, почему происходит второе изображение, когда я go настраиваю вертикальную полосу разделителя, макет должен остаться как первое изображение.

Есть идеи, почему движение происходит, а не остается так, как должно?

$(document).ready(function() {
  RunMySplitters();
  AdjustVerticalInnerSplitter('middle');

  InitializeButtons();

});

function InitializeButtons() {
  $('#btnShowBlade').on('click', () => {
    $('#ItemsBladeWrapper').addClass('ShowBlade');
    ResizeTopAndBottomPane();
  });

  $('#btnHideBlade').on('click', () => {
    $('#ItemsBladeWrapper').removeClass('ShowBlade');
    $('#ItemsBladeWrapper').addClass('HideBlade');
    ResizeTopAndBottomPane();
  });
}

function RunMySplitters() {
  let splitterPosition = "middle";

  $("#vertical-n")
    .kendoSplitter({
      orientation: "vertical",
      panes: [{
        collapsible: false
      }]
    });

  $("#horizontal")
    .kendoSplitter({
      panes: [{
          collapsible: true,
          size: "10%",
          collapsed: false
        },
        {
          collapsible: true,
          size: "90%"
        }
      ],
      collapse: function(e) {},
      resize: function(e) {
        ResizeTopAndBottomPane();
      },
      expand: function(e) {

      }
    });
  let hSplitterBar = $('#horizontal').data("kendoSplitter");
  hSplitterBar.max("#left-pane", "10%");

  $("#innerVertical")
    .kendoSplitter({
      orientation: "vertical",
      panes: [{
          collapsible: true,
          size: '50%'
        },
        {
          collapsible: true,
          size: '50%',
          //collapsed: apiHome.IsImplementor //TAsk 11 Changes add collapsed:true
        }
      ],
      collapse: function(e) {

        if (e.pane.id === "top-pane" && splitterPosition === "bottom") {
          splitterPosition = "middle";
        } else if (e.pane.id === "top-pane" && splitterPosition === "middle") {
          splitterPosition = "top";
        } else if (e.pane.id === "bottom-pane" && splitterPosition === "top") {
          splitterPosition = "middle";
        } else if (e.pane.id === "bottom-pane" && splitterPosition === "middle") {
          splitterPosition = "bottom";
        }
        AdjustVerticalInnerSplitter(splitterPosition);
      },
      resize: function(e) {
        //console.log("Resizing");

        //kendo.ui.progress($("#container"), true);
        //let tGrid = $('#TopGrid').getKendoGrid();
        //let bGrid = $('#BottomGrid').getKendoGrid();

        //tGrid.setOptions({
        //    height: $('#innerVertical #top-pane').height()
        //});
        //bGrid.setOptions({
        //    height: $('#innerVertical #bottom-pane').height()
        //});
        //kendo.ui.progress($("#container"), false);
      },
      expand: function(e) {

        if (e.pane.id === "top-pane" && splitterPosition === "top") {
          splitterPosition = "middle";
        } else if (e.pane.id === "top-pane" && splitterPosition === "middle") {
          splitterPosition = "bottom";
        } else if (e.pane.id === "bottom-pane" && splitterPosition === "bottom") {
          splitterPosition = "middle";
        } else if (e.pane.id === "bottom-pane" && splitterPosition === "middle") {
          splitterPosition = "top";
        }
        AdjustVerticalInnerSplitter(splitterPosition);
      }
    });

  let topBar = $('#innerVertical').data("kendoSplitter");
  topBar.max("#top-pane", "75%");
  topBar.max("#bottom-pane", "75%");
}

function AdjustVerticalInnerSplitter(collapseType) {

  var splitter = $("#innerVertical").data("kendoSplitter");
  var catalogGrid;
  var qeGrid;

  switch (collapseType) {
    case "top":
      splitter.expand("#bottom-pane");
      splitter.collapse("#top-pane");
      splitter.size("#top-pane", "0%");
      splitterPosition = "top";

      break;

    case "bottom":
      splitter.expand("#top-pane");
      splitter.collapse("#bottom-pane");

      splitter.size("#bottom-pane", "0%");

      splitterPosition = "bottom";

      break;

    default:
      splitter.expand("#bottom-pane");
      splitter.expand("#top-pane");
      splitter.size("#bottom-pane", "49%");
      splitter.size("#top-pane", "47.5%");

      $('#right-pane').css('top', '0px');

      splitterPosition = "middle";

      //let tGrid = $('#TopGrid').getKendoGrid();
      //tGrid.setOptions({
      //    height: $('#innerVertical #top-pane').height()
      //});

      break;
  }
}

function ResizeTopAndBottomPane() {
  // This is the center splitterbar
  let centerBar = $('.k-splitbar.k-state-default.k-splitbar-vertical.k-splitbar-draggable-vertical');
  let rightPaneWidth = $('#RightPaneWrapper').width();
  let rightBladeWidth = $('#ItemsBladeWrapper').width();
  let areaTabWidth = $('#AreaTabsWrapper').width();

  let newInnerVerticalWidth = rightPaneWidth - rightBladeWidth;
  //let grid = $('#QuickEntryGrid').getKendoGrid();

  $(centerBar).width(newInnerVerticalWidth + "px");

  $('#innerVertical').width(newInnerVerticalWidth + "px");

  // This is the Global Groups container
  $('#innerVertical #top-pane').width(newInnerVerticalWidth + "px");

  // This is the Items Grid container
  $('#innerVertical #bottom-pane').width(newInnerVerticalWidth + "px");

  $('#AreaTabsWrapper').width((newInnerVerticalWidth - 4) + "px");

  // Need to keep checking if the items grid is null or not
  //let findGrid = setInterval(function () {
  //    if (grid == null) {
  //        grid = $('#QuickEntryGrid').getKendoGrid();
  //    }
  //    else {
  //        clearFindGrid();
  //    }
  //}, 100);

  //let clearFindGrid = function () {
  //    clearInterval(findGrid);
  //};

  //if (grid != null) {
  //    grid.setOptions({
  //        width: (newInnerVerticalWidth - 2) + "px"
  //    });
  //    $("#QuickEntryGrid").find("table").on("keydown", onGridKeydown);
  //}
}

#ContainerHeaderBarWrapper {
  width: 100%;
  height: 40px;
  margin-top: 55px;
}

#ContainerHeaderBar {
  width: 100%;
  height: 40px;
  background-color: darkorange;
}

#MenuButton {
  width: 195px;
  float: left;
  margin-top: 1px;
}

#OrderInfoBar {
  width: calc(100% - 203px);
  background-color: black;
  color: white;
  height: 36px;
  border-radius: 3px;
  margin-left: 200px;
}

#Container {
  /*height: calc(100vh - 90px);*/
  height: 100vh;
  width: 100%;
  background-color: hotpink;
  /*margin-top: 90px;*/
  overflow: hidden;
}

#vertical-n {
  height: 100% !important;
}

#horizontal {
  height: 100% !important;
}

#innerVertical {
  height: 100% !important;
}

#left-pane {
  height: 100% !important;
}

#right-pane {
  height: calc(100% - 35px) !important;
  /*margin-top: 35px*/
}

#RightPaneWrapper {
  overflow: hidden;
}

#AreaTabsWrapper {
  height: 35px;
  background-color: purple;
  padding-left: 5px;
}

#ItemsBladeWrapper {
  position: fixed;
  right: -330px;
  width: 325px;
  background-color: burlywood;
  height: calc(100vh - 50px);
  /*height: 100% !important;*/
  z-index: 1;
  /*padding:5px;*/
}

#ItemsBladeWrapper.HideBlade {
  transition: ease-out .2s;
  right: -330px;
}

#ItemsBladeWrapper.ShowBlade {
  transition: ease-in .2s;
  right: 0px;
}

#ItemsBlade {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  background-color: coral;
}

.k-icon.k-collapse-prev.k-i-arrow-60-left {
  display: none;
}

.k-icon.k-collapse-next.k-i-arrow-60-right {
  display: none;
}

.k-icon.k-resize-handle.k-i-vbar {
  height: 30px;
  margin-top: -23px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap.min.css" />
<div id="Container">
  <div id="ContainerHeaderBarWrapper">
    <div id="ContainerHeader">
      <div id="MenuButton" class="btn btn-danger"> Menu </div>
      <div id="OrderInfoBar"></div>
    </div>
  </div>
  <div id="vertical-n">
    <div id="top-pane">
      <div id="horizontal">
        <div id="left-pane" style="background-color: yellow;">
          <div class="pane-content"></div>
        </div>
        <div id="RightPaneWrapper">
          <div id="AreaTabsWrapper">
            <button id="btnShowBlade" class="btn btn-primary btn-sm">Show Blade</button>
            <button id="btnHideBlade" class="btn btn-warning btn-sm">Hide Blade</button>
          </div>
          <div id="right-pane">
            <div id="innerVertical">
              <div id="top-pane" style="width: 100%;background-color: blue;">
                <div class="pane-content">
                  <div id="TopGrid"></div>
                </div>
              </div>
              <div id="bottom-pane" style="width: 100%;background-color: green;">
                <div class="pane-content">
                  <div id="BottomGrid"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>