Fix layout dev tools for Safari

src/layouts/partial-dev-call-service.html

@@ -11,10 +11,11 @@
 <dom-module id="partial-dev-call-service">
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
-    .form {
+    .content {
+      @apply(--paper-font-body1);
+      margin-top: 64px;
       padding: 24px;
       background-color: white;
-      margin-top: 64px;
       -ms-user-select: initial;
       -webkit-user-select: initial;
       -moz-user-select: initial;
@@ -28,18 +29,21 @@
       margin-top: 24px;
       white-space: pre-wrap;
     }
+
+    .header {
+      @apply(--paper-font-title);
+    }
   </style>
   <template>
     <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
       <span header-title>Call Service</span>
 
-      <div class='form fit'>
+      <div class$='[[computeFormClasses(narrow)]]'>
+        <div class='flex'>
           <p>
             Call a service from a component.
           </p>
 
-        <div class$='[[computeFormClasses(narrow)]]'>
-          <div class='layout vertical flex'>
           <div class='ha-form'>
             <paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
             <paper-input label="Service" value='{{service}}'></paper-input>
@@ -48,12 +52,12 @@
           </div>
           <div class='description'>[[description]]</div>
         </div>
+
         <div>
-            <h4>Available services:</h4>
+          <div class='header'>Available services</div>
           <services-list on-service-selected='serviceSelected'></services-list>
         </div>
       </div>
-      </div>
     </partial-base>
   </template>
 </dom-module>

src/layouts/partial-dev-call-service.js

@@ -75,6 +75,6 @@ export default new Polymer({
   },
 
   computeFormClasses(narrow) {
-    return `layout ${narrow ? 'vertical' : 'horizontal'}`;
+    return `content fit ${narrow ? '' : 'layout horizontal'}`;
   },
 });

src/layouts/partial-dev-fire-event.html

@@ -11,10 +11,11 @@
 <dom-module id="partial-dev-fire-event">
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
-    .form {
+    .content {
+      @apply(--paper-font-body1);
+      margin-top: 64px;
       padding: 24px;
       background-color: white;
-      margin-top: 64px;
       -ms-user-select: initial;
       -webkit-user-select: initial;
       -moz-user-select: initial;
@@ -23,30 +24,34 @@
     .ha-form {
       margin-right: 16px;
     }
+
+    .header {
+      @apply(--paper-font-title);
+    }
   </style>
 
   <template>
     <partial-base narrow="{{narrow}}" show-menu='[[showMenu]]'>
       <span header-title>Fire Event</span>
 
-      <div class='form fit'>
+      <div class$='[[computeFormClasses(narrow)]]'>
+        <div class='flex'>
           <p>
             Fire an event on the event bus.
           </p>
 
-        <div class$='[[computeFormClasses(narrow)]]'>
-          <div class='ha-form flex'>
+          <div class='ha-form'>
             <paper-input label="Event Type" autofocus required value='{{eventType}}'></paper-input>
             <paper-textarea label="Event Data (JSON, optional)" value='{{eventData}}'></paper-textarea>
             <paper-button on-tap='fireEvent' raised>Fire Event</paper-button>
           </div>
+        </div>
 
         <div>
-            <h4>Available events:</h4>
+          <div class='header'>Available Events</div>
           <events-list on-event-selected='eventSelected'></event-list>
         </div>
       </div>
-      </div>
     </partial-base>
 
   </template>

src/layouts/partial-dev-fire-event.js

@@ -52,6 +52,6 @@ export default new Polymer({
   },
 
   computeFormClasses(narrow) {
-    return `layout ${narrow ? 'vertical' : 'horizontal'}`;
+    return `content fit ${narrow ? '' : 'layout horizontal'}`;
   },
 });

src/layouts/partial-dev-set-state.html

@@ -6,15 +6,17 @@
 
 <link rel="import" href="./partial-base.html">
 
+<link rel="import" href="../components/ha-dev-responsive-content.html">
 <link rel="import" href="../components/entity-list.html">
 
 <dom-module id="partial-dev-set-state">
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
-    .form {
+    .content {
+      @apply(--paper-font-body1);
+      margin-top: 64px;
       padding: 24px;
       background-color: white;
-      margin-top: 64px;
       -ms-user-select: initial;
       -webkit-user-select: initial;
       -moz-user-select: initial;
@@ -23,30 +25,34 @@
     .ha-form {
       margin-right: 16px;
     }
+
+    .header {
+      @apply(--paper-font-title);
+    }
   </style>
 
   <template>
     <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
       <span header-title>Set State</span>
 
-      <div class='form fit'>
-        <div>
+      <div class$='[[computeFormClasses(narrow)]]'>
+        <div class='flex'>
+          <p>
             Set the representation of a device within Home Assistant.<br />
             This will not communicate with the actual device.
-        </div>
+          </p>
 
-        <div class$='[[computeFormClasses(narrow)]]'>
-          <div class='ha-form flex'>
+          <div class='ha-form'>
             <paper-input label="Entity ID" autofocus required value='{{entityId}}'></paper-input>
             <paper-input label="State" required value='{{state}}'></paper-input>
             <paper-textarea label="State attributes (JSON, optional)" value='{{stateAttributes}}'></paper-textarea>
             <paper-button on-tap='handleSetState' raised>Set State</paper-button>
           </div>
-
-          <div class='sidebar'>
-            <h4>Current entities:</h4>
-            <entity-list on-entity-selected='entitySelected'></entity-list>
         </div>
+
+        <div>
+          <div class='header'>Current entities</div>
+          <entity-list on-entity-selected='entitySelected'></entity-list>
         </div>
       </div>
     </partial-base>

src/layouts/partial-dev-set-state.js

@@ -4,6 +4,7 @@ import Polymer from '../polymer';
 
 require('./partial-base');
 require('../components/entity-list');
+require('../components/ha-dev-responsive-content');
 
 const { reactor, entityGetters, entityActions } = hass;
 
@@ -73,6 +74,6 @@ export default new Polymer({
   },
 
   computeFormClasses(narrow) {
-    return `layout ${narrow ? 'vertical' : 'horizontal'}`;
+    return `content fit ${narrow ? '' : 'layout horizontal'}`;
   },
 });

src/layouts/partial-dev-template.html

@@ -11,6 +11,7 @@
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     .content {
+      @apply(--paper-font-body1);
       margin-top: 64px;
       padding: 16px;
       background-color: white;
@@ -42,6 +43,7 @@
     }
 
     .rendered {
+      @apply(--paper-font-code1)
       clear: both;
       white-space: pre-wrap;
     }
@@ -63,9 +65,9 @@
             <li><a href='http://jinja.pocoo.org/docs/dev/templates/' target='_blank'>Jinja2 tempate documentation</a></li>
             <li><a href='https://home-assistant.io/topics/templating/' target='_blank'>Home Assistant template extensions</a></li>
           </ul>
-          </p>
           <paper-textarea label="Template" value='{{template}}'></paper-textarea>
         </div>
+
         <div class='render-pane'>
           <paper-spinner class='render-spinner' active='[[rendering]]'></paper-spinner>
           <pre class$='[[computeRenderedClasses(error)]]'>[[processed]]</pre>

src/layouts/partial-dev-template.js

@@ -67,7 +67,7 @@ export default new Polymer({
   },
 
   computeFormClasses(narrow) {
-    return `content fit layout ${narrow ? 'vertical' : 'horizontal'}`;
+    return `content fit ${narrow ? '' : 'layout horizontal'}`;
   },
 
   computeRenderedClasses(error) {