Custom repository dialog mobile tweaks (#522)

hacs · Nov 7, 2021 · e1f785a · e1f785a
1 parent 23a36ab
commit e1f785a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/src/components/dialogs/hacs-add-repository-dialog.ts b/src/components/dialogs/hacs-add-repository-dialog.ts
@@ -8,7 +8,6 @@ import memoizeOne from "memoize-one";
 import { stopPropagation } from "../../../homeassistant-frontend/src/common/dom/stop_propagation";
 import "../../../homeassistant-frontend/src/common/search/search-input";
 import "../../../homeassistant-frontend/src/components/ha-chip";
-import "../../../homeassistant-frontend/src/components/ha-paper-dropdown-menu";
 import "../../../homeassistant-frontend/src/components/ha-settings-row";
 import "../../../homeassistant-frontend/src/components/ha-svg-icon";
 import { brandsUrl } from "../../../homeassistant-frontend/src/util/brands-url";
@@ -261,8 +260,7 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
           border-bottom: 1px var(--mdc-theme-primary) solid;
         }
         search-input[narrow],
-        mwc-select[narrow],
-        ha-paper-dropdown-menu[narrow] {
+        mwc-select[narrow] {
           width: 100%;
           margin: 4px 0;
         }
@@ -276,10 +274,6 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
           max-width: 36px;
         }
 
-        ha-paper-dropdown-menu {
-          margin: 0 12px -8px 0;
-        }
-
         .filters {
           width: 100%;
           display: flex;
@@ -292,6 +286,7 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
 
         ha-settings-row {
           padding: 0px 16px 0 0;
+          cursor: pointer;
         }
 
         .searchandfilter {

diff --git a/src/components/dialogs/hacs-custom-repositories-dialog.ts b/src/components/dialogs/hacs-custom-repositories-dialog.ts
@@ -59,9 +59,10 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
         .title=${this.hacs.localize("dialog_custom_repositories.title")}
         scrimClickAction
         escapeKeyAction
+        maxWidth
       >
         <div class="content">
-          <div class="list">
+          <div class="list" ?narrow=${this.narrow}>
             ${this._error?.message
               ? html`<ha-alert alert-type="error" .rtl=${computeRTL(this.hass)}>
                   ${this._error.message}
@@ -175,14 +176,15 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
       css`
         .list {
           position: relative;
-          max-height: 870px;
+          max-height: calc(100vh - 500px);
           overflow: auto;
         }
         ha-form {
           display: block;
           padding: 25px 0;
         }
         ha-form[narrow] {
+          background-color: var(--card-background-color);
           bottom: 0;
           position: absolute;
           width: calc(100% - 48px);
@@ -197,9 +199,18 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
           cursor: pointer;
           padding: 0;
         }
+        .list[narrow] > ha-settings-row:last-of-type {
+          margin-bottom: 162px;
+        }
         .delete {
           color: var(--hcv-color-error);
         }
+
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          .list {
+            max-height: calc(100vh - 162px);
+          }
+        }
       `,
     ];
   }

diff --git a/src/panels/hacs-store-panel.ts b/src/panels/hacs-store-panel.ts
@@ -359,17 +359,14 @@ export class HacsStorePanel extends LitElement {
           width: 100%;
         }
         hacs-repository-card[narrow]:last-of-type {
-          margin-bottom: 64px;
+          margin-bottom: 248px;
         }
         .narrow {
           width: 100%;
           display: block;
           padding: 0px;
           margin: 0;
         }
-        .container .narrow {
-          margin-bottom: 128px;
-        }
 
         .bottom-bar {
           position: fixed !important;