Merge pull request #1336 from arnav-kr/patch-2

Imporve Arcade showcase mobile UI

components/arcade/showcase/cohort-card.js

@@ -71,8 +71,8 @@ const CohortCard = ({
           <div
             sx={{
               position: 'absolute',
-              top: '10px',
-              left: '10px',
+              top: '16px',
+              left: '16px',
               display: 'flex',
               gap: '5px'
             }}

components/arcade/showcase/cohort-card.module.css

@@ -16,7 +16,7 @@
 
 .card_img {
     width: 100%;
-    max-width: 200px;
+    max-width: 480px;
     height: auto;
     max-height: 100%;
     object-fit: contain;

components/arcade/showcase/my.module.css

@@ -8,6 +8,12 @@
   grid-gap: 20px;
   padding: 10px;
   margin: auto;
+  margin-bottom: 2rem;
+
+  /* quite wide screens */
+  @media (min-width: 481px) {
+    grid-template-columns: repeat(2, 1fr); /* 3 equal-width columns */
+  }
 
   /* Small screens */
   @media (min-width: 640px) {

components/arcade/showcase/project-view.js

@@ -127,7 +127,9 @@ const ProjectView = ({
         }}
       >
         <h1 className="slackey">{title}</h1>
-        <h2>{description}</h2>
+        <h2 sx={{
+          padding: "0 1rem"
+        }}>{description}</h2>
         <h3>By {user}</h3>
 
         <div
@@ -174,6 +176,7 @@ const ProjectView = ({
             borderRadius: '5px',
             position: ['relative', 'relative', 'absolute'],
             display: 'flex',
+            minWidth: "fit-content",
             left: '10px',
             top: '10px',
             justifyContent: 'center',

components/arcade/showcase/project-view.module.css

@@ -15,7 +15,7 @@
   .image {
     max-width: 24em;
     max-height: 100%;
-    /* width: auto; */
+    width: 100%;
     height: auto;
     border-radius: 8px;
     margin: 0 auto;

components/arcade/showcase/readme-renderer.module.css

@@ -157,6 +157,10 @@ SOFTWARE.
 	margin-top: 0;
 }
 
+.reactMarkDown summary h1, .reactMarkDown summary h2, .reactMarkDown summary h3, .reactMarkDown summary h4, .reactMarkDown summary h5, .reactMarkDown summary h6 {
+	display: inline;
+}
+
 .reactMarkDown li p.first {
 	display: inline-block;
 }
@@ -226,6 +230,8 @@ SOFTWARE.
 
 .reactMarkDown table {
 	padding: 0;
+	display: block;
+	overflow-x: auto;
 }
 
 .reactMarkDown table tr {