From 64669088ed614bbc721abbe20ec88eec24b63d4f Mon Sep 17 00:00:00 2001
From: Thorsten Sommer <mail@tsommer.org>
Date: Tue, 25 Mar 2025 20:50:57 +0100
Subject: [PATCH] Fixed the preview tooltip component not showing the correct
 position when used inside a scrollable container

---
 app/MindWork AI Studio/Components/PreviewAlpha.razor      | 2 +-
 app/MindWork AI Studio/Components/PreviewAlpha.razor.cs   | 8 +++++++-
 app/MindWork AI Studio/Components/PreviewBeta.razor       | 2 +-
 app/MindWork AI Studio/Components/PreviewBeta.razor.cs    | 8 +++++++-
 .../Components/PreviewExperimental.razor                  | 2 +-
 .../Components/PreviewExperimental.razor.cs               | 8 +++++++-
 app/MindWork AI Studio/Components/PreviewPrototype.razor  | 2 +-
 .../Components/PreviewPrototype.razor.cs                  | 8 +++++++-
 .../Components/PreviewReleaseCandidate.razor              | 2 +-
 .../Components/PreviewReleaseCandidate.razor.cs           | 8 +++++++-
 app/MindWork AI Studio/Pages/Plugins.razor                | 4 ++--
 app/MindWork AI Studio/Pages/Writer.razor                 | 5 ++---
 app/MindWork AI Studio/wwwroot/app.css                    | 4 ++++
 app/MindWork AI Studio/wwwroot/changelog/v0.9.39.md       | 2 ++
 14 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/app/MindWork AI Studio/Components/PreviewAlpha.razor b/app/MindWork AI Studio/Components/PreviewAlpha.razor
index 99f9d844..b1b629d8 100644
--- a/app/MindWork AI Studio/Components/PreviewAlpha.razor	
+++ b/app/MindWork AI Studio/Components/PreviewAlpha.razor	
@@ -1,4 +1,4 @@
-<MudTooltip Placement="Placement.Bottom" Arrow="@true">
+<MudTooltip Placement="Placement.Bottom" Arrow="@true" Class="@this.Classes">
     <ChildContent>
         <MudChip T="string" Icon="@Icons.Material.Filled.FirstPage" Color="Color.Error" Class="mb-3">
             Alpha
diff --git a/app/MindWork AI Studio/Components/PreviewAlpha.razor.cs b/app/MindWork AI Studio/Components/PreviewAlpha.razor.cs
index 62466852..deb962c4 100644
--- a/app/MindWork AI Studio/Components/PreviewAlpha.razor.cs	
+++ b/app/MindWork AI Studio/Components/PreviewAlpha.razor.cs	
@@ -2,4 +2,10 @@ using Microsoft.AspNetCore.Components;
 
 namespace AIStudio.Components;
 
-public partial class PreviewAlpha : ComponentBase;
\ No newline at end of file
+public partial class PreviewAlpha : ComponentBase
+{
+    [Parameter]
+    public bool ApplyInnerScrollingFix { get; set; }
+    
+    private string Classes => this.ApplyInnerScrollingFix ? "InnerScrollingFix" : string.Empty;
+}
\ No newline at end of file
diff --git a/app/MindWork AI Studio/Components/PreviewBeta.razor b/app/MindWork AI Studio/Components/PreviewBeta.razor
index cd6b3c65..dd54225e 100644
--- a/app/MindWork AI Studio/Components/PreviewBeta.razor	
+++ b/app/MindWork AI Studio/Components/PreviewBeta.razor	
@@ -1,4 +1,4 @@
-<MudTooltip Placement="Placement.Bottom" Arrow="@true">
+<MudTooltip Placement="Placement.Bottom" Arrow="@true" Class="@this.Classes">
     <ChildContent>
         <MudChip T="string" Icon="@Icons.Material.Filled.HourglassTop" Color="Color.Info" Class="mb-3">
             Beta
diff --git a/app/MindWork AI Studio/Components/PreviewBeta.razor.cs b/app/MindWork AI Studio/Components/PreviewBeta.razor.cs
index a5064b60..d8fee758 100644
--- a/app/MindWork AI Studio/Components/PreviewBeta.razor.cs	
+++ b/app/MindWork AI Studio/Components/PreviewBeta.razor.cs	
@@ -2,4 +2,10 @@ using Microsoft.AspNetCore.Components;
 
 namespace AIStudio.Components;
 
