Fix very narrow nested fields (#1561)

I am not especially talented at CSS, but here is a fix for the very narrow layout which makes editing bigger nested fields such as textareas very impractical.

Before:
<img width="1295" alt="before" src="https://user-images.githubusercontent.com/4217871/75374181-12c9a900-58cc-11ea-9dab-8262ac218968.png">

After:
<img width="1297" alt="after" src="https://user-images.githubusercontent.com/4217871/75374197-1826f380-58cc-11ea-8b70-dbf3357bdce3.png">

The problem can also be seen on http://administrate-prototype.herokuapp.com/admin/products when editing some product (product meta tag meta title and meta description are very narrow, which would be problematic if those fields were textareas).

<img width="728" alt="Screenshot 2020-02-26 at 18 47 43" src="https://user-images.githubusercontent.com/4217871/75374363-7358e600-58cc-11ea-8b6a-2d0ce7e90689.png">

app/assets/stylesheets/administrate/components/_field-unit.scss

@@ -17,21 +17,23 @@
 .field-unit__field {
   float: left;
   margin-left: 2rem;
-  width: 45%;
+  max-width: 50rem;
+  width: 100%;
 }
 
 .field-unit--nested {
   border: $base-border;
   margin-left: 7.5%;
+  max-width: 60rem;
   padding: $small-spacing;
-  width: 50%;
+  width: 100%;
 
   .field-unit__field {
-    width: calc(75% - 1rem);
+    width: 100%;
   }
 
   .field-unit__label {
-    width: calc(25% - 1rem);
+    width: 10rem;
   }
 }