An attempt to fix splits in the refactored display view

entries/static/entries/js/components/LexicalUnitDisplay.js

@@ -96,12 +96,10 @@ export default {
       direction: 'vertical',
       sizes: [75, 25],
       gutterSize: 4,
-      minSize: 10
     });
     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)'
@@ -111,68 +109,72 @@ export default {
     this.setup();
   },
   template: `
-    <div class="col w-100 p-0 h-100 overflow-auto" id="main-frames-pane" >
-      <div class="col h-100 px-1 pt-0 pb-2 overflow-auto" id="semantics-frames-pane">
-        <spinner />
-<!--        <div id="semantics-frames"></div>-->
-        <div id="vue-semantics-frames" v-if="frame">
-               <slowal-frame-component :frame="frame" :key="frame"/>
-        </div>
-
-        <div class="text-center mb-3">
-          <div>
-            <a class="btn btn-sm btn-outline-dark mr-2" v-if="frame?.status === 'N'" @click="isLeksykograf() ? markAsInvalid() : markAsBad()">{{ !isLeksykograf() ? gettext('Zła') : gettext('Błędna') }}</a>
-            <a class="btn btn-sm btn-outline-dark mr-2" v-if="isReadyToGet() && unifiedFrame === null" @click="take">{{ gettext('Pobierz') }}</a>
-            <a
-              class="btn btn-sm btn-outline-dark mr-2"
-              v-if="isReadyToProcess()"
-              @click="goToEdit(this.unifiedFrame.pk, this.entryId, this.lexicalUnitId)"
-            >
-              {{ isLeksykograf() ? gettext('Obrabiaj') : gettext('Sprawdź') }}
-            </a>
-            <a
-              class="btn btn-sm btn-outline-dark mr-2"
-              v-if="frame?.status === 'S' && unifiedFrame?.status === 'S'"
-              @click="goToEdit(this.unifiedFrame.pk)"
-            >
-              {{ gettext('Obejrzyj') }}
-            </a>
-            <a
-              class="btn btn-sm btn-outline-dark mr-2"
-              v-if="(frame?.status === 'B' || frame?.status === 'C') && hasPermission('semantics.manage_invalid_lexical_units')"
-              @click="frame?.status === 'C' ? frame_confirm_as_not_matching_unified_frame() : confirmInvalid()"
-            >
-              {{ gettext('Potwierdź') }}
-            </a>
-            <a
-              class="btn btn-sm btn-outline-dark mr-2"
-              v-if="(frame?.status === 'B' || frame?.status === 'C') && hasPermission('semantics.manage_invalid_lexical_units')"
-              @click="frame?.status === 'C' ? frame_reject_as_not_matching_unified_frame() : rejectInvalid()"
-            >
-              {{ gettext('Odrzuć') }}
-            </a>
+    <div class="col p-0 overflow-hidden" style="height: 800px">
+      <div id="main-frames-pane" class="row">
+        <div class="col h-100 pl-3 pr-1 pt-0 pb-2 overflow-auto" id="semantics-frames-pane">
+            <spinner />
+      
+            <div id="vue-semantics-frames" v-if="frame">
+             <slowal-frame-component :frame="frame" :key="frame"/>
+            </div>
+      
+            <div class="text-center mb-3">
+              <div>
+                <a class="btn btn-sm btn-outline-dark mr-2" v-if="frame?.status === 'N'" @click="isLeksykograf() ? markAsInvalid() : markAsBad()">{{ !isLeksykograf() ? gettext('Zła') : gettext('Błędna') }}</a>
+                <a class="btn btn-sm btn-outline-dark mr-2" v-if="isReadyToGet() && unifiedFrame === null" @click="take">{{ gettext('Pobierz') }}</a>
+                <a
+                  class="btn btn-sm btn-outline-dark mr-2"
+                  v-if="isReadyToProcess()"
+                  @click="goToEdit(this.unifiedFrame.pk, this.entryId, this.lexicalUnitId)"
+                >
+                  {{ isLeksykograf() ? gettext('Obrabiaj') : gettext('Sprawdź') }}
+                </a>
+                <a
+                  class="btn btn-sm btn-outline-dark mr-2"
+                  v-if="frame?.status === 'S' && unifiedFrame?.status === 'S'"
+                  @click="goToEdit(this.unifiedFrame.pk)"
+                >
+                  {{ gettext('Obejrzyj') }}
+                </a>
+                <a
+                  class="btn btn-sm btn-outline-dark mr-2"
+                  v-if="(frame?.status === 'B' || frame?.status === 'C') && hasPermission('semantics.manage_invalid_lexical_units')"
+                  @click="frame?.status === 'C' ? frame_confirm_as_not_matching_unified_frame() : confirmInvalid()"
+                >
+                  {{ gettext('Potwierdź') }}
+                </a>
+                <a
+                  class="btn btn-sm btn-outline-dark mr-2"
+                  v-if="(frame?.status === 'B' || frame?.status === 'C') && hasPermission('semantics.manage_invalid_lexical_units')"
+                  @click="frame?.status === 'C' ? frame_reject_as_not_matching_unified_frame() : rejectInvalid()"
+                >
+                  {{ gettext('Odrzuć') }}
+                </a>
+              </div>
+      <!--        <span v-if="unifiedFrame === null">{{ gettext('Brak ramy unifikacyjnej') }}</span>-->
+            </div>
+            <div id="lexical-unit-notes"></div>
           </div>
-  <!--        <span v-if="unifiedFrame === null">{{ gettext('Brak ramy unifikacyjnej') }}</span>-->
+        <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">
+  <!--      <semantics-schemata-component -->
+  <!--        :subentries="subentries"-->
+  <!--        :key="subentries"-->
+  <!--        :frame="frame"-->
+  <!--        :alternations="alternations"-->
+  <!--        :realisation_phrases="realisation_phrases"-->
+  <!--        :realisation_descriptions="realisation_descriptions"-->
+  <!--      />-->
+          <div id="semantics-schemata"></div>
+        </div>
+      </div>
+      <div id="vue-examples" class="row overflow-auto">
+        <div class="col w-100 pr-4">
+          <examples-component
+              :examples="examples" 
+              :key="examples"
+          />
         </div>
-        <div id="lexical-unit-notes"></div>
       </div>
-      <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">
-<!--      <semantics-schemata-component -->
-<!--        :subentries="subentries"-->
-<!--        :key="subentries"-->
-<!--        :frame="frame"-->
-<!--        :alternations="alternations"-->
-<!--        :realisation_phrases="realisation_phrases"-->
-<!--        :realisation_descriptions="realisation_descriptions"-->
-<!--      />-->
-      <div id="semantics-schemata"></div>
-    </div>
     </div>
-    <div class="col w-100 p-0 tab-pane overflow-auto" id="vue-examples">
-        <examples-component
-            :examples="examples" 
-            :key="examples"
-        />
-     </div>
   `
 }