fixes: PWA & interface on small screens (#2536)

* fix pwa icons

* fix spacing and layouts for small screens

* translate missing strings

* Revert "translate missing strings"

This reverts commit 150a961a08.

* fixes

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageFooter.vue

@@ -18,7 +18,7 @@
         :href="recipe.orgURL"
         color="secondary darken-1"
         target="_blank"
-        class="rounded-sm mr-4"
+        class="rounded-sm mr-n2"
       >
         {{ $t("recipe.original-url") }}
       </v-btn>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue

@@ -26,11 +26,12 @@
       </TransitionGroup>
     </draggable>
     <v-skeleton-loader v-else boilerplate elevation="2" type="list-item"> </v-skeleton-loader>
-    <div class="d-flex justify-end mt-2">
+    <div class="d-flex flex-wrap justify-center justify-sm-end mt-2">
       <v-tooltip top color="accent">
         <template #activator="{ on, attrs }">
           <span v-on="on">
             <BaseButton
+              class="mb-1"
               :disabled="recipe.settings.disableAmount || hasFoodOrUnit"
               color="accent"
               :to="`${recipe.slug}/ingredient-parser`"
@@ -45,8 +46,8 @@
         </template>
         <span>{{ parserToolTip }}</span>
       </v-tooltip>
-      <RecipeDialogBulkAdd class="ml-1 mr-1" @bulk-data="addIngredient" />
-      <BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
+      <RecipeDialogBulkAdd class="mx-1 mb-1" @bulk-data="addIngredient" />
+      <BaseButton class="mb-1" @click="addIngredient" > {{ $t("general.new") }} </BaseButton>
     </div>
   </div>
 </template>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue

@@ -108,7 +108,7 @@
           </v-app-bar>
           <v-hover v-slot="{ hover }">
             <v-card
-              class="ma-1"
+              class="my-3"
               :class="[{ 'on-hover': hover }, isChecked(index)]"
               :elevation="hover ? 12 : 2"
               :ripple="false"