Fix small screens

app/web/src/components/Footer/Footer.js

@@ -4,7 +4,7 @@ import OutBound from 'src/components/OutBound'
 const Footer = () => {
   return (
     <div className="bg-indigo-900 text-indigo-200 font-roboto mt-20 text-sm">
-      <div className="flex h-16 justify-end items-center mx-16">
+      <div className="flex h-16 md:justify-end items-center mx-2 md:mx-16 flex-wrap">
         <OutBound className="mr-8" to="https://github.com/Irev-Dev/cadhub">
           Github
         </OutBound>

app/web/src/components/IdeHeader/IdeHeader.tsx

@@ -20,21 +20,21 @@ const TopButton = ({
     className={`flex bg-gray-200 h-10 justify-center items-center px-4 rounded ${className}`}
   >
     {children}
-    {name}
+    <span className="hidden md:block ml-2">{name}</span>
   </button>
 )
 
 const IdeHeader = ({ handleRender }: { handleRender: () => void }) => {
   return (
     <div className="h-16 w-full bg-ch-gray-900 flex justify-between items-center">
-      <div className="bg-ch-gray-700 pr-48 h-full"></div>
+      <div className="bg-ch-gray-700 md:pr-48 h-full"></div>
       <div className="text-gray-200 flex gap-4 mr-4">
         <TopButton
           className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
           onClick={handleRender}
           name="Preview"
         >
-          <Svg name="photograph" className="w-6 h-6 text-ch-pink-500 mr-2" />
+          <Svg name="photograph" className="w-6 h-6 text-ch-pink-500" />
         </TopButton>
 
         <Popover className="relative outline-none w-full h-full">
@@ -48,7 +48,7 @@ const IdeHeader = ({ handleRender }: { handleRender: () => void }) => {
                   >
                     <Svg
                       name="share"
-                      className="w-6 h-6 text-ch-purple-500 mr-2 mt-1"
+                      className="w-6 h-6 text-ch-purple-500 mt-1"
                     />
                   </TopButton>
                 </Popover.Button>

app/web/src/components/IdeWrapper/IdeWrapper.tsx

@@ -23,8 +23,8 @@ const IdeToolbarNew = ({ cadPackage }) => {
           <IdeHeader handleRender={handleRender} />
         </nav>
         {shouldShowConstructionMessage && (
-          <div className="py-2 bg-pink-200 flex">
-            <div className="flex-grow text-center">
+          <div className="py-1 md:py-2 bg-pink-200 flex">
+            <div className="flex-grow text-center text-xs md:text-base">
               We're still working on this. Since you're here, have a look what{' '}
               <OutBound
                 className="text-pink-700"