fix(ui): realtime pages

components/realtime/Sse.vue

@@ -1,42 +1,40 @@
 <template>
   <Splitpanes :dbl-click-splitter="false" horizontal>
     <Pane class="hide-scrollbar !overflow-auto">
-      <AppSection label="request">
-        <div class="bg-primary flex p-4 top-0 z-10 sticky">
-          <div class="flex-1 inline-flex">
-            <input
-              id="server"
-              v-model="server"
-              type="url"
-              :class="{ error: !serverValid }"
-              class="
-                bg-primaryLight
-                border border-divider
-                rounded-l
-                font-semibold font-mono
-                text-secondaryDark
-                w-full
-                py-2
-                px-4
-                transition
-                truncate
-                focus:outline-none focus:border-accent
-              "
-              :placeholder="$t('url')"
-              @keyup.enter="serverValid ? toggleSSEConnection() : null"
-            />
-            <ButtonPrimary
-              id="start"
-              :disabled="!serverValid"
-              name="start"
-              class="rounded-l-none w-22"
-              :label="!connectionSSEState ? $t('start') : $t('stop')"
-              :loading="connectingState"
-              @click.native="toggleSSEConnection"
-            />
-          </div>
+      <div class="bg-primary flex p-4 top-0 z-10 sticky">
+        <div class="flex-1 inline-flex">
+          <input
+            id="server"
+            v-model="server"
+            type="url"
+            :class="{ error: !serverValid }"
+            class="
+              bg-primaryLight
+              border border-divider
+              rounded-l
+              font-semibold font-mono
+              text-secondaryDark
+              w-full
+              py-2
+              px-4
+              transition
+              truncate
+              focus:border-accent focus:outline-none
+            "
+            :placeholder="$t('url')"
+            @keyup.enter="serverValid ? toggleSSEConnection() : null"
+          />
+          <ButtonPrimary
+            id="start"
+            :disabled="!serverValid"
+            name="start"
+            class="rounded-l-none w-22"
+            :label="!connectionSSEState ? $t('start') : $t('stop')"
+            :loading="connectingState"
+            @click.native="toggleSSEConnection"
+          />
         </div>
-      </AppSection>
+      </div>
     </Pane>
     <Pane class="hide-scrollbar !overflow-auto">
       <AppSection label="response">
@@ -53,6 +51,7 @@
 
 <script>
 import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import debounce from "~/helpers/utils/debounce"