Some styling of RecipePage.

src/pages/recipe/Recipe.tsx

@@ -13,15 +13,17 @@ const Recipe = ({ recipe, imgUrl }: RecipeProps) => {
     return (
         <div className={classes.fullRecipeContainer}>
             <article className={classes.fullRecipe}>
+                <div className={classes.info}>
+                    <div className={classes.infoRow}>
+                        <h1 className={classes.recipeTitle}>{recipe.title}</h1>
+                        <StarCount count={recipe.starCount} />
+                    </div>
+                    <div className={classes.infoRow}>
+                        <UserIconAndName username={recipe.ownerUsername} />
+                        <RecipeVisibilityIcon isPublic={recipe.isPublic} />
+                    </div>
+                </div>
                 <img src={imgUrl} className={classes.mainImage} />
-                <div className={classes.infoRow}>
-                    <h1>{recipe.title}</h1>
-                    <StarCount count={recipe.starCount} />
-                </div>
-                <div className={classes.infoRow}>
-                    <UserIconAndName username={recipe.ownerUsername} />
-                    <RecipeVisibilityIcon isPublic={recipe.isPublic} />
-                </div>
                 <div dangerouslySetInnerHTML={{ __html: recipe.text }} />
             </article>
         </div>

src/pages/recipe/recipe.module.css

@@ -1,19 +1,30 @@
 .full-recipe-container {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    max-width: 100%;
 }
 
 .full-recipe {
-    max-width: 600px;
+    max-width: 80ch;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
 }
 
-.full-recipe .main-image {
+.info {
-    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
 }
 
-.full-recipe .info-row {
+.info-row {
     display: flex;
     justify-content: space-between;
 }
+
+.recipe-title {
+    margin-block: 0.5em;
+}
+
+.main-image {
+    width: 100%;
+}