Add resizable functionality to panels and update styles

Author: tacxou

src/assets/sass/global.sass

@@ -30,3 +30,15 @@ body.body--dark
 .sesame-table-td-highlight
   color: $primary
   font-weight: bold
+
+
+.outer-ne-resize
+  resize: vertical
+  overflow: auto
+
+
+.inner-ne-resize,
+.outer-ne-resize
+  transform: rotateX(180deg)
+  height: 100%
+  width: 100%

src/components/2pan/index.vue

@@ -98,9 +98,10 @@ q-splitter(
             slot(name="right-panel-content-before")
             slot(name="right-panel-content-after")
         q-expansion-item.bg-blue-grey-10(v-if='debug' label='Debug' icon='mdi-bug' dark dense)
-          q-card.overflow-auto.bg-blue-grey-8.text-white(:style='{maxHeight: "250px", height: "250px"}')
-            q-card-section.q-pa-xs
-              pre.q-ma-none(v-html='JSON.stringify(target, null, 2)')
+          .outer-ne-resize(:style='{minHeight: "250px", height: "250px"}')
+            q-card.overflow-auto.bg-blue-grey-8.text-white.inner-ne-resize
+              q-card-section.q-pa-xs
+                pre.q-ma-none(v-html='JSON.stringify(target, null, 2)')
 </template>
 
 <script lang="ts" setup>
@@ -396,3 +397,6 @@ onMounted(async () => {
   }
 })
 </script>
+
+<style>
+</style>