correct adjust height of the viewer

app/components/breadcrumb/index.hbs

-<nav aria-label="breadcrumb" class="m-2">
+<nav aria-label="breadcrumb" class="m-2 nav-breadcrumb">
    <ol class="breadcrumb">
     {{#each this.nodes as |node|}}
       <li class="breadcrumb-item">

app/components/nav/topbar.hbs

-<nav class="navbar navbar-expand nav-topbar">
+<nav id='nav-topbar' class="navbar navbar-expand nav-topbar">
   <div class="container-fluid">
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>

app/components/viewer/index.hbs

 <div class="panel viewer col m-2 p-2">
-  <div class="d-flex justify-content-between">
+  <div class="d-flex justify-content-between action-buttons">
     <Viewer::ActionButtons
       @document_versions={{this.document_versions}}
       @isLocked={{this.isLocked}}
@@ -19,7 +19,6 @@
     @onNodeClicked={{this.onNodeClicked}}
     @hint={{@hint}} />
 
-
   <Viewer::Document
     @pages={{this.pages}} />
 

app/components/viewer/pages.hbs

-<div class="d-flex flex-column pages">
+<div
+  class="d-flex flex-column pages"
+  {{adjust_element_height}}>
   {{#each @pages as |page|}}
     <Viewer::Page
       @page={{page}}
       @scroll_to_page={{@scroll_to_page}} />
   {{/each}}
-</div>
\ No newline at end of file
+</div>

app/components/viewer/thumbnails.hbs

-<div class="d-flex flex-column thumbnails">
+<div
+  class="d-flex flex-column thumbnails"
+  {{adjust_element_height}}>
   {{#each @pages as |page|}}
     <Viewer::Thumbnail
       @page={{page}}
       @onDblClick={{@onDblClick}} />
   {{/each}}
-</div>
\ No newline at end of file
+</div>

app/modifiers/adjust_element_height.js

+import Modifier from 'ember-modifier';
+
+
+export default class AdjustElementHeightModifier extends Modifier {
+  /*
+    This modifier will calculate height of the element so the element
+    will fit in visible area without overflows.
+
+    This modifier was written having in mind '.pages' and '.thumbnails'
+    components of viewer. The '.pages' and '.thumbnails' heights (i.e.
+    elements' height) must be so that '.pages' and '.thumbnails' will
+    ocupy whole visible screen area without overflowing it.
+  */
+  didInstall() {
+    let height = this._getCorrectHeight();
+
+    this.element.style.height = `${height}px`;
+  }
+
+  _getCorrectHeight() {
+    let ret;
+
+    ret = window.innerHeight;
+    ret -= this._getNavbarHeight();
+    ret -= this._getBreadcrumbHeight();
+    ret -= this._getActionButtonsHeight();
+    ret -= 60; // guessing here, in theory this value should be
+    // calculeted based on padding/margin of various dom elements
+
+    return ret;
+  }
+
+  _getComputedHeight({element_id, element_class, default_value}) {
+    let el, styles, height;
+
+    if (element_id) {
+      el = document.getElementById(element_id);
+    } else if (element_class) {
+      el  = document.getElementsByClassName(element_class)[0];
+    }
+
+    if (!el) {
+      if (element_id) {
+        console.error(`Element with ID ${element_id} not found`);
+      }
+      if (element_class) {
+       console.error(`Element with class name ${element_class} not found`);
+      }
+      return default_value; // blunt guess of element height
+    }
+
+    styles = window.getComputedStyle(el);
+
+    height = parseInt(styles.height);
+    height += parseInt(styles.marginTop);
+    height += parseInt(styles.marginBottom);
+
+    if (element_id) {
+      console.log(`ID=${element_id}: height=${styles.height}`);
+      console.log(`ID=${element_id}: marginTop=${styles.marginTop}`);
+      console.log(`ID=${element_id}: marginBottom=${styles.marginBottom}`);
+    } else {
+      console.log(`element_class=${element_class}: height=${styles.height}`);
+      console.log(`element_class=${element_class}: marginTop=${styles.marginTop}`);
+      console.log(`element_class=${element_class}: marginBottom=${styles.marginBottom}`);
+    }
+    return height;
+  }
+
+  _getNavbarHeight() {
+    return this._getComputedHeight({
+      element_id: 'nav-topbar',
+      default_value: 56
+    });
+  }
+
+  _getBreadcrumbHeight() {
+    return this._getComputedHeight({
+      element_class: 'nav-breadcrumb',
+      default_value: 40
+    });
+  }
+
+  _getActionButtonsHeight() {
+    return this._getComputedHeight({
+      element_class: 'action-buttons',
+      default_value: 40
+    });
+  }
+}
\ No newline at end of file

app/styles/document_version.scss

 
 .thumbnails {
-  max-width: 8rem;
+  max-width: 10rem;
+  width: 10rem;
+  overflow: scroll;
 
   .thumbnail {
     margin: 1rem;
@@ -12,8 +14,7 @@
 
 .pages {
   overflow: scroll;
-  height: 100vh;
-
+  width: 100%;
   .page {
     img {
       width: 100%;