Hassio random fixes (#1278)

* Fix img width in markdown

* Flexify add-on view

* Hide deployment if null

* Fix mobile add-on view

hassio/src/addon-view/hassio-addon-info.js

@@ -62,6 +62,9 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
       .right {
         float: right;
       }
+      ha-markdown img {
+        max-width: 100%;
+      }
     </style>
     <template is="dom-if" if="[[computeUpdateAvailable(addon)]]">
       <paper-card heading="Update available! 🎉">

hassio/src/addon-view/hassio-addon-view.js

@@ -25,14 +25,28 @@ class HassioAddonView extends PolymerElement {
       }
       .content {
         padding: 24px 0 32px;
-        max-width: 600px;
-        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
       }
       hassio-addon-info,
       hassio-addon-network,
       hassio-addon-audio,
       hassio-addon-config {
         margin-bottom: 24px;
+        width: 600px;
+      }
+      hassio-addon-logs {
+        min-width: 600px;
+      }
+      @media only screen and (max-width: 600px) {
+        hassio-addon-info,
+        hassio-addon-network,
+        hassio-addon-audio,
+        hassio-addon-config,
+        hassio-addon-logs {
+          max-width: 100%;
+        }
       }
     </style>
     <app-route route="[[route]]" pattern="/addon/:slug" data="{{routeData}}" active="{{routeMatches}}"></app-route>

hassio/src/system/hassio-host-info.js

@@ -54,10 +54,12 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
             <td>System</td>
             <td>[[data.operating_system]]</td>
           </tr>
+          <template is="dom-if" if="[[data.deployment]]">
             <tr>
               <td>Deployment</td>
               <td>[[data.deployment]]</td>
             </tr>
+          </template>
         </tbody></table>
         <paper-button raised="" on-click="_showHardware" class="info">Show hardware</paper-button>
         <template is="dom-if" if="[[errors]]">