Fix cell and tab display

Author: risenW

src/frontend/components/Cell/index.tsx

@@ -82,12 +82,14 @@ const NoteBookCell = ({ cell }: { cell: NbCell }) => {
     }
 
     return (
-        <section>
-            <section className="grid grid-rows-1 text-right">
+        <section className="p-2">
+            <section className="col-span-12 text-right">
                 <CellOptionsBar cell={cell} />
             </section>
-            <section className="grid grid-cols-12">
-                <div className="col-span-1 text-right">
+            <section>
+                <div className="flex"
+                    onKeyPress={handleKeyPress}
+                >
                     {
                         cellIsRunning ? (
                             <LoadingButton loading ></LoadingButton>
@@ -102,13 +104,9 @@ const NoteBookCell = ({ cell }: { cell: NbCell }) => {
                             </IconButton>
                         )
                     }
-
-                </div>
-
-                <div className="col-span-11"
-                    onKeyPress={handleKeyPress}
-                >
                     <CellEditor cell={cell} />
+                </div>
+                <div className="flex ml-8">
                     <CellOutputRenderer cell={cell} />
                 </div>
 

src/frontend/components/NotebookTabPanel/index.tsx

@@ -10,18 +10,18 @@ export default function NotebookTabPanel() {
     const dispatch = useDispatch();
     const { notebooks } = useSelector((state: { app: AppState }) => state.app)
     const tabNames = Object.keys(notebooks)
-    const [value, setValue] = useState(0);
+    const [tabValue, setTabValue] = useState(0);
 
     const handleChange = (event: any, newValue: number) => {
         const currentNotebookTab = notebooks[event.target.innerText]
         dispatch(updateActiveNotebookName(currentNotebookTab.name));
-        setValue(newValue);
+        setTabValue(newValue);
     };
 
     return (
         <div className='col-span-12 border-l-2 ml-52'>
             <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                <Tabs value={tabValue} onChange={handleChange} aria-label="basic tabs example">
                     {
                         tabNames.map((name, i) => {
                             return <Tab style={{ textTransform: "none" }} key={i} label={name} />

src/frontend/pages/index.tsx

@@ -32,12 +32,14 @@ const Home: NextPage = () => {
             <MenuBar />
           </section>
 
-          <section style={{ height: "650px" }} className='grid grid-cols-12 p-2 overflow-y-scroll'>
+          <section style={{ height: "650px" }} className='grid overflow-y-scroll'>
             <div className='fixed'>
               <SideBar />
             </div>
-            <NotebookTabPanel />
-            <Notebook />
+            <div>
+              <NotebookTabPanel />
+              <Notebook />
+            </div>
           </section>
         </div>
       </div>