fix mesh material editor with inputs

packages/client-core/i18n/en/editor.json

@@ -115,7 +115,7 @@
       "lbl-toggleTransformSpace": "[Z] Toggle Transform Space"
     },
     "transformPivot": {
-      "toggleTransformPivot" : "[X] Toggle Transform Pivot",
+      "toggleTransformPivot": "[X] Toggle Transform Pivot",
       "lbl-selection": "Selection",
       "info-selection": "The center pivot of the final asset you selected in the sequence.",
       "lbl-center": "Center",
@@ -150,15 +150,15 @@
       "users": "Users",
       "user": "User"
     },
-    "render-settings":{
+    "render-settings": {
       "lbl": "Render Settings",
       "info": "How you view materials in the Engine",
-      "lbl-usePostProcessing":"Use Post Processing",
-      "info-usePostProcessing":"Enables post processing",
-      "lbl-shadowMapResolution":"Shadow Map Resolution",
-      "info-shadowMapResolution":"Set shadowmap resolution",
-      "lbl-renderMode":"Render Mode",
-      "info-renderMode":"Choose render mode"
+      "lbl-usePostProcessing": "Use Post Processing",
+      "info-usePostProcessing": "Enables post processing",
+      "lbl-shadowMapResolution": "Shadow Map Resolution",
+      "info-shadowMapResolution": "Set shadowmap resolution",
+      "lbl-renderMode": "Render Mode",
+      "info-renderMode": "Choose render mode"
     },
     "grid": {
       "info-toggleGridVisibility": "Toggle Grid Visibility",
@@ -181,10 +181,6 @@
       "info": "Takes a screenshot of your scene at the current view."
     }
   },
-  "materialProperties": {
-    "title": "Material",
-    "info": "Access and edit detailed information about materials in the scene."
-  },
   "properties": {
     "title": "Properties",
     "info": "Propeties let you access and edit detailed information about objects in the scene.",
@@ -247,7 +243,21 @@
       "name": "Mesh",
       "description": "A mesh is a collection of vertices, edges, and faces that describe the shape of a 3D object.",
       "geometryEditor": "Geometry Editor",
-      "materialEditor": "Material Editor"
+      "materialEditor": "Material Editor",
+      "material": {
+        "name": "Name",
+        "source": "Source",
+        "type": "Type:",
+        "path": "Path:",
+        "prototype": "Prototype",
+        "loading": "Loading...",
+        "addPlugin": "Add Plugin",
+        "plugin": "Plugin"
+      },
+      "materialProperties": {
+        "title": "Material",
+        "info": "Access and edit detailed information about materials in the scene."
+      }
     },
     "audio": {
       "name": "Positional Audio",
@@ -339,7 +349,7 @@
     "map": {
       "description": "3D geospatial map of e.g. a city."
     },
-    "shadow":{
+    "shadow": {
       "name": "Shadows",
       "description": "Shadow properties for the model",
       "lbl-castShadow": "Cast Shadow",
@@ -506,11 +516,11 @@
       "transparent": "Transparent",
       "world-space": "Use World Space",
       "burst": {
-        "time":"Burst Time",
-        "count":"Burst Count",
-        "cycle":"Burst Cycle",
-        "interval":"Burst Interval",
-        "probability":"Burst Probability"
+        "time": "Burst Time",
+        "count": "Burst Count",
+        "cycle": "Burst Cycle",
+        "interval": "Burst Interval",
+        "probability": "Burst Probability"
       }
     },
     "clouds": {
@@ -584,7 +594,7 @@
       "lbl-reload": "Restage",
       "lbl-options": "Options",
       "samplingMode": "Sampling Mode",
-      "sampling": { 
+      "sampling": {
         "properties": "Sampling Properties",
         "heightMap": "Height Map",
         "heightMapStrength": "Height Map Strength",
@@ -772,20 +782,20 @@
       "lbl-args": "Args",
       "error-url": "Error Loading Script From URL"
     },
-    "primitiveGeometry":{
+    "primitiveGeometry": {
       "name": "Primitive Geometry",
-      "description":"3D models of Basic Geometry shapes",
+      "description": "3D models of Basic Geometry shapes",
       "lbl-geometryType": "Geometry Type",
       "lbl-box": "Box",
-      "lbl-sphere":"Sphere",
-      "lbl-cylinder":"Cylinder",
-      "lbl-capsule":"Capsule",
-      "lbl-plane":"Plane",
-      "lbl-circle":"Circle",
-      "lbl-ring":"Ring",
-      "lbl-torus":"Torus",
-      "lbl-polyhedron":"Polyhedron",
-      "lbl-torusknot":"Torus Knot"
+      "lbl-sphere": "Sphere",
+      "lbl-cylinder": "Cylinder",
+      "lbl-capsule": "Capsule",
+      "lbl-plane": "Plane",
+      "lbl-circle": "Circle",
+      "lbl-ring": "Ring",
+      "lbl-torus": "Torus",
+      "lbl-polyhedron": "Polyhedron",
+      "lbl-torusknot": "Torus Knot"
     },
     "portal": {
       "lbl-portal": "Linked Portal",
@@ -881,9 +891,9 @@
         "spline-track": "Creates a spline track.",
         "spline": "Create and customize curves.",
         "envmap": "Add environment map to your scene",
-        "postprocessing":"Add postprocessing effects to your scene",
-        "primitive-geometry":"Add basic Geometry to the scene",
-        "link":"Add clickable Link to entity to route to different webpage",
+        "postprocessing": "Add postprocessing effects to your scene",
+        "primitive-geometry": "Add basic Geometry to the scene",
+        "link": "Add clickable Link to entity to route to different webpage",
         "dynamic-load": "Load entities dynamically"
       }
     },

packages/editor/src/components/inputs/ImagePreviewInput.tsx

@@ -32,7 +32,6 @@ import InputGroup from './InputGroup'
 import { StringInputProps } from './StringInput'
 
 const imageContainerStyle = {
-  display: 'flex',
   width: '100%',
   borderRadius: '4px',
   border: 'solid',