fix: make UI consistent across browsers (#120)

tested on Chrome, Firefox Dev Edition, Firefox, and Safari

Author: ydcjeff

.gitignore

@@ -5,3 +5,4 @@ dist-ssr
 *.local
 __pycache__
 *.log
+.vscode

src/components/FormSelect.vue

@@ -76,6 +76,8 @@ function toTitleCase(v) {
   position: relative;
 }
 .selector select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
   appearance: none;
   background: var(--c-white-light);
   border-radius: 3px;
@@ -85,13 +87,14 @@ function toTitleCase(v) {
   font-size: var(--font-size);
   padding: 0.5rem 1rem;
   text-align: center;
+  text-align-last: center;
   width: 100%;
 }
 .selector::after {
   content: '';
   position: absolute;
   right: 1rem;
-  bottom: 16px;
+  bottom: 15px;
   border-top: 6px solid var(--c-brand-red);
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;

src/components/Instruction.vue

@@ -26,6 +26,7 @@
   margin: 25% auto;
   text-align: center;
   color: #a1a1aa;
+  text-transform: capitalize;
 }
 .iconify {
   vertical-align: middle;

src/components/PaneLeft.vue

@@ -49,6 +49,9 @@ export default {
   scrollbar-width: none;
   border-bottom: 1px solid var(--c-white-dark);
 }
+.left-pane-tabs::-webkit-scrollbar {
+  display: none;
+}
 .left-pane-tabs,
 .left-pane-contexts {
   padding-left: 1.5rem;

src/components/PaneRight.vue

@@ -76,6 +76,9 @@ export default {
   scrollbar-width: none;
   border-bottom: 1px solid var(--c-white-dark);
 }
+.right-pane-tabs::-webkit-scrollbar {
+  display: none;
+}
 .right-pane-tabs,
 .right-pane-contexts {
   padding-right: 1.5rem;

src/components/PaneSplit.vue

@@ -47,7 +47,7 @@
 import { ref } from 'vue'
 export default {
   setup() {
-    const width = ref(45)
+    const width = ref(50)
     const isDragging = ref(false)
     const clicked = ref(false)
     const container = ref()