fix: let the list of enums break into multiple lines (#153)

If we have a lot of enum values, the layout is broken because the enums are displayed in a single line. This can't be solved using CSS only, as there is no space between the enum values that the browser can break at. We add a spaced and remove the margin instead.

Author: Fox32

library/src/containers/Schemas/SchemaProperties.tsx

@@ -15,9 +15,12 @@ const getEnumHTMLElements = (schema: SchemaWithKey): HTMLElement[] => {
   let enumElements: any[] = [];
   if (schema.content.enum && schema.content.enum.length) {
     enumElements = schema.content.enum.map((value: any, i: number) => (
-      <span className={bemClasses.element(`enum`)} key={i}>
-        "{value}"
-      </span>
+      <>
+        {' '}
+        <span className={bemClasses.element(`enum`)} key={i}>
+          "{value}"
+        </span>
+      </>
     ));
   }
 

library/src/styles/fiori.css

@@ -1356,7 +1356,6 @@
   border-color: #dae1e7;
   border-radius: 0.25rem;
   border-width: 1px;
-  margin-left: 0.25rem;
   padding: 0 0.5rem;
   color: #f6993f;
 }