diff --git a/frontend/src/Editor/Inspector/EventManager.jsx b/frontend/src/Editor/Inspector/EventManager.jsx
index fb91b1347f..2bcc7a790b 100644
--- a/frontend/src/Editor/Inspector/EventManager.jsx
+++ b/frontend/src/Editor/Inspector/EventManager.jsx
@@ -418,7 +418,7 @@ export const EventManager = ({
           }}
         >
           <div className="row">
-            <div className="p-2 col-3">
+            <div className="col-3 p-2">
               <span data-cy="event-label">{t('editor.inspector.eventManager.event', 'Event')}</span>
             </div>
             <div className="col-9" data-cy="event-selection">
@@ -435,8 +435,8 @@ export const EventManager = ({
               />
             </div>
           </div>
-          <div className="mt-3 row">
-            <div className="p-2 col-3">
+          <div className="row mt-3">
+            <div className="col-3 p-2">
               <span data-cy="action-label">{t('editor.inspector.eventManager.action', 'Action')}</span>
             </div>
             <div className="col-9 popover-action-select-search" data-cy="action-selection">
@@ -454,8 +454,8 @@ export const EventManager = ({
             </div>
           </div>
 
-          <div className="mt-3 row">
-            <div className="p-2 col-3" data-cy="alert-type-label">
+          <div className="row mt-3">
+            <div className="col-3 p-2" data-cy="alert-type-label">
               {t('editor.inspector.eventManager.runOnlyIf', 'Run Only If')}
             </div>
             <div className="col-9" data-cy="alert-message-type">
@@ -478,7 +478,7 @@ export const EventManager = ({
             {event.actionId === 'show-alert' && (
               <>
                 <div className="row">
-                  <div className="p-2 col-3" data-cy="message-label">
+                  <div className="col-3 p-2" data-cy="message-label">
                     {t('editor.inspector.eventManager.message', 'Message')}
                   </div>
                   <div className="col-9" data-cy="alert-message-input-field">
@@ -492,8 +492,8 @@ export const EventManager = ({
                     />
                   </div>
                 </div>
-                <div className="mt-3 row">
-                  <div className="p-2 col-3" data-cy="alert-type-label">
+                <div className="row mt-3">
+                  <div className="col-3 p-2" data-cy="alert-type-label">
                     {t('editor.inspector.eventManager.alertType', 'Alert Type')}
                   </div>
                   <div className="col-9" data-cy="alert-message-type">
@@ -515,7 +515,7 @@ export const EventManager = ({
 
             {event.actionId === 'open-webpage' && (
               <div className="p-1">
-                <label className="mt-1 form-label">{t('editor.inspector.eventManager.url', 'URL')}</label>
+                <label className="form-label mt-1">{t('editor.inspector.eventManager.url', 'URL')}</label>
                 <CodeHinter
                   type="basic"
                   initialValue={event.url}
@@ -538,7 +538,7 @@ export const EventManager = ({
 
             {event.actionId === 'show-modal' && (
               <div className="row">
-                <div className="p-2 col-3">{t('editor.inspector.eventManager.modal', 'Modal')}</div>
+                <div className="col-3 p-2">{t('editor.inspector.eventManager.modal', 'Modal')}</div>
                 <div className="col-9">
                   <Select
                     className={`${darkMode ? 'select-search-dark' : 'select-search'} w-100`}
@@ -559,7 +559,7 @@ export const EventManager = ({
 
             {event.actionId === 'close-modal' && (
               <div className="row">
-                <div className="p-2 col-3">{t('editor.inspector.eventManager.modal', 'Modal')}</div>
+                <div className="col-3 p-2">{t('editor.inspector.eventManager.modal', 'Modal')}</div>
                 <div className="col-9">
                   <Select
                     className={`${darkMode ? 'select-search-dark' : 'select-search'} w-100`}
@@ -580,7 +580,7 @@ export const EventManager = ({
 
             {event.actionId === 'copy-to-clipboard' && (
               <div className="p-1">
-                <label className="mt-1 form-label">{t('editor.inspector.eventManager.text', 'Text')}</label>
+                <label className="form-label mt-1">{t('editor.inspector.eventManager.text', 'Text')}</label>
                 <CodeHinter
                   type="basic"
                   initialValue={event.contentToCopy}
@@ -594,7 +594,7 @@ export const EventManager = ({
             {event.actionId === 'run-query' && (
               <>
                 <div className="row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.query', 'Query')}</div>
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.query', 'Query')}</div>
                   <div className="col-9" data-cy="query-selection-field">
                     <Select
                       className={`${darkMode ? 'select-search-dark' : 'select-search'} w-100`}
@@ -634,7 +634,7 @@ export const EventManager = ({
             {event.actionId === 'set-localstorage-value' && (
               <>
                 <div className="row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.key', 'Key')}</div>
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.key', 'Key')}</div>
                   <div className="col-9">
                     <CodeHinter
                       type="basic"
@@ -645,8 +645,8 @@ export const EventManager = ({
                     />
                   </div>
                 </div>
-                <div className="mt-3 row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.value', 'Value')}</div>
+                <div className="row mt-3">
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.value', 'Value')}</div>
                   <div className="col-9">
                     <CodeHinter
                       type="basic"
@@ -662,7 +662,7 @@ export const EventManager = ({
             {event.actionId === 'generate-file' && (
               <>
                 <div className="row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.type', 'Type')}</div>
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.type', 'Type')}</div>
                   <div className="col-9">
                     <Select
                       className={`${darkMode ? 'select-search-dark' : 'select-search'} w-100`}
@@ -683,8 +683,8 @@ export const EventManager = ({
                     />
                   </div>
                 </div>
-                <div className="mt-3 row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.fileName', 'File name')}</div>
+                <div className="row mt-3">
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.fileName', 'File name')}</div>
                   <div className="col-9">
                     <CodeHinter
                       type="basic"
@@ -694,8 +694,8 @@ export const EventManager = ({
                     />
                   </div>
                 </div>
-                <div className="mt-3 row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.data', 'Data')}</div>
+                <div className="row mt-3">
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.data', 'Data')}</div>
                   <div className="col-9">
                     <CodeHinter
                       type="basic"
@@ -710,7 +710,7 @@ export const EventManager = ({
             {event.actionId === 'set-table-page' && (
               <>
                 <div className="row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.table', 'Table')}</div>
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.table', 'Table')}</div>
                   <div className="col-9">
                     <Select
                       className={`${darkMode ? 'select-search-dark' : 'select-search'} w-100`}
@@ -727,8 +727,8 @@ export const EventManager = ({
                     />
                   </div>
                 </div>
-                <div className="mt-3 row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.pageIndex', 'Page index')}</div>
+                <div className="row mt-3">
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.pageIndex', 'Page index')}</div>
                   <div className="col-9">
                     <CodeHinter
                       type="basic"
@@ -744,7 +744,7 @@ export const EventManager = ({
             {event.actionId === 'set-custom-variable' && (
               <>
                 <div className="row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.key', 'Key')}</div>
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.key', 'Key')}</div>
                   <div className="col-9">
                     <CodeHinter
                       type="basic"
@@ -756,8 +756,8 @@ export const EventManager = ({
                     />
                   </div>
                 </div>
-                <div className="mt-3 row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.value', 'Value')}</div>
+                <div className="row mt-3">
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.value', 'Value')}</div>
                   <div className="col-9">
                     <CodeHinter
                       type="basic"
@@ -773,7 +773,7 @@ export const EventManager = ({
             {event.actionId === 'unset-custom-variable' && (
               <>
                 <div className="row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.key', 'Key')}</div>
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.key', 'Key')}</div>
                   <div className="col-9">
                     <CodeHinter
                       type="basic"
@@ -788,7 +788,7 @@ export const EventManager = ({
             {event.actionId === 'set-page-variable' && (
               <>
                 <div className="row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.key', 'Key')}</div>
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.key', 'Key')}</div>
                   <div className="col-9">
                     <CodeHinter
                       type="basic"
@@ -799,8 +799,8 @@ export const EventManager = ({
                     />
                   </div>
                 </div>
-                <div className="mt-3 row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.value', 'Value')}</div>
+                <div className="row mt-3">
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.value', 'Value')}</div>
                   <div className="col-9">
                     <CodeHinter
                       type="basic"
@@ -816,7 +816,7 @@ export const EventManager = ({
             {event.actionId === 'unset-page-variable' && (
               <>
                 <div className="row">
-                  <div className="p-2 col-3">{t('editor.inspector.eventManager.key', 'Key')}</div>
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.key', 'Key')}</div>
                   <div className="col-9">
                     <CodeHinter
                       type="basic"
@@ -841,7 +841,7 @@ export const EventManager = ({
             {event.actionId === 'control-component' && (
               <>
                 <div className="row">
-                  <div className="p-1 col-3" data-cy="action-options-component-field-label">
+                  <div className="col-3 p-1" data-cy="action-options-component-field-label">
                     {t('editor.inspector.eventManager.component', 'Component')}
                   </div>
                   <div className="col-9" data-cy="action-options-component-selection-field">
@@ -860,8 +860,8 @@ export const EventManager = ({
                     />
                   </div>
                 </div>
-                <div className="mt-2 row">
-                  <div className="p-1 col-3" data-cy="action-options-action-field-label">
+                <div className="row mt-2">
+                  <div className="col-3 p-1" data-cy="action-options-action-field-label">
                     {t('editor.inspector.eventManager.action', 'Action')}
                   </div>
                   <div className="col-9" data-cy="action-options-action-selection-field">
@@ -883,8 +883,8 @@ export const EventManager = ({
                 {event?.componentId &&
                   event?.componentSpecificActionHandle &&
                   (getAction(event?.componentId, event?.componentSpecificActionHandle)?.params ?? []).map((param) => (
-                    <div className="mt-2 row" key={param.handle}>
-                      <div className="p-1 col-3" data-cy={`action-options-${param?.displayName}-field-label`}>
+                    <div className="row mt-2" key={param.handle}>
+                      <div className="col-3 p-1" data-cy={`action-options-${param?.displayName}-field-label`}>
                         {param?.displayName}
                       </div>
                       {param.type === 'select' ? (
@@ -929,8 +929,8 @@ export const EventManager = ({
                   ))}
               </>
             )}
-            <div className="mt-3 row">
-              <div className="p-2 col-3">{t('editor.inspector.eventManager.debounce', 'Debounce')}</div>
+            <div className="row mt-3">
+              <div className="col-3 p-2">{t('editor.inspector.eventManager.debounce', 'Debounce')}</div>
               <div className="col-9">
                 <CodeHinter
                   type="basic"