fix: overlap of select-multiple-items component (#1221)

julianpoy · Jan 6, 2024 · f793bb7 · f793bb7
2 parents f732cc8 + a6144f9
commit f793bb7
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 5 deletions.
diff --git a/...es/frontend/src/app/components/select-multiple-items/select-multiple-items.component.scss b/...es/frontend/src/app/components/select-multiple-items/select-multiple-items.component.scss
@@ -10,6 +10,7 @@
   z-index: 2;
   background-color: var(--ion-background-tint-color);
   box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.4);
+  max-height: 150px;
 }
 
 .results-list-container {

diff --git a/...s/frontend/src/app/pages/labels-pages/new-label-item-modal/new-label-item-modal.page.scss b/...s/frontend/src/app/pages/labels-pages/new-label-item-modal/new-label-item-modal.page.scss
@@ -0,0 +1,3 @@
+select-multiple-items {
+  margin-bottom: 100px;
+}
diff --git a/packages/frontend/src/app/pages/recipe-components/edit-recipe/edit-recipe.page.html b/packages/frontend/src/app/pages/recipe-components/edit-recipe/edit-recipe.page.html
@@ -234,10 +234,6 @@ <h2>{{ 'pages.editRecipe.input.labels' | translate }}</h2>
       </div>
     </div>
 
-    <br />
-    <br />
-    <br />
-
     <div class="ion-padding">
       <ion-button *ngIf="recipe.id" expand="block" (click)="save()">
         {{ 'pages.editRecipe.save' | translate }}

diff --git a/packages/frontend/src/app/pages/recipe-components/edit-recipe/edit-recipe.page.scss b/packages/frontend/src/app/pages/recipe-components/edit-recipe/edit-recipe.page.scss
@@ -41,6 +41,7 @@
   padding: 16px;
   padding-top: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, auto));
+  grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), auto));
   background: var(--ion-item-background);
+  margin-bottom: 100px;
 }