refactor: create separation between editor wrapper and contents

apps/client/src/features/control/playback/TimerControlExport.module.scss

@@ -0,0 +1,3 @@
+.content {
+  padding-top: $panel-top-padding;
+}

apps/client/src/features/control/playback/TimerControlExport.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-import { CornerExtract } from '../../../common/components/editor-utils/EditorUtils';
+import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import ErrorBoundary from '../../../common/components/error-boundary/ErrorBoundary';
 import ViewNavigationMenu from '../../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../../common/components/protect-route/ProtectRoute';
@@ -9,7 +9,7 @@ import { getIsNavigationLocked } from '../../../externals';
 
 import PlaybackControl from './PlaybackControl';
 
-import style from '../../../views/editor/Editor.module.scss';
+import style from './TimerControlExport.module.scss';
 
 export default memo(TimerControlExport);
 function TimerControlExport() {
@@ -17,8 +17,8 @@ function TimerControlExport() {
 
   return (
     <ProtectRoute permission='editor'>
-      <div className={style.playback} data-testid='panel-timer-control'>
-        {!isExtracted && <CornerExtract onClick={(event) => handleLinks('timercontrol', event)} />}
+      <Editor.Panel data-testid='panel-timer-control'>
+        {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('timercontrol', event)} />}
         {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
 
         <div className={style.content}>
@@ -26,7 +26,7 @@ function TimerControlExport() {
             <PlaybackControl />
           </ErrorBoundary>
         </div>
-      </div>
+      </Editor.Panel>
     </ProtectRoute>
   );
 }