diff --git a/app/MindWork AI Studio/Components/InnerScrolling.razor b/app/MindWork AI Studio/Components/InnerScrolling.razor
index 83fd15e2..5a2da661 100644
--- a/app/MindWork AI Studio/Components/InnerScrolling.razor	
+++ b/app/MindWork AI Studio/Components/InnerScrolling.razor	
@@ -1,6 +1,12 @@
 @inherits MSGComponentBase
 
-<div class="d-flex flex-column" style="@this.Height">
+<div class="@this.Classes" style="@this.Styles">
+    @if (this.HeaderContent is not null)
+    {
+        <div>
+            @this.HeaderContent
+        </div>
+    }
     <div class="flex-auto overflow-auto">
         @this.ChildContent
         
diff --git a/app/MindWork AI Studio/Components/InnerScrolling.razor.cs b/app/MindWork AI Studio/Components/InnerScrolling.razor.cs
index 0ac5846b..fc5fd0a9 100644
--- a/app/MindWork AI Studio/Components/InnerScrolling.razor.cs	
+++ b/app/MindWork AI Studio/Components/InnerScrolling.razor.cs	
@@ -6,6 +6,9 @@ namespace AIStudio.Components;
 
 public partial class InnerScrolling : MSGComponentBase
 {
+    [Parameter]
+    public bool FillEntireHorizontalSpace { get; set; } = false;
+    
     /// <summary>
     /// Set the height of anything above the scrolling content; usually a header.
     /// What we do is calc(100vh - HeaderHeight). Means, you can use multiple measures like
@@ -14,6 +17,9 @@ public partial class InnerScrolling : MSGComponentBase
     [Parameter]
     public string HeaderHeight { get; set; } = "3em";
     
+    [Parameter]
+    public RenderFragment? HeaderContent { get; set; }
+    
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
     
@@ -22,6 +28,9 @@ public partial class InnerScrolling : MSGComponentBase
     /// </summary>
     [Parameter]
     public RenderFragment? FooterContent { get; set; }
+
+    [Parameter]
+    public string Class { get; set; } = string.Empty;
     
     [CascadingParameter]
     private MainLayout MainLayout { get; set; } = null!;
@@ -62,7 +71,9 @@ public partial class InnerScrolling : MSGComponentBase
 
     #endregion
 
-    private string Height => $"height: calc(100vh - {this.HeaderHeight} - {this.MainLayout.AdditionalHeight});";
+    private string Styles => this.FillEntireHorizontalSpace ? $"height: calc(100vh - {this.HeaderHeight} - {this.MainLayout.AdditionalHeight}); overflow-x: auto; min-width: 0;" : $"height: calc(100vh - {this.HeaderHeight} - {this.MainLayout.AdditionalHeight}); flex-shrink: 0;";
+
+    private string Classes => this.FillEntireHorizontalSpace ? $"{this.Class} d-flex flex-column flex-grow-1" : $"{this.Class} d-flex flex-column";
     
     public async Task ScrollToBottom()
     {