From 470e6e528f847c65c769cd92f16853ee1bcb848c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bianchi <jb.bianchi@neuroglia.io>
Date: Mon, 18 Aug 2025 14:46:43 +0200
Subject: [PATCH] fix(Dashboard): prevent table rows from overlapping title and
 filters when scrolling

Signed-off-by: Jean-Baptiste Bianchi <jb.bianchi@neuroglia.io>
---
 .../WorkflowInstancesList.razor               | 92 ++++++++++---------
 .../Pages/Correlations/List/View.razor        | 46 +++++-----
 .../Pages/Correlators/List/View.razor         | 46 +++++-----
 .../Pages/Functions/List/View.razor           | 26 +++---
 .../Pages/Namespaces/List/View.razor          | 26 +++---
 .../Pages/Operators/List/View.razor           | 46 +++++-----
 .../Pages/ServiceAccounts/List/View.razor     | 46 +++++-----
 .../Pages/Workflows/List/View.razor           | 66 ++++++-------
 8 files changed, 198 insertions(+), 196 deletions(-)

diff --git a/src/dashboard/Synapse.Dashboard/Components/WorkflowInstancesList/WorkflowInstancesList.razor b/src/dashboard/Synapse.Dashboard/Components/WorkflowInstancesList/WorkflowInstancesList.razor
index 885ce59f..dd4043ea 100644
--- a/src/dashboard/Synapse.Dashboard/Components/WorkflowInstancesList/WorkflowInstancesList.razor
+++ b/src/dashboard/Synapse.Dashboard/Components/WorkflowInstancesList/WorkflowInstancesList.razor
@@ -16,56 +16,58 @@
 @namespace Synapse.Dashboard.Components
 @inject JSInterop jsInterop
 
+<div class="d-flex flex-row justify-content-between align-items-center">
+    @Title
+    <span>@(WorkflowInstances?.Count() ?? 0) items</span>
+    <div class="d-flex">
+        @if (Workflows != null && Workflows.Count() > 0)
+        {
+            <select class="form-select m-2" @onchange="OnSelectWorkflowChangedAsync">
+                <option value="">All workflows</option>
+                @foreach (var workflowResource in Workflows)
+                {
+                    <option value="@workflowResource.GetQualifiedName()">@workflowResource.GetQualifiedName()</option>
+                }
+            </select>
+        }
+        @if (Namespaces != null && Namespaces.Count() > 0)
+        {
+            <select class="form-select m-2" @onchange="OnSelectNamespaceChangedAsync">
+                <option value="">All namespaces</option>
+                @foreach (var namespaceResource in Namespaces)
+                {
+                    <option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
+                }
+            </select>
+        }
+        @if (Operators != null && Operators.Count() > 0)
+        {
+            <select class="form-select m-2" @onchange="OnSelectOperatorChangedAsync">
+                <option value="">All operators</option>
+                @foreach (var operatorResource in Operators)
+                {
+                    var name = operatorResource.GetName() + "." + operatorResource.GetNamespace();
+                    <option value="@name" selected="@(name == operatorName)">@name</option>
+                }
+            </select>
+        }
+        <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" @oninput="OnSearchInputAsync" />
+        <div class="dropdown d-flex align-content-center">
+            <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
+            <ul class="dropdown-menu">
+                <li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnSuspendSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Pause" /> Suspend selected</button></li>
+                <li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnResumeSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Play" /> Resume selected</button></li>
+                <li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnCancelSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.X" /> Cancel selected</button></li>
+                <li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "text-danger")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnDeleteSelected" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</button></li>
+            </ul>
+        </div>
+    </div>
+</div>
 <div class="table-container @ClassNames">
     @if (Loading)
     {
         <Loader />
     }
