ui(trace): make drawer appear under action list (#27260)

packages/trace-viewer/src/ui/actionList.tsx

@@ -94,7 +94,7 @@ export const renderAction = (
   else if (!isLive)
     time = '-';
   return <>
-    <div className='action-title'>
+    <div className='action-title' title={action.apiName}>
       <span>{action.apiName}</span>
       {locator && <div className='action-selector' title={locator}>{locator}</div>}
       {action.method === 'goto' && action.params.url && <div className='action-url' title={action.params.url}>{action.params.url}</div>}

packages/trace-viewer/src/ui/uiModeView.tsx

@@ -498,7 +498,7 @@ const TestList: React.FC<{
     dataTestId='test-tree'
     render={treeItem => {
       return <div className='hbox ui-mode-list-item'>
-        <div className='ui-mode-list-item-title'>{treeItem.title}</div>
+        <div className='ui-mode-list-item-title' title={treeItem.title}>{treeItem.title}</div>
         {!!treeItem.duration && treeItem.status !== 'skipped' && <div className='ui-mode-list-item-time'>{msToString(treeItem.duration)}</div>}
         <Toolbar noMinHeight={true} noShadow={true}>
           <ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState}></ToolbarButton>

packages/trace-viewer/src/ui/workbench.tsx

@@ -193,8 +193,8 @@ export const Workbench: React.FunctionComponent<{
       selectedTime={selectedTime}
       setSelectedTime={setSelectedTime}
     />
-    <SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true} settingName='actionListSidebar'>
     <SplitView sidebarSize={250} orientation={sidebarLocation === 'bottom' ? 'vertical' : 'horizontal'} settingName='propertiesSidebar'>
+      <SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true} settingName='actionListSidebar'>
         <SnapshotTab
           action={activeAction}
           sdkLanguage={sdkLanguage}
@@ -203,28 +203,6 @@ export const Workbench: React.FunctionComponent<{
           setIsInspecting={setIsInspecting}
           highlightedLocator={highlightedLocator}
           setHighlightedLocator={locatorPicked} />
-        <TabbedPane
-          tabs={tabs}
-          selectedTab={selectedPropertiesTab}
-          setSelectedTab={selectPropertiesTab}
-          leftToolbar={[
-            <ToolbarButton title='Pick locator' icon='target' toggled={isInspecting} onClick={() => {
-              if (!isInspecting)
-                selectPropertiesTab('inspector');
-              setIsInspecting(!isInspecting);
-            }} />
-          ]}
-          rightToolbar={[
-            sidebarLocation === 'bottom' ?
-              <ToolbarButton title='Dock to right' icon='layout-sidebar-right-off' onClick={() => {
-                setSidebarLocation('right');
-              }} /> :
-              <ToolbarButton title='Dock to bottom' icon='layout-panel-off' onClick={() => {
-                setSidebarLocation('bottom');
-              }} />
-          ]}
-        />
-      </SplitView>
         <TabbedPane
           tabs={[
             {
@@ -250,5 +228,27 @@ export const Workbench: React.FunctionComponent<{
           ]}
           selectedTab={selectedNavigatorTab} setSelectedTab={setSelectedNavigatorTab}/>
       </SplitView>
+      <TabbedPane
+        tabs={tabs}
+        selectedTab={selectedPropertiesTab}
+        setSelectedTab={selectPropertiesTab}
+        leftToolbar={[
+          <ToolbarButton title='Pick locator' icon='target' toggled={isInspecting} onClick={() => {
+            if (!isInspecting)
+              selectPropertiesTab('inspector');
+            setIsInspecting(!isInspecting);
+          }} />
+        ]}
+        rightToolbar={[
+          sidebarLocation === 'bottom' ?
+            <ToolbarButton title='Dock to right' icon='layout-sidebar-right-off' onClick={() => {
+              setSidebarLocation('right');
+            }} /> :
+            <ToolbarButton title='Dock to bottom' icon='layout-panel-off' onClick={() => {
+              setSidebarLocation('bottom');
+            }} />
+        ]}
+      />
+    </SplitView>
   </div>;
 };