refactor(ui): better tabs

pages/documentation.vue

@@ -1,7 +1,7 @@
 <template>
-  <Splitpanes :dbl-click-splitter="false" vertical>
+  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes :dbl-click-splitter="false" horizontal>
+      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="import">
             <div class="flex p-4 items-start justify-between">

pages/graphql.vue

@@ -1,8 +1,12 @@
 <template>
   <div>
-    <Splitpanes :dbl-click-splitter="false" vertical>
+    <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
       <Pane class="hide-scrollbar !overflow-auto">
-        <Splitpanes :dbl-click-splitter="false" horizontal>
+        <Splitpanes
+          class="smart-splitter"
+          :dbl-click-splitter="false"
+          horizontal
+        >
           <Pane class="hide-scrollbar !overflow-auto">
             <GraphqlRequest :conn="gqlConn" />
             <GraphqlRequestOptions :conn="gqlConn" />

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <Splitpanes :dbl-click-splitter="false" vertical>
+  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes :dbl-click-splitter="false" horizontal>
+      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
           <HttpRequest />
           <SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">

pages/realtime.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartTabs
     class="h-full overflow-hidden"
-    styles="sticky top-0 z-10 !overflow-visible"
+    styles="sticky top-0 z-10 border-b border-dividerLight !overflow-visible"
   >
     <SmartTab
       id="websocket"