-public partial class PreviewBeta : ComponentBase;
\ No newline at end of file
+public partial class PreviewBeta : ComponentBase
+{
+    [Parameter]
+    public bool ApplyInnerScrollingFix { get; set; }
+    
+    private string Classes => this.ApplyInnerScrollingFix ? "InnerScrollingFix" : string.Empty;
+}
\ No newline at end of file
diff --git a/app/MindWork AI Studio/Components/PreviewExperimental.razor b/app/MindWork AI Studio/Components/PreviewExperimental.razor
index 59e6651a..bedc9e4f 100644
--- a/app/MindWork AI Studio/Components/PreviewExperimental.razor	
+++ b/app/MindWork AI Studio/Components/PreviewExperimental.razor	
@@ -1,4 +1,4 @@
-<MudTooltip Placement="Placement.Bottom" Arrow="@true">
+<MudTooltip Placement="Placement.Bottom" Arrow="@true" Class="@this.Classes">
     <ChildContent>
         <MudChip T="string" Icon="@Icons.Material.Filled.Science" Color="Color.Error" Class="mb-3">
             Experimental
diff --git a/app/MindWork AI Studio/Components/PreviewExperimental.razor.cs b/app/MindWork AI Studio/Components/PreviewExperimental.razor.cs
index c66fa730..0588d489 100644
--- a/app/MindWork AI Studio/Components/PreviewExperimental.razor.cs	
+++ b/app/MindWork AI Studio/Components/PreviewExperimental.razor.cs	
@@ -2,4 +2,10 @@ using Microsoft.AspNetCore.Components;
 
 namespace AIStudio.Components;
 
-public partial class PreviewExperimental : ComponentBase;
\ No newline at end of file
+public partial class PreviewExperimental : ComponentBase
+{
+    [Parameter]
+    public bool ApplyInnerScrollingFix { get; set; }
+    
+    private string Classes => this.ApplyInnerScrollingFix ? "InnerScrollingFix" : string.Empty;
+}
\ No newline at end of file
diff --git a/app/MindWork AI Studio/Components/PreviewPrototype.razor b/app/MindWork AI Studio/Components/PreviewPrototype.razor
index f645e0ca..9aa8bbc0 100644
--- a/app/MindWork AI Studio/Components/PreviewPrototype.razor	
+++ b/app/MindWork AI Studio/Components/PreviewPrototype.razor	
@@ -1,4 +1,4 @@
-<MudTooltip Placement="Placement.Bottom" Arrow="@true">
+<MudTooltip Placement="Placement.Bottom" Arrow="@true" Class="@this.Classes">
     <ChildContent>
         <MudChip T="string" Icon="@Icons.Material.Filled.HourglassBottom" Color="Color.Error" Class="mb-3">
             Prototype
diff --git a/app/MindWork AI Studio/Components/PreviewPrototype.razor.cs b/app/MindWork AI Studio/Components/PreviewPrototype.razor.cs
index 573e2fd0..3ceab4d1 100644
--- a/app/MindWork AI Studio/Components/PreviewPrototype.razor.cs	
+++ b/app/MindWork AI Studio/Components/PreviewPrototype.razor.cs	
@@ -2,4 +2,10 @@ using Microsoft.AspNetCore.Components;
 
 namespace AIStudio.Components;
 
-public partial class PreviewPrototype : ComponentBase;
\ No newline at end of file
+public partial class PreviewPrototype : ComponentBase
+{
+    [Parameter]
+    public bool ApplyInnerScrollingFix { get; set; }
+    
+    private string Classes => this.ApplyInnerScrollingFix ? "InnerScrollingFix" : string.Empty;
+}
\ No newline at end of file
diff --git a/app/MindWork AI Studio/Components/PreviewReleaseCandidate.razor b/app/MindWork AI Studio/Components/PreviewReleaseCandidate.razor
index 44b51084..86954ddd 100644
--- a/app/MindWork AI Studio/Components/PreviewReleaseCandidate.razor	
+++ b/app/MindWork AI Studio/Components/PreviewReleaseCandidate.razor	
@@ -1,4 +1,4 @@
-<MudTooltip Placement="Placement.Bottom" Arrow="@true">
+<MudTooltip Placement="Placement.Bottom" Arrow="@true" Class="@this.Classes">
     <ChildContent>
         <MudChip T="string" Icon="@Icons.Material.Filled.VerifiedUser" Color="Color.Success" Class="mb-3">
             Release Candidate
