fix: minor UI styling

components/smart/AutoComplete.vue

@@ -197,8 +197,7 @@ export default {
 <style scoped lang="scss">
 .autocomplete-wrapper {
   @apply relative;
-  @apply flex;
-  @apply flex-1;
+  @apply flex flex-1;
 
   input:focus + ul.suggestions,
   ul.suggestions:hover {

components/smart/Tabs.vue

@@ -78,11 +78,11 @@ export default {
   }
 
   .tab {
+    @apply relative;
     @apply flex;
     @apply items-center;
     @apply justify-center;
-    @apply px-4;
-    @apply py-3;
+    @apply px-4 py-3;
     @apply text-secondary;
     @apply font-semibold;
     @apply text-xs;
@@ -91,7 +91,6 @@ export default {
     @apply hover:text-secondaryDark;
     @apply focus:text-secondaryDark;
     @apply focus:outline-none;
-    @apply relative;
 
     .tab-info {
       @apply inline-flex;

components/smart/Toggle.vue

@@ -29,9 +29,9 @@ $activeColor: var(--accent-color);
 $inactiveColor: var(--divider-dark-color);
 $inactiveHandleColor: var(--primary-color);
 $activeHandleColor: var(--primary-color);
-$width: 32px;
-$height: 16px;
-$handleSpacing: 4px;
+$width: 2rem;
+$height: 1rem;
+$handleSpacing: 0.25rem;
 $transition: all 0.2s ease-in-out;
 
 .toggle {

components/smart/UrlField.vue

@@ -389,7 +389,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .VAR {
   @apply font-bold;
   @apply text-accent;
@@ -404,7 +404,6 @@ export default {
   @apply whitespace-nowrap;
   @apply overflow-x-auto;
   @apply resize-none;
-  @apply md:border-l;
 }
 
 .url-field::-webkit-scrollbar {