-    <div class="d-flex flex-row justify-content-between align-items-center">
-        @Title
-        <span>@(WorkflowInstances?.Count() ?? 0) items</span>
-        <div class="d-flex">
-            @if (Workflows != null && Workflows.Count() > 0) {
-                <select class="form-select m-2" @onchange="OnSelectWorkflowChangedAsync">
-                    <option value="">All workflows</option>
-                    @foreach (var workflowResource in Workflows)
-                    {
-                        <option value="@workflowResource.GetQualifiedName()">@workflowResource.GetQualifiedName()</option>
-                    }
-                </select>
-            }
-            @if (Namespaces != null && Namespaces.Count() > 0) {
-                <select class="form-select m-2" @onchange="OnSelectNamespaceChangedAsync">
-                    <option value="">All namespaces</option>
-                    @foreach (var namespaceResource in Namespaces)
-                    {
-                        <option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
-                    }
-                </select>
-            }
-            @if (Operators != null && Operators.Count() > 0)
-            {
-                <select class="form-select m-2" @onchange="OnSelectOperatorChangedAsync">
-                    <option value="">All operators</option>
-                    @foreach (var operatorResource in Operators)
-                    {
-                        var name = operatorResource.GetName() + "." + operatorResource.GetNamespace();
-                        <option value="@name" selected="@(name == operatorName)">@name</option>
-                    }
-                </select>
-            }
-            <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" @oninput="OnSearchInputAsync" />
-            <div class="dropdown d-flex align-content-center">
-                <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
-                <ul class="dropdown-menu">
-                    <li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnSuspendSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Pause" /> Suspend selected</button></li>
-                    <li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnResumeSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Play" /> Resume selected</button></li>
-                    <li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnCancelSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.X" /> Cancel selected</button></li>
-                    <li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "text-danger")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnDeleteSelected" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</button></li>
-                </ul>
-            </div>
-        </div>
-    </div>
     <table class="table table-hover">
         <thead>
             <tr>
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Correlations/List/View.razor b/src/dashboard/Synapse.Dashboard/Pages/Correlations/List/View.razor
index 2e4ecdd3..b9b10f98 100644
--- a/src/dashboard/Synapse.Dashboard/Pages/Correlations/List/View.razor
+++ b/src/dashboard/Synapse.Dashboard/Pages/Correlations/List/View.razor
@@ -6,34 +6,34 @@
 
 <ApplicationTitle>Correlations</ApplicationTitle>
 
