diff --git a/app/components/breadcrumb/index.hbs b/app/components/breadcrumb/index.hbs
index aa761e273e1db7e7db5e61c3b182d9475ed8015f..01467088e015ae8d142d2ad15cd1321ee2220eb6 100644
--- a/app/components/breadcrumb/index.hbs
+++ b/app/components/breadcrumb/index.hbs
@@ -1,4 +1,4 @@
-<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">
diff --git a/app/components/nav/topbar.hbs b/app/components/nav/topbar.hbs
index 299cb942e4f5168cab1a30ade6b9b7c74193aec0..72a3ce0521adde3b2da15d52cddbf16440c147fa 100644
--- a/app/components/nav/topbar.hbs
+++ b/app/components/nav/topbar.hbs
@@ -1,4 +1,4 @@
-<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>
diff --git a/app/components/viewer/index.hbs b/app/components/viewer/index.hbs
index 97a21d6bfe7729d8eec8a0812637851cbd647d4d..030d77dbcb2c3107f9df4ff9469a708ae2f7ee42 100644
--- a/app/components/viewer/index.hbs
+++ b/app/components/viewer/index.hbs
@@ -1,5 +1,5 @@
 <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}} />
 
diff --git a/app/components/viewer/pages.hbs b/app/components/viewer/pages.hbs
index dca9a5187d9804da32af31c96ca38b6a038001c1..3d1fee973e5feea507180e13adcb466dc1479741 100644
--- a/app/components/viewer/pages.hbs
+++ b/app/components/viewer/pages.hbs
@@ -1,7 +1,9 @@
-<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>
diff --git a/app/components/viewer/thumbnails.hbs b/app/components/viewer/thumbnails.hbs
index 7c0a4b83e1c28f6d6470e1cd2c397f893436104a..c3e5aa9929f8adf4f259a463bfe8704b24a85d09 100644
--- a/app/components/viewer/thumbnails.hbs
+++ b/app/components/viewer/thumbnails.hbs
@@ -1,7 +1,9 @@
-<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>
diff --git a/app/modifiers/adjust_element_height.js b/app/modifiers/adjust_element_height.js
new file mode 100644
index 0000000000000000000000000000000000000000..18975f93bbbf5ff8181e2018c9e4363b3e6bdd7d
--- /dev/null
+++ b/app/modifiers/adjust_element_height.js
@@ -0,0 +1,90 @@
+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
diff --git a/app/styles/document_version.scss b/app/styles/document_version.scss
index dd37d4bb002317831766c0348651fa3d42be1373..b5f46904320d6419a32ec45f2c23fa214e18aa33 100644
--- a/app/styles/document_version.scss
+++ b/app/styles/document_version.scss
@@ -1,6 +1,8 @@
 
 .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%;