diff --git a/entries/static/entries/js/components/Entries.js b/entries/static/entries/js/components/Entries.js
index bc99261cdc6e1f230a9fe6f7f6047888a652649d..8635a0cbe4549deba12afb6b1071df481f3f0483 100644
--- a/entries/static/entries/js/components/Entries.js
+++ b/entries/static/entries/js/components/Entries.js
@@ -31,6 +31,7 @@ export default {
     $('#entries-list').length && Split(['#entries-list', '#entry-display'], {
       sizes: [20, 80],
       gutterSize: 4,
+      minSize: 10,
       elementStyle: (dimension, size, gutterSize) => {
         return {
           'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
@@ -41,6 +42,7 @@ export default {
       direction: 'vertical',
       sizes: [75, 25],
       gutterSize: 4,
+      minSize: 10,
     });
   },
   template: `
diff --git a/entries/static/entries/js/components/LexicalUnitDisplay.js b/entries/static/entries/js/components/LexicalUnitDisplay.js
index 7aae57fade10b4d0e48cdf6d1bc05c56aaed671d..02c1805dc8d6a4d416d8155657e9ef352b73af2a 100644
--- a/entries/static/entries/js/components/LexicalUnitDisplay.js
+++ b/entries/static/entries/js/components/LexicalUnitDisplay.js
@@ -95,6 +95,7 @@ export default {
     Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
       sizes: [40, 60],
       gutterSize: 4,
+      minSize: 10,
       elementStyle: (dimension, size, gutterSize) => {
         return {
           'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
diff --git a/entries/static/entries/js/components/LexicalUnitEdit.js b/entries/static/entries/js/components/LexicalUnitEdit.js
index f0442eebb674aa05540eacb9eb7f625513d6a5f4..2c8c64cbff65e136611776702847851fbcc61122 100644
--- a/entries/static/entries/js/components/LexicalUnitEdit.js
+++ b/entries/static/entries/js/components/LexicalUnitEdit.js
@@ -28,7 +28,7 @@ const FramePreview = {
   mounted () {
     Split(['#frame-preview-left-pane', '#frame-preview-right-pane'], {
       sizes: [60, 40],
-      minSize: 100,
+      minSize: 10,
       gutterSize: 4,
       elementStyle: (dimension, size, gutterSize) => {
         return {
@@ -816,13 +816,16 @@ Object.assign(LexicalUnitEdit, {
     changeShowVerifiedFrames (val) {
       this.showVerifiedFrames = val;
     },
+    getArgumentCSS(argument) {
+      return (argument.role ? argument.role.str + ' ' : '') + (argument == this.active_unified_frame_argument ? 'active' : '');
+    }
   },
   mounted() {
     this.changeStatusButtonTitleToDefault();
     if(!this.readOnly) {
       Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
         sizes: [40, 60],
-        minSize: 400,
+        minSize: 10,
         gutterSize: 4,
         elementStyle: (dimension, size, gutterSize) => {
           return {
@@ -834,6 +837,7 @@ Object.assign(LexicalUnitEdit, {
         sizes: [40, 40, 20],
         direction: 'vertical',
         gutterSize: 4,
+        minSize: 10,
       });
     }
     if(this.unifiedFrameId) {
@@ -864,15 +868,15 @@ Object.assign(LexicalUnitEdit, {
       <div align="center">
         <div align="left" style="display: table;">
           <div class="unifiedFrame mt-3" v-bind:data-frame_id="unified_frame.id" id="lexical-unit" v-html="unified_frame_title"></div>
-          <table v-if="unified_frame.id" id="unified-frame" class="m-0 table-borderless border border-secondary text-dark">
+          <table v-if="unified_frame.id" id="unified-frame" class="m-0 table-borderless border border-secondary text-dark frame active">
           <tbody>
             <tr>
               <th scope="row" class="py-2 px-1 text-secondary role-header">Role</th>
+              
+              <template v-for="argument in unified_frame_arguments">
               <td
                 class="argument py-2 px-1 border-top border-left border-secondary role-column"
-                :class="argument == active_unified_frame_argument && 'active'"
-                v-for="argument in unified_frame_arguments"
-                :key="argument.id"
+                    :class="getArgumentCSS(argument)"
                 @click="unifiedFrameArgumentSelected(argument)"
                 @mouseover="unifiedFrameArgumentHovered(argument)"
                 @mouseleave="unifiedFrameArgumentHovered(null)"
@@ -892,6 +896,9 @@ Object.assign(LexicalUnitEdit, {
                   </ul>
                 </div>
               </td>
+              </template>
+              
+              
             </tr>
             <tr>
               <th scope="row" class="py-0 px-1 text-secondary role-header">Selectional preferences</th>
diff --git a/entries/static/entries/js/components/UnificationComponent.js b/entries/static/entries/js/components/UnificationComponent.js
index 79291be97c711867caa72bf2a9fe35fc1229a4e9..5a808084643df85eab672120fb06b095310a8df1 100644
--- a/entries/static/entries/js/components/UnificationComponent.js
+++ b/entries/static/entries/js/components/UnificationComponent.js
@@ -42,6 +42,7 @@ export default {
     $('#entries-list').length && Split(['#entries-list', '#entry-display'], {
       sizes: [20, 80],
       gutterSize: 4,
+      minSize: 10,
       elementStyle: (dimension, size, gutterSize) => {
         return {
           'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'