diff --git a/app/MindWork AI Studio/Components/PreviewReleaseCandidate.razor.cs b/app/MindWork AI Studio/Components/PreviewReleaseCandidate.razor.cs
index 1d22d17e..249f1f35 100644
--- a/app/MindWork AI Studio/Components/PreviewReleaseCandidate.razor.cs	
+++ b/app/MindWork AI Studio/Components/PreviewReleaseCandidate.razor.cs	
@@ -2,4 +2,10 @@ using Microsoft.AspNetCore.Components;
 
 namespace AIStudio.Components;
 
-public partial class PreviewReleaseCandidate : ComponentBase;
\ No newline at end of file
+public partial class PreviewReleaseCandidate : ComponentBase
+{
+    [Parameter]
+    public bool ApplyInnerScrollingFix { get; set; }
+    
+    private string Classes => this.ApplyInnerScrollingFix ? "InnerScrollingFix" : string.Empty;
+}
\ No newline at end of file
diff --git a/app/MindWork AI Studio/Pages/Plugins.razor b/app/MindWork AI Studio/Pages/Plugins.razor
index 0174e2c9..41f18bc7 100644
--- a/app/MindWork AI Studio/Pages/Plugins.razor	
+++ b/app/MindWork AI Studio/Pages/Plugins.razor	
@@ -2,10 +2,10 @@
 @attribute [Route(Routes.PLUGINS)]
 
 <div class="inner-scrolling-context">
-    <MudText Typo="Typo.h3" Class="mb-12">
+    <MudText Typo="Typo.h3" Class="mb-2">
         Plugins
     </MudText>
-    <PreviewExperimental/>
+    <PreviewExperimental ApplyInnerScrollingFix="true"/>
     
     <InnerScrolling>
         <MudList T="string">
diff --git a/app/MindWork AI Studio/Pages/Writer.razor b/app/MindWork AI Studio/Pages/Writer.razor
index 6108647b..790e3e07 100644
--- a/app/MindWork AI Studio/Pages/Writer.razor	
+++ b/app/MindWork AI Studio/Pages/Writer.razor	
@@ -2,11 +2,10 @@
 @inherits MSGComponentBase
 
 <div class="inner-scrolling-context">
-    <MudText Typo="Typo.h3" Class="mb-2 mr-3">
+    <MudText Typo="Typo.h3" Class="mb-2">
         Writer
     </MudText>
-
-    <PreviewExperimental/>
+    <PreviewExperimental ApplyInnerScrollingFix="true"/>
 
     <ProviderSelection @bind-ProviderSettings="@this.providerSettings"/>
     <InnerScrolling>
diff --git a/app/MindWork AI Studio/wwwroot/app.css b/app/MindWork AI Studio/wwwroot/app.css
index 034123e5..8159e22c 100644
--- a/app/MindWork AI Studio/wwwroot/app.css	
+++ b/app/MindWork AI Studio/wwwroot/app.css	
@@ -45,6 +45,10 @@
     height: 200%;
 }
 
+.mud-popover-open.InnerScrollingFix {
+    left: 0 !important;
+}
+
 :root {
     --confidence-color: #000000;
 }
diff --git a/app/MindWork AI Studio/wwwroot/changelog/v0.9.39.md b/app/MindWork AI Studio/wwwroot/changelog/v0.9.39.md
index a3f49df3..94f9958e 100644
--- a/app/MindWork AI Studio/wwwroot/changelog/v0.9.39.md	
+++ b/app/MindWork AI Studio/wwwroot/changelog/v0.9.39.md	
@@ -1,4 +1,6 @@
 # v0.9.39, build 214 (2025-03-xx xx:xx UTC)
 - Added a feature flag for the plugin system. This flag is disabled by default and can be enabled inside the app settings. Please note that this feature is still in development; there are no plugins available yet.
 - Added the Lua library we use for the plugin system to the about page.
+- Added the plugin overview page. This page shows all installed plugins and allows you to enable or disable them. It is only available when the plugin preview feature is enabled.
+- Fixed the preview tooltip component not showing the correct position when used inside a scrollable container.
 - Upgraded to Rust 1.85.1
\ No newline at end of file