fix(ui): realtime pages

pages/documentation.vue

@@ -175,6 +175,7 @@
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
 import Mustache from "mustache"
 import { currentUser$ } from "~/helpers/fb/auth"
 import DocsTemplate from "~/assets/md/docs.md"

pages/graphql.vue

@@ -604,6 +604,7 @@
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
 import * as gql from "graphql"
 import { commonHeaders } from "~/helpers/headers"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"

pages/index.vue

@@ -83,7 +83,6 @@ import {
 } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
-
 import { map } from "rxjs/operators"
 import { useSetting } from "~/newstore/settings"
 import {

pages/realtime.vue

@@ -1,15 +1,23 @@
 <template>
-  <SmartTabs>
-    <SmartTab id="websocket" :label="$t('tab.websocket')" :selected="true">
+  <SmartTabs
+    class="h-full overflow-hidden"
+    styles="sticky top-0 z-10 !overflow-visible"
+  >
+    <SmartTab
+      id="websocket"
+      :label="$t('tab.websocket')"
+      :selected="true"
+      class="h-full"
+    >
       <RealtimeWebsocket />
     </SmartTab>
-    <SmartTab id="sse" :label="$t('sse')">
+    <SmartTab id="sse" :label="$t('sse')" class="h-full">
       <RealtimeSse />
     </SmartTab>
-    <SmartTab id="socketio" :label="$t('socketio')">
+    <SmartTab id="socketio" :label="$t('socketio')" class="h-full">
       <RealtimeSocketio />
     </SmartTab>
-    <SmartTab id="mqtt" :label="$t('tab.mqtt')">
+    <SmartTab id="mqtt" :label="$t('tab.mqtt')" class="h-full">
       <RealtimeMqtt />
     </SmartTab>
   </SmartTabs>