Fix styling of recipe view

CHANGELOG.md

@@ -17,6 +17,8 @@
   [#1108](https://github.com/nextcloud/cookbook/pull/1108) @christianlupus
 - Fix UI glitches caused by improper use of Breadcrumbs component
   [#1105](https://github.com/nextcloud/cookbook/pull/1105) @MarcelRobitaille
+- Fix typos and styling issues
+  [#1112](https://github.com/nextcloud/cookbook/pull/1112) @christianlupus
 
 ### Maintenance
 - Add composer.json to version control to have unique installed dependency versions

lib/Helper/Filter/JSON/FixRecipeYieldFilter.php

@@ -65,7 +65,7 @@ public function apply(array &$json): bool {
 
 			// Heuristics: Array with multiple entries.
 			// XXX How to parse an array correctly?
-			$this->logger->debug($this->l->t('Using heuristics to parse the recipeYield field of recipe {name}.', ['name' => $json['name']]));
+			$this->logger->debug($this->l->t('Using heuristics to parse the `recipeYield` field representing the number of servings of recipe {name}.', ['name' => $json['name']]));
 			$json[self::YIELD] = join(' ', $json[self::YIELD]);
 		}
 
@@ -77,14 +77,18 @@ public function apply(array &$json): bool {
 			sort($matches);
 			$last = end($matches);
 
-			$this->logger->debug($this->l->t('Using the highest number found in recipeYield string. Totally found: {num}', ['num' => $count]));
+			$this->logger->debug($this->l->n(
+				'Only a single number was found in the `recipeYield` field. Using it as number of servings.',
+				'There are %n numbers found in the `recipeYield` field. Using the highest number found as number of servings.',
+				$count
+			));
 
 			$json[self::YIELD] = (int) $last;
 			return true;
 		}
 
 		// We did not find anything useful.
-		$this->logger->info($this->l->t('Could not parse recipeYield field. Falling back to 1.'));
+		$this->logger->info($this->l->t('Could not parse `recipeYield` field. Falling back to 1 serving.'));
 		$json[self::YIELD] = 1;
 		return true;
 	}

src/components/RecipeEdit.vue

@@ -64,7 +64,8 @@
                 <action-button
                     class="btn-enable-recipe-yield"
                     :aria-label="
-                        t('cookbook', 'Toggle if recipe yield field is present')
+                        // prettier-ignore
+                        t('cookbook', 'Toggle if the number of servings are present')
                     "
                     @click="toggleShowRecipeYield"
                 >

src/components/RecipeView.vue

@@ -878,7 +878,7 @@ main {
 
     main {
         grid-column: 3/4;
-        grid-row: 1/4;
+        grid-row: 1/5;
     }
 
     @media screen and (max-width: 850px), print {