diff --git a/packages/frontend/src/lib/ContentDetailsLayout.svelte b/packages/frontend/src/lib/ContentDetailsLayout.svelte
index 4043717f3..ba70dd06f 100644
--- a/packages/frontend/src/lib/ContentDetailsLayout.svelte
+++ b/packages/frontend/src/lib/ContentDetailsLayout.svelte
@@ -9,9 +9,7 @@ const toggle = () => {
 </script>
 
 <div class="flex flex-col w-full overflow-y-auto">
-  <div class="p-5">
-    <slot name="header" />
-  </div>
+  <slot name="header" />
   <div class="grid w-full lg:grid-cols-[1fr_auto] max-lg:grid-cols-[auto]">
     <div class="p-5 inline-grid">
       <slot name="content" />
diff --git a/packages/frontend/src/pages/Recipe.svelte b/packages/frontend/src/pages/Recipe.svelte
index ef7072f0f..4517d644d 100644
--- a/packages/frontend/src/pages/Recipe.svelte
+++ b/packages/frontend/src/pages/Recipe.svelte
@@ -56,7 +56,7 @@ function setSelectedModel(modelId: string) {
     <ContentDetailsLayout detailsTitle="AI App Details" detailsLabel="application details">
       <svelte:fragment slot="header">
         {#if connectionInfo}
-          <div class="mx-5">
+          <div class="px-4">
             <ContainerConnectionStatusInfo connectionInfo="{connectionInfo}" background="dark" />
           </div>
         {/if}