Refactored inner scrolling into its own component

app/MindWork AI Studio/Components/Blocks/InnerScrolling.razor

@@ -0,0 +1,7 @@
+<div class="d-flex flex-column" style="@this.Height">
+    <div class="flex-auto overflow-auto">
+        @this.ChildContent
+    </div>
+    
+    @this.FooterContent
+</div>

app/MindWork AI Studio/Components/Blocks/InnerScrolling.razor.cs

@@ -0,0 +1,25 @@
+using Microsoft.AspNetCore.Components;
+
+namespace AIStudio.Components.Blocks;
+
+public partial class InnerScrolling : ComponentBase
+{
+    /// <summary>
+    /// Set the height of anything above the scrolling content; usually a header.
+    /// What we do is calc(100vh - THIS). Means, you can use multiple measures like
+    /// 230px - 3em. Default is 3em.
+    /// </summary>
+    [Parameter]
+    public string HeaderHeight { get; set; } = "3em";
+    
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+    
+    /// <summary>
+    /// Optional footer content, shown after the scrolling area.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? FooterContent { get; set; }
+    
+    private string Height => $"height: calc(100vh - {this.HeaderHeight});";
+}

app/MindWork AI Studio/Components/Pages/About.razor

@@ -3,8 +3,7 @@
 
 <MudText Typo="Typo.h3" Class="mb-2">About MindWork AI Studio</MudText>
 
-<div class="d-flex flex-column" style="height: calc(100vh - 6em);">
+<InnerScrolling HeaderHeight="6em">
-    <div class="flex-auto overflow-auto">
     <MudExpansionPanels Class="mb-3">
         <MudExpansionPanel IsInitiallyExpanded="@true" Class="border-solid border rounded-lg">
             <TitleContent>
@@ -62,5 +61,4 @@
             </ChildContent>
         </MudExpansionPanel>
     </MudExpansionPanels>
-    </div>
+</InnerScrolling>
-</div>

app/MindWork AI Studio/Components/Pages/Chat.razor

@@ -10,8 +10,8 @@
     }
 </MudSelect>
 
-<div class="d-flex flex-column" style="height: calc(100vh - 12.3em);">
+<InnerScrolling HeaderHeight="12.3em">
-    <div class="flex-auto overflow-auto">
+    <ChildContent>
         @if (this.chatThread is not null)
         {
             foreach (var block in this.chatThread.Blocks.OrderBy(n => n.Time))
@@ -19,9 +19,10 @@
                 <ContentBlockComponent Role="@block.Role" Type="@block.ContentType" Time="@block.Time" Content="@block.Content"/>
             }
         }
-    </div>
+    </ChildContent>
-
+    <FooterContent>
         <MudPaper Style="flex: 0 0 auto;">
             <MudTextField T="string" @ref="@this.inputField" @bind-Text="@this.userInput" Variant="Variant.Outlined" AutoGrow="@true" Lines="3" MaxLines="12" Label="@this.InputLabel" Placeholder="@this.ProviderPlaceholder" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Send" OnAdornmentClick="() => this.SendMessage()" ReadOnly="!this.IsProviderSelected || this.isStreaming" Immediate="@true" OnKeyUp="this.InputKeyEvent" UserAttributes="@USER_INPUT_ATTRIBUTES"/>
         </MudPaper>
-</div>
+    </FooterContent>
+</InnerScrolling>

app/MindWork AI Studio/Components/Pages/Home.razor

@@ -4,8 +4,7 @@
 <MudImage Src="svg/banner.svg" />
 <MudText Typo="Typo.h3" Class="mt-2 mb-2">Let's get started</MudText>
 
-<div class="d-flex flex-column" style="height: calc(100vh - 288px - 3em);">
+<InnerScrolling HeaderHeight="288px - 3em">
-    <div class="flex-auto overflow-auto">
     <MudExpansionPanels Class="mb-3">
 
         <MudExpansionPanel IsInitiallyExpanded="@true" Class="border-solid border rounded-lg">
@@ -68,5 +67,4 @@
         </MudExpansionPanel>
 
     </MudExpansionPanels>
-    </div>
+</InnerScrolling>
-</div>

app/MindWork AI Studio/Components/Pages/Settings.razor

@@ -2,8 +2,7 @@
 
 <MudText Typo="Typo.h3" Class="mb-12">Settings</MudText>
 
-<div class="d-flex flex-column" style="height: calc(100vh - 6em);">
+<InnerScrolling HeaderHeight="6em">
-    <div class="flex-auto overflow-auto">
     <MudPaper Class="pa-3 mb-8 border-solid border rounded-lg">
         <MudText Typo="Typo.h4" Class="mb-3">Configured Providers</MudText>
         <MudTable Items="@this.SettingsManager.ConfigurationData.Providers" Class="border-dashed border rounded-lg">
@@ -54,5 +53,4 @@
         <ConfigurationOption OptionDescription="Enable spellchecking?" LabelOn="Spellchecking is enabled" LabelOff="Spellchecking is disabled" State="@(() => this.SettingsManager.ConfigurationData.EnableSpellchecking)" StateUpdate="@(updatedState => this.SettingsManager.ConfigurationData.EnableSpellchecking = updatedState)" OptionHelp="When enabled, spellchecking will be active in all input fields. Depending on your operating system, errors may not be visually highlighted, but right-clicking may still offer possible corrections." />
         <ConfigurationSelect OptionDescription="Shortcut to send input" SelectedValue="@(() => this.SettingsManager.ConfigurationData.ShortcutSendBehavior)" Data="@ConfigurationSelectDataFactory.GetSendBehaviorData()" SelectionUpdate="@(selectedValue => this.SettingsManager.ConfigurationData.ShortcutSendBehavior = selectedValue)" OptionHelp="Do you want to use any shortcut to send your input?"/>
     </MudPaper>
-    </div>
+</InnerScrolling>
-</div>

app/MindWork AI Studio/Components/Pages/Supporters.razor

@@ -2,8 +2,7 @@
 
 <MudText Typo="Typo.h3" Class="mb-2">Supporters</MudText>
 
-<div class="d-flex flex-column" style="height: calc(100vh - 6em);">
+<InnerScrolling HeaderHeight="6em">
-    <div class="flex-auto overflow-auto">
         
     <div class="border-solid border-2 rounded-lg pa-3 mb-6">
         <MudText Typo="Typo.h4" Class="mb-2">Our Titans</MudText>
@@ -46,5 +45,4 @@
         </MudItem>
     </MudGrid>
 
-    </div>
+</InnerScrolling>
-</div>