feat: wrap input only around CRT view (#69)

stid · Jan 29, 2024 · 2fbc545 · 2fbc545
1 parent cee07c1
commit 2fbc545
Showing 1 changed file with 41 additions and 40 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -51,50 +51,51 @@ const App = ({ worker }: Props): JSX.Element => {
 
     return (
         <ErrorBoundary>
-            <div onClick={focusHiddenInput}>
-                <div className="flex">
-                    <LayoutRow>
-                        <Title />
+            <div className="flex">
+                <LayoutRow>
+                    <Title />
+                    <div onClick={focusHiddenInput}>
                         <CRTWorker worker={worker} />
-                        <div className="p-0 mt-1">
-                            <Actions
-                                supportBS={supportBS}
-                                onReset={(e) => {
-                                    e.preventDefault();
-                                    worker.postMessage({ data: 'Tab', type: WORKER_MESSAGES.KEY_DOWN });
-                                }}
-                                onBS={(e) => {
-                                    e.preventDefault();
-                                    worker.postMessage({
-                                        data: !supportBS,
-                                        type: WORKER_MESSAGES.SET_CRT_BS_SUPPORT_FLAG,
-                                    });
-                                    setSupportBS(!supportBS);
-                                }}
-                                showDebug={showDebug}
-                                onShowDebug={(e) => {
-                                    e.preventDefault();
-                                    setShowDebug(!showDebug);
-                                }}
-                            />
-                        </div>
-                    </LayoutRow>
-                    <LayoutRow>
-                        <Info />
-                    </LayoutRow>
-                </div>
-                {showDebug && (
-                    <div className="flex">
-                        <Debugger worker={worker} />
                     </div>
-                )}
 
-                <input
-                    type="text"
-                    ref={hiddenInputRef}
-                    style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }}
-                />
+                    <div className="p-0 mt-1">
+                        <Actions
+                            supportBS={supportBS}
+                            onReset={(e) => {
+                                e.preventDefault();
+                                worker.postMessage({ data: 'Tab', type: WORKER_MESSAGES.KEY_DOWN });
+                            }}
+                            onBS={(e) => {
+                                e.preventDefault();
+                                worker.postMessage({
+                                    data: !supportBS,
+                                    type: WORKER_MESSAGES.SET_CRT_BS_SUPPORT_FLAG,
+                                });
+                                setSupportBS(!supportBS);
+                            }}
+                            showDebug={showDebug}
+                            onShowDebug={(e) => {
+                                e.preventDefault();
+                                setShowDebug(!showDebug);
+                            }}
+                        />
+                    </div>
+                </LayoutRow>
+                <LayoutRow>
+                    <Info />
+                </LayoutRow>
             </div>
+            {showDebug && (
+                <div className="flex">
+                    <Debugger worker={worker} />
+                </div>
+            )}
+
+            <input
+                type="text"
+                ref={hiddenInputRef}
+                style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }}
+            />
         </ErrorBoundary>
     );
 };