style(Dashboard): improve operator selection display

Signed-off-by: Jean-Baptiste Bianchi <jb.bianchi@neuroglia.io>

Author: JBBianchi

src/dashboard/Synapse.Dashboard/Components/CreateWorkflowInstanceDialog/CreateWorkflowInstanceDialog.razor

@@ -47,19 +47,24 @@
     </Tab>
 </Tabs>
 
-<div class="py-3">
-    @if (Operators != null && Operators.Count() > 0)
-    {
-        <select class="form-select m-2" @onchange="OnSelectOperatorChanged">
-            <option value="">Any Operator</option>
-            @foreach (var op in Operators)
+<Accordion class="py-3">
+        <AccordionItem Title="Advanced Settings">
+            <Content>
+            @if (Operators != null && Operators.Count() > 0)
             {
-                var name = op.GetName() + "." + op.GetNamespace();
-                <option value="@name" selected="@(name == operatorName)">@name</option>
+                <label for="operator">Select an Operator to run the Workflow:</label>
+                <select id="operator" class="form-select" @onchange="OnSelectOperatorChanged">
+                    <option value="">Any Operator</option>
+                    @foreach (var op in Operators)
+                    {
+                        var name = op.GetName() + "." + op.GetNamespace();
+                        <option value="@name" selected="@(name == operatorName)">@name</option>
+                    }
+                </select>
             }
-        </select>
-    }
-</div>
+        </Content>
+    </AccordionItem>
+</Accordion>
 
 <div class="text-center">
     <Button Outline="true" Color="ButtonColor.Primary" class="m-auto mt-3 w-100" @onclick="async _ => await OnStartAsync()">

src/dashboard/Synapse.Dashboard/Pages/Workflows/Create/View.razor

@@ -65,19 +65,24 @@ else
         </div>
     }
 
-    <div class="py-3">
-        @if (operators != null && operators.Count() > 0)
-        {
-            <select class="form-select m-2" @onchange="(e) => Store.SetOperator(e.Value?.ToString())">
-                <option value="">Any Operator</option>
-                @foreach (var op in operators)
-                {
-                    var name = op.GetName() + "." + op.GetNamespace();
-                    <option value="@name" selected="@(name == operatorName)">@name</option>
-                }
-            </select>
-        }
-    </div>
+    <Accordion class="py-3">
+        <AccordionItem Title="Advanced Settings">
+            <Content>
+            @if (operators != null && operators.Count() > 0)
+            {
+                <label for="operator">Select an Operator to run the Workflow:</label>
+                <select id="operator" class="form-select" @onchange="(e) => Store.SetOperator(e.Value?.ToString())">
+                    <option value="">Any Operator</option>
+                    @foreach (var op in operators)
+                    {
+                        var name = op.GetName() + "." + op.GetNamespace();
+                        <option value="@name" selected="@(name == operatorName)">@name</option>
+                    }
+                </select>
+             }
+            </Content>
+        </AccordionItem>
+    </Accordion>
 
     <Button class="mt-3" Color="ButtonColor.Primary" Outline="true" Disabled="saving" @onclick="async (_) => await Store.SaveWorkflowDefinitionAsync()">
         @if(!saving)