From b74466314deb2f21e44a4ebdd5b8215e235a0964 Mon Sep 17 00:00:00 2001
From: Vladimir <lebedev.vladimir3@gmail.com>
Date: Fri, 26 Jul 2019 21:01:55 +0300
Subject: [PATCH] Fix style issue when "array of objects" contains another
 object (#212)

* Fix style issue when "array of objects" contains another object

* simplify solution for `array of objects` style bug
---
 example/swagger-files/types.json       |  8 ++++++++
 packages/api-explorer/api-explorer.css | 14 +++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/example/swagger-files/types.json b/example/swagger-files/types.json
index 8712553d9..a0bad92b4 100644
--- a/example/swagger-files/types.json
+++ b/example/swagger-files/types.json
@@ -220,6 +220,14 @@
                         },
                         "name": {
                           "type": "string"
+                        },
+                        "object": {
+                          "type": "object",
+                          "properties": {
+                            "a": {
+                              "type": "string"
+                            }
+                          }
                         }
                       }
                     }
diff --git a/packages/api-explorer/api-explorer.css b/packages/api-explorer/api-explorer.css
index 64bede899..69108a3cb 100644
--- a/packages/api-explorer/api-explorer.css
+++ b/packages/api-explorer/api-explorer.css
@@ -311,7 +311,7 @@ form.rjsf button[disabled] {
   padding: 3px 6px;
 }
 
-.field.field-array-of-object legend::after {
+.field.field-array-of-object > legend::after {
   color: rgba(0, 0, 0, 0.6);
   content: 'array of objects';
   background: #f2f2f2;
@@ -323,6 +323,18 @@ form.rjsf button[disabled] {
   padding: 3px 6px;
 }
 
+fieldset[id^='root_array of objects_'] > legend::after {
+  content: 'object';
+  color: rgba(0, 0, 0, 0.6);
+  background: #f2f2f2;
+  border-radius: 3px;
+  font-family: 'Proxima Nova', sans-serif;
+  font-size: 11px;
+  font-weight: lighter;
+  margin-left: 10px;
+  padding: 3px 6px;
+}
+
 .field.field-array-of-boolean legend::after {
   color: rgba(0, 0, 0, 0.6);
   content: 'array of booleans';