Fix small screens

README.md

@@ -46,6 +46,8 @@ yarn rw dev
 
 Your browser should open automatically to `http://localhost:8910` to see the web app. Lambda functions run on `http://localhost:8911` and are also proxied to `http://localhost:8910/.redwood/functions/*`.
 
+If you want to access the websight on your phone use `yarn redwood dev --fwd="--host <ip-address-on-your-network-i.e.-192.168.0.5">"`
+
 you can sign in to the following accounts locally
 
 localUser1@kurthutten.com: `abc123`

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"

app/web/src/layouts/MainLayout/MainLayout.js

@@ -93,27 +93,27 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
   return (
     <div>
       <header id="cadhub-main-header">
-        <nav className="flex justify-between h-20 px-12 bg-gradient-to-r from-gray-900 to-indigo-900">
+        <nav className="flex justify-between h-20 md:px-12 bg-gradient-to-r from-gray-900 to-indigo-900">
           <ul className="flex items-center">
             <li>
               <Link to={routes.home()}>
-                <div className="rounded-full overflow-hidden ml-8">
-                  <Svg className="w-16" name="favicon" />
+                <div className="rounded-full overflow-hidden ml-2 md:ml-8">
+                  <Svg className="w-10 md:w-16" name="favicon" />
                 </div>
               </Link>
             </li>
             <li>
               <Tooltip title="Very alpha, there's lots of work todo">
-                <div className="ml-12 flex">
+                <div className="ml-2 md:ml-12 flex">
                   {/* Because of how specific these styles are to this heading/logo and it doesn't need to be replicated else where as well as it's very precise with the placement of "pre-alpha" I think it's appropriate. */}
                   <h2
-                    className="text-indigo-300 text-5xl font-ropa-sans py-1 tracking-wider"
+                    className="text-indigo-300 text-2xl md:text-5xl font-ropa-sans py-1 md:tracking-wider"
                     style={{ letterSpacing: '0.3em' }}
                   >
                     CadHub
                   </h2>
                   <div
-                    className="text-pink-400 text-sm font-bold font-ropa-sans"
+                    className="text-pink-400 text-sm font-bold font-ropa-sans hidden md:block"
                     style={{ paddingBottom: '2rem', marginLeft: '-1.8rem' }}
                   >
                     pre-alpha
@@ -125,7 +125,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
           <ul className="flex items-center">
             <li
               className={getActiveClasses(
-                'mr-8 h-10 w-10 rounded-full border-2 border-indigo-300 flex items-center justify-center'
+                'mr-4 md:mr-8 h-8 w-8 md:h-10 md:w-10 rounded-full border-2 border-indigo-300 flex items-center justify-center'
               )}
             >
               <NavPlusButton />
@@ -150,7 +150,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
               <li>
                 <a
                   href="#"
-                  className="text-indigo-200 font-semibold underline"
+                  className="text-indigo-200 font-semibold underline mr-2"
                   onClick={recordedLogin}
                 >
                   Sign in/up