fix floating toolbar linux anchoring

Author: KSemenenko

ci-workflows-release-pr-validation.plan.md

@@ -226,6 +226,10 @@ Root-cause note:
   - `PrompterLive.App.UITests.EditorFloatingToolbarLayoutTests.EditorScreen_FloatingToolbarStaysPinnedAfterFloatingFormatAction`
   - Root cause note: the test asserted `getBoundingClientRect().x/y` drift after the format action even though the production floating-toolbar contract preserves the inline/computed anchor (`left` and `top`) and the element itself is centered with `transform: translate(-50%, ...)`. Linux font/layout differences moved the rendered box without breaking the preserved anchor.
   - Intended fix path: assert the preserved computed anchor coordinates instead of bounding-box drift, and keep the visibility check after the floating action.
+- GitHub runs `23815986364` and `23815989928` showed the browser failures were not purely test-level:
+  - `EditorScreen_FloatingToolbarStaysPinnedAfterFloatingFormatAction` still failed because a late textarea `select` event could request a fresh floating-bar re-anchor after toolbar formatting on Linux.
+  - `EditorScreen_FloatingToolbarStaysAboveMultiLineSelection` failed because the visual floating-toolbar gap above the selected segment line was too tight for Linux font metrics.
+  - Intended fix path: preserve the existing floating-bar anchor when the refreshed DOM selection matches the already-tracked range, and increase the runtime floating-toolbar gap so the toolbar body clears multi-line selections consistently across platforms.
 - Local validation after the browser-suite stability fixes passed:
   - `dotnet build /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx -warnaserror`
   - `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.Core.Tests/PrompterLive.Core.Tests.csproj --no-build`
@@ -235,6 +239,11 @@ Root-cause note:
   - `dotnet build /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx -warnaserror`
   - `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.UITests/PrompterLive.App.UITests.csproj --no-build`
   - `dotnet format /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx`
+- Local validation after the runtime floating-toolbar fixes passed:
+  - `dotnet build /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx -warnaserror`
+  - `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.Tests/PrompterLive.App.Tests.csproj --no-build`
+  - `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.UITests/PrompterLive.App.UITests.csproj --no-build`
+  - `dotnet format /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx`
 
 ## Final Validation Skills And Commands
 

src/PrompterLive.Shared/Editor/Components/EditorSourcePanel.razor.cs

@@ -170,10 +170,25 @@ private async Task OnSelectionInteractionAsync()
 
     // A late textarea select event can arrive after a toolbar click and should
     // refresh selection state without dismissing the menu the user just opened.
-    private Task OnSourceSelectAsync()
+    private async Task OnSourceSelectAsync()
     {
-        RequestFloatingBarReanchor();
-        return RefreshSelectionAsync();
+        var selection = await RunSelectionInteropAsync(
+            () => Interop.GetSelectionAsync(_textareaRef),
+            RefreshSelectionFailureMessage);
+
+        if (selection is null)
+        {
+            return;
+        }
+
+        if (!_floatingBarAnchor.HasSelection || selection.Range != Selection.Range)
+        {
+            RequestFloatingBarReanchor();
+        }
+
+        await OnSelectionChanged.InvokeAsync(selection);
+        _syncScrollAfterRender = Selection.HasSelection || selection.HasSelection;
+        StateHasChanged();
     }
 
     private async Task OnSourceInputAsync(ChangeEventArgs args)

src/PrompterLive.Shared/Editor/Components/EditorSourcePanel.razor.css

@@ -41,7 +41,7 @@
 .ed-source-error{margin:0 48px 24px;padding:12px 16px;border-radius:10px;border:1px solid rgba(255,138,138,.22);background:rgba(255,96,96,.08);color:#FFB3B3;font-size:13px;line-height:1.5;}
 .ed-statusbar{display:flex;gap:24px;padding:8px 28px;background:transparent;border-top:1px solid var(--gold-06);font-size:13px;color:#7A8E88;flex-shrink:0;font-family:var(--mono);border-radius:0 0 var(--r2) var(--r2);}
 
-.ed-float-bar{--ed-floatbar-gap:8px;position:absolute;left:50%;top:0;bottom:auto;transform:translate(-50%,calc(-100% - var(--ed-floatbar-gap)));z-index:300;display:inline-flex;align-items:center;gap:3px;background:rgba(12,16,28,.72);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid rgba(212,176,112,.22);border-top:1px solid rgba(212,176,112,.30);border-radius:12px;padding:5px 8px;width:max-content;box-shadow:0 8px 32px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06),0 0 20px rgba(212,176,112,.06);white-space:nowrap;animation:floatBarIn .18s ease-out;}
+.ed-float-bar{--ed-floatbar-gap:14px;position:absolute;left:50%;top:0;bottom:auto;transform:translate(-50%,calc(-100% - var(--ed-floatbar-gap)));z-index:300;display:inline-flex;align-items:center;gap:3px;background:rgba(12,16,28,.72);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid rgba(212,176,112,.22);border-top:1px solid rgba(212,176,112,.30);border-radius:12px;padding:5px 8px;width:max-content;box-shadow:0 8px 32px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06),0 0 20px rgba(212,176,112,.06);white-space:nowrap;animation:floatBarIn .18s ease-out;}
 .ed-float-bar::after{content:"";position:absolute;bottom:-5px;left:50%;width:10px;height:10px;background:rgba(12,16,28,.72);border-right:1px solid rgba(212,176,112,.18);border-bottom:1px solid rgba(212,176,112,.18);transform:translateX(-50%) rotate(45deg);}
 .efb-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;font-size:13px;font-weight:500;color:#9AABA4;background:transparent;border-radius:7px;font-family:var(--font);height:30px;}
 .efb-btn:hover{background:var(--gold-09);color:#ECF0EE;}