fixing shared recipe layout for desktop

Seasoned.Frontend/app/components/RecipeDisplay.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="fade">
-    <div v-if="recipe" class="recipe-content mx-auto" style="max-width: 900px;">
+    <div v-if="recipe" class="recipe-content">
       <v-divider class="mb-10 separator"></v-divider>
       
       <h2 class="recipe-title text-center mb-4">{{ recipe.title }}</h2>
@@ -165,6 +165,7 @@ const printRecipe = () => {
 const shareRecipe = async () => {
   if (!props.recipe?.id) {
     showSavePrompt.value = true;
+
     setTimeout(() => {
       showSavePrompt.value = false;
     }, 8000);

Seasoned.Frontend/app/pages/recipe/[id].vue

@@ -1,9 +1,13 @@
 <template>
   <div class="recipe-bg min-h-screen pb-12">
     <v-container class="py-10">
-      <div v-if="normalizedRecipe" class="recipe-card mx-auto" style="max-width: 1000px;">
-         <RecipeDisplay :recipe="normalizedRecipe" :is-public-view="true" />
-      </div>
+      <RecipeDisplay 
+        v-if="normalizedRecipe" 
+        :recipe="normalizedRecipe" 
+        :is-public-view="true" 
+        class="recipe-card mx-auto"
+        style="max-width: 1000px;" 
+      />
       <v-progress-linear v-else indeterminate color="#8c4a32" />
     </v-container>
   </div>