refactor: remaining sections stylings

components/smart/AceEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="show-if-initialized" :class="{ initialized }">
-    <div v-if="lang == 'json'" class="outline">
+    <div v-if="lang == 'json'" class="outline hide-scrollbar">
       <div v-for="(p, index) in currPath" :key="index" class="block">
         <div class="label" @click="onBlockClick(index)">
           {{ p }}
@@ -258,7 +258,7 @@ export default {
 
 .outline {
   @apply flex flex-nowrap;
-  @apply w-full;
+  @apply flex-1;
   @apply overflow-auto;
   @apply font-mono;
   @apply shadow-lg;

components/smart/Toggle.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="inline-block cursor-pointer" @click="$emit('change')">
+  <div class="inline-flex cursor-pointer flex-nowrap" @click="$emit('change')">
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
-    <label class="pl-0 align-middle cursor-pointer">
+    <label
+      class="pl-0 align-middle font-semibold truncate text-xs cursor-pointer"
+    >
       <slot></slot>
     </label>
   </div>