Use fields without margins when displayed in InlinePopover

newIDE/app/src/EventsSheet/InlinePopover.js

@@ -34,9 +34,7 @@ export default class InlinePopover extends Component {
         >
           <Background>
             <Column expand>
-              <Line>
+              <Line>{this.props.children}</Line>
-                {this.props.children}
-              </Line>
             </Column>
           </Background>
         </Popper>

newIDE/app/src/EventsSheet/ParameterFields/AudioResourceField.js

@@ -31,6 +31,7 @@ export default class AudioResourceField extends Component<
 
     return (
       <ResourceSelector
+        margin={this.props.isInline ? 'none' : 'dense'}
         project={this.props.project}
         resourceSources={this.props.resourceSources}
         onChooseResource={this.props.onChooseResource}

newIDE/app/src/EventsSheet/ParameterFields/BehaviorField.js

@@ -127,6 +127,7 @@ export default class BehaviorField extends React.Component<
 
     return (
       <SemiControlledAutoComplete
+        margin={this.props.isInline ? 'none' : 'dense'}
         floatingLabelText={this._description}
         fullWidth
         errorText={

newIDE/app/src/EventsSheet/ParameterFields/DefaultField.js

@@ -21,6 +21,7 @@ export default class DefaultField extends React.Component<
 
     return (
       <SemiControlledTextField
+        margin={this.props.isInline ? 'none' : 'dense'}
         commitOnBlur
         value={this.props.value}
         floatingLabelText={description}

newIDE/app/src/EventsSheet/ParameterFields/ExternalEventsField.js

@@ -48,6 +48,7 @@ export default class ExternalEventsField extends React.Component<
 
     return (
       <SemiControlledAutoComplete
+        margin={this.props.isInline ? 'none' : 'dense'}
         floatingLabelText={
           parameterMetadata ? parameterMetadata.getDescription() : undefined
         }

newIDE/app/src/EventsSheet/ParameterFields/GlobalVariableField.js

@@ -27,7 +27,7 @@ export default class GlobalVariableField extends React.Component<
     const { project, scope } = this.props;
 
     return (
-      <div>
+      <React.Fragment>
         <VariableField
           variablesContainer={project ? project.getVariables() : null}
           parameterMetadata={this.props.parameterMetadata}
@@ -56,7 +56,7 @@ export default class GlobalVariableField extends React.Component<
             }
           />
         )}
-      </div>
+      </React.Fragment>
     );
   }
 }

newIDE/app/src/EventsSheet/ParameterFields/JsonResourceField.js

@@ -31,6 +31,7 @@ export default class JsonResourceField extends Component<
 
     return (
       <ResourceSelector
+        margin={this.props.isInline ? 'none' : 'dense'}
         project={this.props.project}
         resourceSources={this.props.resourceSources}
         onChooseResource={this.props.onChooseResource}

newIDE/app/src/EventsSheet/ParameterFields/KeyField.js

@@ -109,6 +109,7 @@ export default class KeyField extends Component<ParameterFieldProps, {||}> {
 
     return (
       <SemiControlledAutoComplete
+        margin={this.props.isInline ? 'none' : 'dense'}
         floatingLabelText={
           parameterMetadata ? parameterMetadata.getDescription() : undefined
         }

newIDE/app/src/EventsSheet/ParameterFields/LayerField.js

@@ -23,6 +23,7 @@ export default class LayerField extends Component<ParameterFieldProps, {||}> {
 
     return (
       <SemiControlledAutoComplete
+        margin={this.props.isInline ? 'none' : 'dense'}
         floatingLabelText={
           parameterMetadata ? parameterMetadata.getDescription() : undefined
         }

newIDE/app/src/EventsSheet/ParameterFields/MouseField.js

@@ -16,6 +16,7 @@ export default class MouseField extends Component {
 
     return (
       <SelectField
+        margin={this.props.isInline ? 'none' : 'dense'}
         fullWidth
         floatingLabelText={description}
         value={value}

newIDE/app/src/EventsSheet/ParameterFields/ObjectField.js

@@ -34,6 +34,7 @@ export default class ObjectField extends React.Component<
   render() {
     return (
       <ObjectSelector
+        margin={this.props.isInline ? 'none' : 'dense'}
         project={this.props.project}
         value={this.props.value}
         onChange={this.props.onChange}

newIDE/app/src/EventsSheet/ParameterFields/ObjectVariableField.js

@@ -53,7 +53,7 @@ export default class ObjectVariableField extends React.Component<
     }
 
     return (
-      <div>
+      <React.Fragment>
         <VariableField
           variablesContainer={variablesContainer}
           parameterMetadata={this.props.parameterMetadata}
@@ -76,7 +76,7 @@ export default class ObjectVariableField extends React.Component<
             }}
           />
         )}
-      </div>
+      </React.Fragment>
     );
   }
 }

newIDE/app/src/EventsSheet/ParameterFields/OperatorField.js

@@ -21,6 +21,7 @@ export default class OperatorField extends Component<ParameterFieldProps> {
 
     return (
       <SelectField
+        margin={this.props.isInline ? 'none' : 'dense'}
         fullWidth
         floatingLabelText={description}
         value={this.props.value}

newIDE/app/src/EventsSheet/ParameterFields/RelationalOperatorField.js

@@ -21,6 +21,7 @@ export default class RelationalOperatorField extends Component<ParameterFieldPro
 
     return (
       <SelectField
+        margin={this.props.isInline ? 'none' : 'dense'}
         fullWidth
         floatingLabelText={description}
         value={this.props.value}

newIDE/app/src/EventsSheet/ParameterFields/SceneNameField.js

@@ -28,6 +28,7 @@ export default class SceneNameField extends Component<
 
     return (
       <SemiControlledAutoComplete
+        margin={this.props.isInline ? 'none' : 'dense'}
         floatingLabelText={
           parameterMetadata ? parameterMetadata.getDescription() : undefined
         }

newIDE/app/src/EventsSheet/ParameterFields/StringWithSelectorField.js

@@ -35,6 +35,7 @@ export default class StringWithSelectorField extends Component<
 
     return (
       <SemiControlledAutoComplete
+        margin={this.props.isInline ? 'none' : 'dense'}
         floatingLabelText={
           parameterMetadata ? parameterMetadata.getDescription() : undefined
         }

newIDE/app/src/EventsSheet/ParameterFields/VariableField.js

@@ -40,6 +40,7 @@ export default class VariableField extends Component<Props, {||}> {
       <TextFieldWithButtonLayout
         renderTextField={() => (
           <SemiControlledAutoComplete
+            margin={this.props.isInline ? 'none' : 'dense'}
             floatingLabelText={description}
             fullWidth
             value={value}

newIDE/app/src/EventsSheet/ParameterFields/VideoResourceField.js

@@ -31,6 +31,7 @@ export default class VideoResourceField extends Component<
 
     return (
       <ResourceSelector
+        margin={this.props.isInline ? 'none' : 'dense'}
         project={this.props.project}
         resourceSources={this.props.resourceSources}
         onChooseResource={this.props.onChooseResource}

newIDE/app/src/ObjectsList/ObjectSelector.js

@@ -24,6 +24,7 @@ type Props = {|
   floatingLabelText?: ?string,
   openOnFocus?: boolean,
   hintText?: ?React.Node,
+  margin?: 'none' | 'dense',
 |};
 
 const iconSize = 24;
@@ -94,6 +95,7 @@ export default class ObjectSelector extends React.Component<Props, {||}> {
       allowedObjectType,
       noGroups,
       errorTextIfInvalid,
+      margin,
       ...rest
     } = this.props;
 
@@ -111,6 +113,7 @@ export default class ObjectSelector extends React.Component<Props, {||}> {
 
     return (
       <SemiControlledAutoComplete
+        margin={margin}
         hintText={t`Choose an object`}
         value={value}
         onChange={onChange}

newIDE/app/src/UI/SelectField.js

@@ -27,7 +27,7 @@ type Props = {|
     flex?: 1,
     width?: 'auto',
   },
-  margin?: 'none',
+  margin?: 'none' | 'dense',
 
   floatingLabelText?: React.Node,