From 5199e946a16f76d72795fc76a3e23a3aa44d3f51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Wed, 3 Feb 2021 16:08:29 +0100
Subject: [PATCH] Fix button layout for addon-info (#8315)

---
 .../src/addon-view/info/hassio-addon-info.ts  | 163 +++++++++---------
 1 file changed, 82 insertions(+), 81 deletions(-)

diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index 4ce12665d8..79674fac22 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -536,85 +536,88 @@ class HassioAddonInfo extends LitElement {
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
         </div>
         <div class="card-actions">
-          ${this.addon.version
-            ? html`
-                ${this._computeIsRunning
-                  ? html`
-                      <ha-call-api-button
-                        class="warning"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/stop"
-                      >
-                        Stop
-                      </ha-call-api-button>
-                      <ha-call-api-button
-                        class="warning"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/restart"
-                      >
-                        Restart
-                      </ha-call-api-button>
-                    `
-                  : html`
-                      <ha-progress-button @click=${this._startClicked}>
-                        Start
-                      </ha-progress-button>
-                    `}
-                ${this._computeShowWebUI
-                  ? html`
-                      <a
-                        href=${this._pathWebui!}
-                        tabindex="-1"
-                        target="_blank"
-                        class="right"
-                        rel="noopener"
-                      >
-                        <mwc-button>
+          <div>
+            ${this.addon.version
+              ? this._computeIsRunning
+                ? html`
+                    <ha-call-api-button
+                      class="warning"
+                      .hass=${this.hass}
+                      .path="hassio/addons/${this.addon.slug}/stop"
+                    >
+                      Stop
+                    </ha-call-api-button>
+                    <ha-call-api-button
+                      class="warning"
+                      .hass=${this.hass}
+                      .path="hassio/addons/${this.addon.slug}/restart"
+                    >
+                      Restart
+                    </ha-call-api-button>
+                  `
+                : html`
+                    <ha-progress-button @click=${this._startClicked}>
+                      Start
+                    </ha-progress-button>
+                  `
+              : html`
+                  ${!this.addon.available
+                    ? html`
+                        <p class="warning">
+                          This add-on is not available on your system.
+                        </p>
+                      `
+                    : ""}
+                  <ha-progress-button
+                    .disabled=${!this.addon.available}
+                    @click=${this._installClicked}
+                  >
+                    Install
+                  </ha-progress-button>
+                `}
+          </div>
+          <div>
+            ${this.addon.version
+              ? html` ${this._computeShowWebUI
+                    ? html`
+                        <a
+                          href=${this._pathWebui!}
+                          tabindex="-1"
+                          target="_blank"
+                          rel="noopener"
+                        >
+                          <mwc-button>
+                            Open web UI
+                          </mwc-button>
+                        </a>
+                      `
+                    : ""}
+                  ${this._computeShowIngressUI
+                    ? html`
+                        <mwc-button @click=${this._openIngress}>
                           Open web UI
                         </mwc-button>
-                      </a>
-                    `
-                  : ""}
-                ${this._computeShowIngressUI
-                  ? html`
-                      <mwc-button class="right" @click=${this._openIngress}>
-                        Open web UI
-                      </mwc-button>
-                    `
-                  : ""}
-                <ha-progress-button
-                  class=" right warning"
-                  @click=${this._uninstallClicked}
-                >
-                  Uninstall
-                </ha-progress-button>
-                ${this.addon.build
-                  ? html`
-                      <ha-call-api-button
-                        class="warning right"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/rebuild"
-                      >
-                        Rebuild
-                      </ha-call-api-button>
-                    `
-                  : ""}
-              `
-            : html`
-                ${!this.addon.available
-                  ? html`
-                      <p class="warning">
-                        This add-on is not available on your system.
-                      </p>
-                    `
-                  : ""}
-                <ha-progress-button
-                  .disabled=${!this.addon.available}
-                  @click=${this._installClicked}
-                >
-                  Install
-                </ha-progress-button>
-              `}
+                      `
+                    : ""}
+                  <ha-progress-button
+                    class="warning"
+                    @click=${this._uninstallClicked}
+                  >
+                    Uninstall
+                  </ha-progress-button>
+                  ${this.addon.build
+                    ? html`
+                        <ha-call-api-button
+                          class="warning"
+                          .hass=${this.hass}
+                          .path="hassio/addons/${this.addon.slug}/rebuild"
+                        >
+                          Rebuild
+                        </ha-call-api-button>
+                      `
+                    : ""}`
+              : ""}
+          </div>
         </div>
       </ha-card>
 
@@ -994,9 +997,6 @@ class HassioAddonInfo extends LitElement {
           font-weight: 500;
           color: var(--primary-color);
         }
-        .right {
-          float: right;
-        }
         protection-enable mwc-button {
           --mdc-theme-primary: white;
         }
@@ -1019,7 +1019,8 @@ class HassioAddonInfo extends LitElement {
           margin-bottom: 16px;
         }
         .card-actions {
-          display: flow-root;
+          justify-content: space-between;
+          display: flex;
         }
         .security h3 {
           margin-bottom: 8px;