fix: layout crash (fixes #8)

Author: yeonjuan

src/App.tsx

@@ -60,7 +60,7 @@ export const App: FC = () => {
           </Col>
         </Row>
         <Row>
-          <Col>
+          <Col className="bottom-col">
             <Tabs>
               <Tab eventKey="rules" title="Rules">
                 <RuleConfig
@@ -77,7 +77,7 @@ export const App: FC = () => {
               </Tab>
             </Tabs>
           </Col>
-          <Col>
+          <Col className="bottom-col">
             {linter === null ? (
               <div>
                 <Spinner animation="border" role="status" variant="primary">

src/components/Fixed.tsx

@@ -1,8 +1,11 @@
 import React from "react";
 import type { FC } from "react";
+import "@/css/fixed.css";
 
 interface Props {
   code: string;
 }
 
-export const Fixed: FC<Props> = ({ code }) => <pre>{code}</pre>;
+export const Fixed: FC<Props> = ({ code }) => (
+  <pre className="fixed-code">{code}</pre>
+);

src/css/app.css

@@ -7,6 +7,9 @@ main {
 .row {
   margin-top: 20px;
 }
+.bottom-col {
+  overflow: auto;
+}
 .versions {
   float: right;
 }

src/css/fixed.css

@@ -0,0 +1,6 @@
+.fixed-code {
+  background: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px;
+}