Responsive grid on /projects and /projects/<some-project>/configure pages

Author: krystxf

components/dashboard/src/projects/ConfigureProject.tsx

@@ -207,7 +207,7 @@ export default function () {
     }
 
     return <ProjectSettingsPage project={project}>
-        <div className="flex space-x-4">
+        <div className="grid xl:grid-cols-2 grid-cols-1 gap-4">
             <div className="flex-1 h-96 rounded-xl overflow-hidden relative flex flex-col">
                 <div className="flex bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-600 px-6 pt-3">
                     <TabMenuItem name=".gitpod.yml" selected={selectedEditor === '.gitpod.yml'} onClick={() => setSelectedEditor('.gitpod.yml')} />

components/dashboard/src/projects/Projects.tsx

@@ -150,7 +150,7 @@ export default function () {
                     {team && <Link to="./members" className="flex"><button className="ml-2 secondary">Invite Members</button></Link>}
                     <button className="ml-2" onClick={() => onNewProject()}>New Project</button>
                 </div>
-                <div className="mt-4 grid grid-cols-3 gap-4 pb-40">
+                <div className="mt-4 grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4 pb-40">
                     {projects.filter(filter).sort(hasNewerPrebuild).map(p => (<div key={`project-${p.id}`} className="h-52">
                         <div className="h-42 border border-gray-100 dark:border-gray-800 rounded-t-xl">
                             <div className="h-32 p-6">