+<div class="d-flex flex-row justify-content-between align-items-center">
+    <h4>Correlations</h4>
+    <span>@(Resources?.Count ?? 0) items</span>
+    <div class="d-flex">
+        <select class="form-select m-2" @onchange="OnNamespaceChanged">
+            <option value="">All namespaces</option>
+            @if (Namespaces != null && Namespaces.Count > 0)
+            {
+                foreach (var namespaceResource in Namespaces)
+                {
+                    <option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
+                }
+            }
+        </select>
+        <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
+        <div class="dropdown d-flex align-content-center">
+            <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
+            <ul class="dropdown-menu">
+                <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await(SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
 <div class="table-container">
     @if (Loading)
     {
         <Loader />
     }
-    <div class="d-flex flex-row justify-content-between align-items-center">
-        <h4>Correlations</h4>
-        <span>@(Resources?.Count ?? 0) items</span>
-        <div class="d-flex">
-            <select class="form-select m-2" @onchange="OnNamespaceChanged">
-                <option value="">All namespaces</option>
-                @if (Namespaces != null && Namespaces.Count > 0)
-                {
-                    foreach (var namespaceResource in Namespaces)
-                    {
-                        <option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
-                    }
-                }
-            </select>
-            <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
-            <div class="dropdown d-flex align-content-center">
-                <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
-                <ul class="dropdown-menu">
-                    <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await (SelectedResourceNames.Count == 0 ?  Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
-                </ul>
-            </div>
-        </div>
-    </div>
     <table class="table table-hover">
         <thead>
             <tr>
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Correlators/List/View.razor b/src/dashboard/Synapse.Dashboard/Pages/Correlators/List/View.razor
index 3d1ea68d..790cd719 100644
--- a/src/dashboard/Synapse.Dashboard/Pages/Correlators/List/View.razor
+++ b/src/dashboard/Synapse.Dashboard/Pages/Correlators/List/View.razor
@@ -22,34 +22,34 @@
 
 <ApplicationTitle>Correlators</ApplicationTitle>
 
+<div class="d-flex flex-row justify-content-between align-items-center">
+    <h4>Correlators</h4>
+    <span>@(Resources?.Count ?? 0) items</span>
+    <div class="d-flex">
+        <select class="form-select m-2" @onchange="OnNamespaceChanged">
+            <option value="">All namespaces</option>
+            @if (Namespaces != null && Namespaces.Count > 0)
+            {
+                foreach (var namespaceResource in Namespaces)
+                {
+                    <option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
+                }
+            }
+        </select>
+        <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
+        <div class="dropdown d-flex align-content-center">
+            <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
+            <ul class="dropdown-menu">
+                <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await(SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
 <div class="table-container">
     @if (Loading)
     {
         <Loader />
     }
-    <div class="d-flex flex-row justify-content-between align-items-center">
-        <h4>Correlators</h4>
-        <span>@(Resources?.Count ?? 0) items</span>
-        <div class="d-flex">
-            <select class="form-select m-2" @onchange="OnNamespaceChanged">
-                <option value="">All namespaces</option>
-                @if (Namespaces != null && Namespaces.Count > 0)
-                {
-                    foreach (var namespaceResource in Namespaces)
-                    {
-                        <option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
-                    }
-                }
-            </select>
-            <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
-            <div class="dropdown d-flex align-content-center">
-                <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
-                <ul class="dropdown-menu">
-                    <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await (SelectedResourceNames.Count == 0 ?  Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
-                </ul>
-            </div>
-        </div>
-    </div>
     <table class="table table-hover">
         <thead>
             <tr>
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Functions/List/View.razor b/src/dashboard/Synapse.Dashboard/Pages/Functions/List/View.razor
index 36440432..57083c0a 100644
--- a/src/dashboard/Synapse.Dashboard/Pages/Functions/List/View.razor
+++ b/src/dashboard/Synapse.Dashboard/Pages/Functions/List/View.razor
@@ -24,24 +24,24 @@
 
 <ApplicationTitle>Custom Functions</ApplicationTitle>
 
+<div class="d-flex flex-row justify-content-between align-items-center">
+    <h4>Custom Functions</h4>
+    <span>@(Resources?.Count ?? 0) items</span>
+    <div class="d-flex">
+        <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
+        <div class="dropdown d-flex align-content-center">
+            <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
+            <ul class="dropdown-menu">
+                <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await(SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
 <div class="table-container">
     @if (Loading)
     {
         <Loader />
     }
-    <div class="d-flex flex-row justify-content-between align-items-center">
-        <h4>Custom Functions</h4>
-        <span>@(Resources?.Count ?? 0) items</span>
-        <div class="d-flex">
-            <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
-            <div class="dropdown d-flex align-content-center">
-                <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
-                <ul class="dropdown-menu">
-                    <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await (SelectedResourceNames.Count == 0 ?  Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
-                </ul>
-            </div>
-        </div>
-    </div>
     <table class="table table-hover">
         <thead>
             <tr>
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Namespaces/List/View.razor b/src/dashboard/Synapse.Dashboard/Pages/Namespaces/List/View.razor
index 20614830..32f083b8 100644
--- a/src/dashboard/Synapse.Dashboard/Pages/Namespaces/List/View.razor
+++ b/src/dashboard/Synapse.Dashboard/Pages/Namespaces/List/View.razor
@@ -22,24 +22,24 @@
 
 <ApplicationTitle>Namespaces</ApplicationTitle>
 
+<div class="d-flex flex-row justify-content-between align-items-center">
+    <h4>Namespaces</h4>
+    <span>@(Resources?.Count ?? 0) items</span>
+    <div class="d-flex">
+        <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
+    </div>
+    <div class="dropdown d-flex align-content-center">
+        <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
+        <ul class="dropdown-menu">
+            <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await(SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
+        </ul>
+    </div>
+</div>
 <div class="table-container">
     @if (Loading)
     {
         <Loader />
     }
-    <div class="d-flex flex-row justify-content-between align-items-center">
-        <h4>Namespaces</h4>
-        <span>@(Resources?.Count ?? 0) items</span>
-        <div class="d-flex">
-            <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
-        </div>
-        <div class="dropdown d-flex align-content-center">
-            <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
-            <ul class="dropdown-menu">
-                <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await (SelectedResourceNames.Count == 0 ?  Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
-            </ul>
-        </div>
-    </div>
     <table class="table table-hover">
         <thead>
             <tr>
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Operators/List/View.razor b/src/dashboard/Synapse.Dashboard/Pages/Operators/List/View.razor
index 7f453ab9..5d757f34 100644
--- a/src/dashboard/Synapse.Dashboard/Pages/Operators/List/View.razor
+++ b/src/dashboard/Synapse.Dashboard/Pages/Operators/List/View.razor
@@ -22,34 +22,34 @@
 
 <ApplicationTitle>Operators</ApplicationTitle>
 
+<div class="d-flex flex-row justify-content-between align-items-center">
+    <h4>Operators</h4>
+    <span>@(Resources?.Count ?? 0) items</span>
+    <div class="d-flex">
+        <select class="form-select m-2" @onchange="OnNamespaceChanged">
+            <option value="">All namespaces</option>
+            @if (Namespaces != null && Namespaces.Count > 0)
+            {
+                foreach (var namespaceResource in Namespaces)
+                {
+                    <option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
+                }
+            }
+        </select>
+        <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
+        <div class="dropdown d-flex align-content-center">
+            <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
+            <ul class="dropdown-menu">
+                <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await(SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
 <div class="table-container">
     @if (Loading)
     {
         <Loader />
     }
-    <div class="d-flex flex-row justify-content-between align-items-center">
-        <h4>Operators</h4>
-        <span>@(Resources?.Count ?? 0) items</span>
-        <div class="d-flex">
-            <select class="form-select m-2" @onchange="OnNamespaceChanged">
-                <option value="">All namespaces</option>
-                @if (Namespaces != null && Namespaces.Count > 0)
-                {
-                    foreach (var namespaceResource in Namespaces)
-                    {
-                        <option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
-                    }
-                }
-            </select>
-            <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
-            <div class="dropdown d-flex align-content-center">
-                <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
-                <ul class="dropdown-menu">
-                    <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await (SelectedResourceNames.Count == 0 ?  Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
-                </ul>
-            </div>
-        </div>
-    </div>
     <table class="table table-hover">
         <thead>
             <tr>
diff --git a/src/dashboard/Synapse.Dashboard/Pages/ServiceAccounts/List/View.razor b/src/dashboard/Synapse.Dashboard/Pages/ServiceAccounts/List/View.razor
index ae7b5438..bd9a9ea5 100644
--- a/src/dashboard/Synapse.Dashboard/Pages/ServiceAccounts/List/View.razor
+++ b/src/dashboard/Synapse.Dashboard/Pages/ServiceAccounts/List/View.razor
@@ -22,34 +22,34 @@
 
 <ApplicationTitle>Service Accounts</ApplicationTitle>
 
+<div class="d-flex flex-row justify-content-between align-items-center">
+    <h4>Service Accounts</h4>
+    <span>@(Resources?.Count ?? 0) items</span>
+    <div class="d-flex">
+        <select class="form-select m-2" @onchange="OnNamespaceChanged">
+            <option value="">All namespaces</option>
+            @if (Namespaces != null && Namespaces.Count > 0)
+            {
+                foreach (var namespaceResource in Namespaces)
+                {
+                    <option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
+                }
+            }
+        </select>
+        <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
+        <div class="dropdown d-flex align-content-center">
+            <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
+            <ul class="dropdown-menu">
+                <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await(SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
 <div class="table-container">
     @if (Loading)
     {
         <Loader />
     }
-    <div class="d-flex flex-row justify-content-between align-items-center">
-        <h4>Service Accounts</h4>
-        <span>@(Resources?.Count ?? 0) items</span>
-        <div class="d-flex">
-            <select class="form-select m-2" @onchange="OnNamespaceChanged">
-                <option value="">All namespaces</option>
-                @if (Namespaces != null && Namespaces.Count > 0)
-                {
-                    foreach (var namespaceResource in Namespaces)
-                    {
-                        <option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
-                    }
-                }
-            </select>
-            <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
-            <div class="dropdown d-flex align-content-center">
-                <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
-                <ul class="dropdown-menu">
-                    <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await (SelectedResourceNames.Count == 0 ?  Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
-                </ul>
-            </div>
-        </div>
-    </div>
     <table class="table table-hover">
         <thead>
             <tr>
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Workflows/List/View.razor b/src/dashboard/Synapse.Dashboard/Pages/Workflows/List/View.razor
index 75cb7fea..7e8989d2 100644
--- a/src/dashboard/Synapse.Dashboard/Pages/Workflows/List/View.razor
+++ b/src/dashboard/Synapse.Dashboard/Pages/Workflows/List/View.razor
@@ -25,45 +25,45 @@
 
 <ApplicationTitle>Workflows</ApplicationTitle>
 
-<div class="table-container">
-    @if (Loading)
-    {
-        <Loader />
-    }
-    <div class="d-flex flex-row justify-content-between align-items-center">
-        <h4>Workflows</h4>
-        <span>@(Resources?.Count ?? 0) items</span>
-        <div class="d-flex">
-            <select class="form-select m-2" @onchange="OnNamespaceChanged">
-                <option value="">All namespaces</option>
-                @if (Namespaces != null && Namespaces.Count > 0)
+<div class="d-flex flex-row justify-content-between align-items-center">
+    <h4>Workflows</h4>
+    <span>@(Resources?.Count ?? 0) items</span>
+    <div class="d-flex">
+        <select class="form-select m-2" @onchange="OnNamespaceChanged">
+            <option value="">All namespaces</option>
+            @if (Namespaces != null && Namespaces.Count > 0)
+            {
+                foreach (var namespaceResource in Namespaces)
                 {
-                    foreach (var namespaceResource in Namespaces)
-                    {
-                        <option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
-                    }
+                    <option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
                 }
-            </select>
-            <select class="form-select m-2" @onchange="(e) => Store.SetOperator(e.Value?.ToString())">
-                <option value="">All operators</option>
-                @if (Operators != null && Operators.Count > 0)
+            }
+        </select>
+        <select class="form-select m-2" @onchange="(e) => Store.SetOperator(e.Value?.ToString())">
+            <option value="">All operators</option>
+            @if (Operators != null && Operators.Count > 0)
+            {
+                foreach (var operatorResource in Operators)
                 {
-                    foreach (var operatorResource in Operators)
-                    {
-                        var operatorName = operatorResource.GetName() + "." + operatorResource.GetNamespace();
-                        <option value="@operatorName" selected="@(@operatorName == Operator)">@operatorName</option>
-                    }
+                    var operatorName = operatorResource.GetName() + "." + operatorResource.GetNamespace();
+                    <option value="@operatorName" selected="@(@operatorName == Operator)">@operatorName</option>
                 }
-            </select>
-            <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
-            <div class="dropdown d-flex align-content-center">
-                <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
-                <ul class="dropdown-menu">
-                    <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await (SelectedResourceNames.Count == 0 ?  Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
-                </ul>
-            </div>
+            }
+        </select>
+        <input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
+        <div class="dropdown d-flex align-content-center">
+            <button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
+            <ul class="dropdown-menu">
+                <li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await(SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
+            </ul>
         </div>
     </div>
+</div>
+<div class="table-container">
+    @if (Loading)
+    {
+        <Loader />
+    }
     <table class="table table-hover">
         <thead>
             <tr>