recorder is not expanded on load

apps/remix-ide-e2e/src/tests/plugin_api.ts

@@ -230,7 +230,13 @@ module.exports = {
   },
 
   'Should get current files #group7': async function (browser: NightwatchBrowser) {
-    await clickAndCheckLog(browser, 'fileManager:readdir', { contracts: { isDirectory: true }, scripts: { isDirectory: true }, tests: { isDirectory: true }, 'README.txt': { isDirectory: false } }, null, '/')
+    await clickAndCheckLog(browser, 'fileManager:readdir', {
+      contracts: { isDirectory: true },
+      scripts: { isDirectory: true },
+      tests: { isDirectory: true },
+      'README.txt': { isDirectory: false },
+      'compiler_config.json': { isDirectory: false }
+    }, null, '/')
   },
   'Should throw error on current file #group7': async function (browser: NightwatchBrowser) {
     await clickAndCheckLog(browser, 'fileManager:getCurrentFile', 'Error from IDE : Error: No such file or directory No file selected', null, null)
@@ -280,7 +286,9 @@ module.exports = {
   'Should create empty workspace #group2': async function (browser: NightwatchBrowser) {
     await clickAndCheckLog(browser, 'filePanel:createWorkspace', null, null, ['emptyworkspace', true])
     await clickAndCheckLog(browser, 'filePanel:getCurrentWorkspace', { name: 'emptyworkspace', isLocalhost: false, absolutePath: '.workspaces/emptyworkspace' }, null, null)
-    await clickAndCheckLog(browser, 'fileManager:readdir', {}, null, '/')
+    await clickAndCheckLog(browser, 'fileManager:readdir', {
+      'compiler_config.json': { isDirectory: false }
+    }, null, '/')
   },
   'Should create workspace #group2': async function (browser: NightwatchBrowser) {
     await clickAndCheckLog(browser, 'filePanel:createWorkspace', null, null, 'testspace')

apps/remix-ide-e2e/src/tests/url.test.ts

@@ -97,6 +97,7 @@ module.exports = {
       .pause(5000)
       .clickLaunchIcon('solidity')
       .pause(5000)
+      .click('*[data-id="scConfigExpander"]')
       .assert.containsText('#versionSelector option[data-id="selected"]', 'custom')
     // default values
       .assert.containsText('#evmVersionSelector option[data-id="selected"]', 'default')

libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx

@@ -12,7 +12,7 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
 
   return (
     <div className="udapp_instanceContainer border-0 list-group-item">
-      <label className="h6 d-flex justify-content-between align-items-center pl-2 mb-2"
+      <label className="udapp_deployedContracts d-flex justify-content-between align-items-center pl-2 mb-0"
         title="Autogenerated generic user interfaces for interaction with deployed contracts">
         Deployed Contracts
         { instanceList.length > 0

libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx

@@ -3,7 +3,7 @@ import React, {useState} from 'react'
 import { RecorderProps } from '../types'
 
 export function RecorderUI (props: RecorderProps) {
-  const [toggleExpander, setToggleExpander] = useState<boolean>(true)
+  const [toggleExpander, setToggleExpander] = useState<boolean>(false)
   const triggerRecordButton = () => {
     props.storeScenario(props.scenarioPrompt)
   }
@@ -17,10 +17,10 @@ export function RecorderUI (props: RecorderProps) {
   }
 
   return (
-    <div className="udapp_cardContainer list-group-item border-0">
+    <div className="udapp_cardContainer list-group-item border border-bottom">
       <div className="udapp_recorderSection d-flex justify-content-between" onClick={toggleClass}>
         <div className="d-flex">
-          <label className="h6 udapp_recorderSection">Transactions recorded</label>
+          <label className="mt-1 udapp_recorderSectionLabel">Transactions recorded</label>
           <div className="ml-2 mb-2 badge badge-pill badge-primary" title="The number of recorded transactions">{props.count}</div>
         </div>
         <div>

libs/remix-ui/run-tab/src/lib/css/run-tab.css

@@ -60,6 +60,9 @@
   text-align: center;
   padding: 0 14px 16px;
 }
+.udapp_deployedContracts {
+  font-size: 1rem;
+}
 .udapp_pendingTxsContainer  {
   display: flex;
   flex-direction: column;
@@ -120,6 +123,12 @@
 }
 .udapp_recorderSection:hover {
   cursor: pointer;
+}.udapp_recorderSectionLabel:hover {
+  cursor: pointer;
+}
+.udapp_recorderSectionLabel {
+  cursor: pointer;
+  font-size: 1rem;
 }
 .udapp_input {
   font-size: 10px !important;

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -686,7 +686,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
         </div>
         <div className="d-flex px-4 remixui_compilerConfigSection justify-content-between" onClick={toggleConfigurations}>
           <div className="d-flex">
-            <label className="h6 remixui_compilerConfigSection">Advanced Configurations</label>
+            <label className="mt-1 remixui_compilerConfigSection">Advanced Configurations</label>
           </div>
           <div>
             <span data-id='scConfigExpander' onClick={toggleConfigurations}>

libs/remix-ui/solidity-compiler/src/lib/css/style.css

@@ -75,7 +75,7 @@
 .remixui_compilerConfigSection:hover {
   cursor: pointer;
 }
-. remixui_compilerConfigSection {
+.remixui_compilerConfigSection {
   font-size: 1rem;
 }
 .remixui_compilerLabel {