From f2089302d5a114e267f93b35e4e886da559d221a Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Thu, 21 Apr 2022 07:52:41 +0200
Subject: [PATCH] Fix the horizontal misalignment bug in Firefox

---
 theatre/studio/src/UIRoot/UIRoot.tsx                |  2 +-
 .../studio/src/uiComponents/form/BasicSelect.tsx    | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/theatre/studio/src/UIRoot/UIRoot.tsx b/theatre/studio/src/UIRoot/UIRoot.tsx
index 3df8624..fa5cb86 100644
--- a/theatre/studio/src/UIRoot/UIRoot.tsx
+++ b/theatre/studio/src/UIRoot/UIRoot.tsx
@@ -15,8 +15,8 @@ import TooltipContext from '@theatre/studio/uiComponents/Popover/TooltipContext'
 
 const GlobalStyle = createGlobalStyle`
   :host {
-    contain: strict;
     all: initial;
+    contain: strict;
     color: white;
     font: 11px -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe Editor,
       HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif;
diff --git a/theatre/studio/src/uiComponents/form/BasicSelect.tsx b/theatre/studio/src/uiComponents/form/BasicSelect.tsx
index b799f54..dec6c5e 100644
--- a/theatre/studio/src/uiComponents/form/BasicSelect.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicSelect.tsx
@@ -21,6 +21,7 @@ const IconContainer = styled.div`
 `
 
 const Select = styled.select`
+  appearance: none;
   background-color: transparent;
   box-sizing: border-box;
   border: 1px solid transparent;
@@ -30,11 +31,17 @@ const Select = styled.select`
   outline: none;
   text-align: left;
   width: 100%;
-  height: calc(100% - 4px);
   border-radius: 2px;
+  /*
+  looks like putting percentages in the height of a select box doesn't work in Firefox. Not sure why.
+  So we're hard-coding the height to 26px, unlike all other inputs that use a relative height.
+  */
+  height: 26px /* calc(100% - 4px); */;
 
-  color-adjust: exact;
-  appearance: none;
+  @supports (-moz-appearance: none) {
+    /* Ugly hack to remove the extra left padding that shows up only in Firefox */
+    text-indent: -2px;
+  }
 
   &:hover,
   &:focus {