css

src/components/canvas.jsx

@@ -235,8 +235,8 @@ export default function Canvas(props) {
   );
 
   return (
-    <div ref={drop} className="flex-grow" id="canvas" >
-      <div ref={canvas} className="w-full h-screen">
+    <div ref={drop} className="flex-grow h-full" id="canvas">
+      <div ref={canvas} className="w-full h-full">
         <svg
           onMouseMove={handleMouseMove}
           onMouseDown={handleMouseDown}

src/components/control_panel.jsx

@@ -236,9 +236,9 @@ export default function ControlPanel(props) {
   };
 
   return (
-    <>
+    <div>
       {props.layout.header && header()}
-      <div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700 select-none">
+      <div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 sm:mx-1 md:mx-6 text-slate-700 select-none overflow-x-hidden">
         <div className="flex justify-start items-center">
           {layoutDropdown()}
           <Divider layout="vertical" margin="8px" />
@@ -276,8 +276,9 @@ export default function ControlPanel(props) {
             }
             trigger="click"
           >
-            <div className="py-1 px-2 hover:bg-slate-200 rounded">
-              zoom <IconCaretdown />
+            <div className="py-1 px-2 hover:bg-slate-200 rounded flex">
+              <div>zoom</div>
+              <IconCaretdown />
             </div>
           </Dropdown>
           <button
@@ -313,8 +314,9 @@ export default function ControlPanel(props) {
             }
             trigger="click"
           >
-            <div className="py-1 px-2 hover:bg-slate-200 rounded">
-              <i className="fa-solid fa-plus"></i> <IconCaretdown />
+            <div className="py-1 px-2 hover:bg-slate-200 flex">
+              <i className="fa-solid fa-plus"></i>
+              <IconCaretdown />
             </div>
           </Dropdown>
           <button className="py-1 px-2 hover:bg-slate-200 rounded" title="Edit">
@@ -380,7 +382,7 @@ export default function ControlPanel(props) {
           />
         </Form>
       </Modal>
-    </>
+    </div>
   );
 
   function header() {
@@ -678,7 +680,7 @@ export default function ControlPanel(props) {
         }
         trigger="click"
       >
-        <div className="py-1 px-2 hover:bg-slate-200 rounded">
+        <div className="py-1 px-2 hover:bg-slate-200 rounded flex items-center align-middle">
           <i className="fa-solid fa-table-list"></i> <IconCaretdown />
         </div>
       </Dropdown>

src/components/editor_panel.jsx

@@ -54,8 +54,8 @@ const EditorPanel = (props) => {
   ];
 
   return (
-    <div className="h-screen flex overflow-clip relative">
-      <div style={{ width: `${props.width}px` }}>
+    <div className="flex h-full">
+      <div style={{ width: `${props.width}px` }} className="overflow-y-auto">
         <Tabs
           type="card"
           tabList={tabList}
@@ -143,7 +143,7 @@ const EditorPanel = (props) => {
         </button>
       </div>
       <div
-        className={`flex justify-center items-center p-1 h-full hover:bg-slate-300 cursor-col-resize ${
+        className={`flex justify-center items-center p-1 h-auto hover:bg-slate-300 cursor-col-resize ${
           props.resize ? "bg-slate-300" : ""
         }`}
         onMouseDown={() => props.setResize(true)}