variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix the horizontal misalignment bug in Firefox

Browse source
This commit is contained in:
Aria Minaei 2022-04-21 07:52:41 +02:00
parent 9f46a0b78f
commit f2089302d5
2 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
theatre/studio/src/UIRoot/UIRoot.tsx
View file

@ -15,8 +15,8 @@ import TooltipContext from '@theatre/studio/uiComponents/Popover/TooltipContext'
const GlobalStyle = createGlobalStyle` const GlobalStyle = createGlobalStyle`
:host { :host {
contain: strict;
all: initial; all: initial;
contain: strict;
color: white; color: white;
font: 11px -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe Editor, font: 11px -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe Editor,
HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif; HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif;

13
theatre/studio/src/uiComponents/form/BasicSelect.tsx
View file

@ -21,6 +21,7 @@ const IconContainer = styled.div`
` `
const Select = styled.select` const Select = styled.select`
appearance: none;
background-color: transparent; background-color: transparent;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid transparent; border: 1px solid transparent;
@ -30,11 +31,17 @@ const Select = styled.select`
outline: none; outline: none;
text-align: left; text-align: left;
width: 100%; width: 100%;
height: calc(100% - 4px);
border-radius: 2px; 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; @supports (-moz-appearance: none) {
appearance: none; /* Ugly hack to remove the extra left padding that shows up only in Firefox */
text-indent: -2px;
}
&:hover, &:hover,
&:focus { &:focus {