styles: add support for mobile

src/components/editor/live-editor.tsx

@@ -117,7 +117,7 @@ const LiveEditor = () => {
 				</div>
 			</div>
 
-			{editor && <div className={'lg:visible md:invisible sm:invisible'}><Sidebar eidtor={editor}/></div>}
+			{editor && <div className={'lg:visible md:invisible sm:invisible invisible'}><Sidebar eidtor={editor}/></div>}
 		</div>
 	)
 }

src/components/editor/menu-bar.tsx

@@ -18,7 +18,7 @@ import { MenuAiDropdown } from './intelli/menu/menu-ai-dropdown'
 export const MenuBar = ({ editor }: { editor: Editor }) => {
   return (
     <ToggleGroup.Root
-      className={'ToggleGroup'}
+      className={'ToggleGroup lg:visible md:visible sm:invisible invisible'}
       type="single"
       defaultValue="center"
       aria-label="Text alignment"

styles/Home.module.css

@@ -39,8 +39,6 @@
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
-
-    max-width: 800px;
     margin-top: 3rem;
 }
 

styles/global.css

@@ -729,7 +729,7 @@ input {
     padding: 1rem;
     flex-basis: 45%;
     border: 1px solid #0070f3;
-    width: 800px;
+    max-width: 800px;
     height: 100%;
     min-height: 80vh;
 }
@@ -760,7 +760,7 @@ input {
 }
 
 .domain-buttons {
-    width: 800px;
+    max-width: 800px;
     margin: 1rem auto;
     display: flex;
     flex-wrap: wrap;