diff --git a/entries/static/entries/css/entries.css b/entries/static/entries/css/entries.css
index 94d3042006f76e734c60b6f7a224f97ebb09fbf5..333dc712a594d1e64116c758291c252a81ea3d0a 100644
--- a/entries/static/entries/css/entries.css
+++ b/entries/static/entries/css/entries.css
@@ -10,6 +10,10 @@ tr.entry {
     background: white !important;
 }
 
+.dataTables_processing {
+    z-index: 10000;
+}
+
 #entries-table_info {
     background-color: #dee1e4;
     padding-top: 0px;
diff --git a/entries/static/entries/js/components/LexicalUnitEdit.js b/entries/static/entries/js/components/LexicalUnitEdit.js
index 119325dcbaddffff8fee24f56826ba285c064842..34f6b2deeba259a4682d84ec44093e9db812b7e5 100644
--- a/entries/static/entries/js/components/LexicalUnitEdit.js
+++ b/entries/static/entries/js/components/LexicalUnitEdit.js
@@ -1182,7 +1182,7 @@ Object.assign(LexicalUnitEdit, {
                 @schemata-selected="schemataSelected"
               />
       </div>
-      <div v-if="right_pane_tab === 'frame_preview'" class="overflow-hidden h-100" >
+      <div v-if="right_pane_tab === 'frame_preview'" class="overflow-hidden" style="height: calc(100% - 43px)">
         <frame-preview 
             :key="currentPreviewedUnifiedFrameId" 
             :initialUnifiedFrameId="currentPreviewedUnifiedFrameId" 
diff --git a/entries/static/entries/js/components/UnificationSwitchableList.js b/entries/static/entries/js/components/UnificationSwitchableList.js
index 31095fcfab2a071f952a16d796eea0186f805170..e044e9e700775f9770b2a3c1410750cbb71dc666 100644
--- a/entries/static/entries/js/components/UnificationSwitchableList.js
+++ b/entries/static/entries/js/components/UnificationSwitchableList.js
@@ -25,14 +25,14 @@ export default {
   },
   components: {UnificationEntriesList, UnificationEntriesForFramesList, UnificationFramesList},
   template: `
-    <label class="float-left mt-2"><input type="checkbox" v-model="isFrameView" /> {{ gettext('RAMY') }}</label>
-    <div v-if="!isFrameView"><unification-entries-for-frames-list 
+    <label class="mt-2 position-absolute" style="z-index: 2"><input type="checkbox" v-model="isFrameView" /> {{ gettext('RAMY') }}</label>
+    <div v-if="!isFrameView" class="h-100"><unification-entries-for-frames-list 
       :unificationEntriesListRefreshKey="unificationEntriesListRefreshKey" 
       :initialLexicalUnitId="initialLexicalUnitId" 
       :initialEntryId="initialEntryId" 
       @unified-frame-selected="unifiedFrameSelected" 
     /></div>
-    <div v-else><unification-frames-list 
+    <div v-else class="h-100"><unification-frames-list 
       :unificationEntriesListRefreshKey="unificationEntriesListRefreshKey" 
       @unified-frame-selected="unifiedFrameSelected" 
     /></div>
diff --git a/entries/static/entries/js/entries.js b/entries/static/entries/js/entries.js
index 43d1626bfbe718753655721164cb062eee147f81..05f31b5944955b960ebe076398f1acf832b7d138 100644
--- a/entries/static/entries/js/entries.js
+++ b/entries/static/entries/js/entries.js
@@ -946,9 +946,13 @@ function setup_datatable(options) {
         destroy: true,
         //paging: false,
         // load on scroll, requires paging set to true (default)
-        scroller: true,
+        scroller: {
+            rowHeight: 27.38,
+            displayBuffer: 30,
+        },
         paging: true,
-        scrollY: $(options.element).closest('#entries-list-div').height(),
+        scrollY: 100,
+        scrollResize: true,
         serverSide: true,
         ajax: {
             url: options.url,
@@ -1026,8 +1030,6 @@ function setup_datatable(options) {
 
     curr_entry = null;
 
-    window.adjust_heights();
-
     return datatable;
 }
 
@@ -1063,17 +1065,6 @@ function clear_entry() {
     $('#unmatched-no-examples').hide();
 }
 
-function adjust_heights() {
-    // TODO using css() here makes the table info disappear, strange!!!
-    $('.dataTables_wrapper').each(function () {
-        const $wrapper = $(this);
-        $wrapper.closest('#entries-list-div').attr('style', 'max-height: ' + ($wrapper.closest('#entries-list').height()) + 'px;');
-        // $('#entryTabsContent').css('max-height', ($('#entry-display').height() - $('#entryTabs').outerHeight()) + 'px');
-        var h = $wrapper.closest('#entries-list').height() - $('.dataTables_filter', $wrapper).outerHeight() - $('.dataTables_scrollHead', $wrapper).outerHeight() - $('.dataTables_info', $wrapper).outerHeight();
-        $('.dataTables_scrollBody').height(h).css('max-height', h);
-    });
-}
-
 function initialize_entries_list() {
     
     $('#entries-table').DataTable({
@@ -1118,9 +1109,6 @@ function getRoleAttributes() {
 }
 
 $(document).ready(function() {
-    $(window).resize(adjust_heights);
-    setInterval(adjust_heights, 1000);
-    
     bind_last_visited();
     
     bind_settings();
diff --git a/entries/templates/entries_base.html b/entries/templates/entries_base.html
index 5642574bbb0b115616bbbe7664735dcd0d4d020e..25996851a9006507414ce8e3ad617ff48cdc2649 100644
--- a/entries/templates/entries_base.html
+++ b/entries/templates/entries_base.html
@@ -20,6 +20,7 @@
     <script src="https://unpkg.com/split.js/dist/split.min.js"></script>
     <!-- https://datatables.net/ -->
     <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.12.1/sc-2.0.3/datatables.min.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.12.1/features/scrollResize/dataTables.scrollResize.min.js"></script>
     <script src="{% static 'common/js/csrf.js' %}"></script>
     <!--script src="{% static 'entries/js/panels.js' %}"></script-->
     <script src="{% static 'entries/js/forms.js' %}"></script>