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

Author: julianpoy

packages/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 {

packages/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;
+}

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 }}

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;
 }