From e2e747ef2d77d9252811bf2823e2c5bfe8b00d4e Mon Sep 17 00:00:00 2001
From: "C. Lewis" <1657236+ctjlewis@users.noreply.github.com>
Date: Fri, 24 Sep 2021 12:13:05 -0500
Subject: [PATCH] fix(create-next-app): starter styling errors (#28096)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #27770.

Projects initialized with `create-next-app` should not only be totally functional in terms of styling, but ideally there would be as minimal CSS as possible to serve as a "jumping off point" for users (related: #24709, where I initially proposed this fix).

However, minor issues with the specific styling approaches in the template created by `create-next-app` break the page for small viewports. This is caused by an improper use of `display: flex` in conjunction with `min-height: 100vh` on the `.container` class, and I imagine it places a drag on the initial user experience due to the fact that every user who creates a project with `create-next-app` must *independently fix* this viewport sizing issue themselves.

For example, the top of the viewport on a small display (here, iPhone SE):

![image](https://user-images.githubusercontent.com/1657236/129430078-229d5fab-b719-458c-8a94-10fb8be3490d.png)

Notice the "Welcome to Next.js" message is missing: Its container is larger than the viewport, and is set to be a flex column with `justify-center`—so we are staring at the center of the container. To demonstrate better, here is the full page render for before and after this PR:

![image](https://user-images.githubusercontent.com/1657236/129430409-52134198-651a-4cf8-915d-68b699febd77.png)

This PR adjusts the styling to fix this issue, and also other styling issues on small screens, like grid width issues causing text to overflow (and the footer padding as seen above):

![image](https://user-images.githubusercontent.com/1657236/129430114-1dda7674-3b02-45d4-a4b3-37fc5053c6c4.png)

After these changes, and minor padding tweaks, this is the top of the viewport on an iPhone X (full render above):

![image](https://user-images.githubusercontent.com/1657236/129430224-1991c1a6-8c7e-4246-b4a5-44919fb850c6.png)

And on an iPhone SE:

![image](https://user-images.githubusercontent.com/1657236/129430259-4408c52f-6fc6-4f22-9cc6-bbdbbe8d7a1a.png)
---
 .../templates/default/styles/Home.module.css  | 21 +++++++------------
 .../typescript/styles/Home.module.css         | 21 +++++++------------
 2 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/packages/create-next-app/templates/default/styles/Home.module.css b/packages/create-next-app/templates/default/styles/Home.module.css
index 35454bb748190..32a57d52f34c4 100644
--- a/packages/create-next-app/templates/default/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/styles/Home.module.css
@@ -1,15 +1,10 @@
 .container {
-  min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
+  padding: 0 2rem;
 }
 
 .main {
-  padding: 5rem 0;
+  min-height: 100vh;
+  padding: 4rem 0;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -18,10 +13,10 @@
 }
 
 .footer {
-  width: 100%;
-  height: 100px;
-  border-top: 1px solid #eaeaea;
   display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
   justify-content: center;
   align-items: center;
 }
@@ -56,6 +51,7 @@
 }
 
 .description {
+  margin: 4rem 0;
   line-height: 1.5;
   font-size: 1.5rem;
 }
@@ -75,7 +71,6 @@
   justify-content: center;
   flex-wrap: wrap;
   max-width: 800px;
-  margin-top: 3rem;
 }
 
 .card {
@@ -87,7 +82,7 @@
   border: 1px solid #eaeaea;
   border-radius: 10px;
   transition: color 0.15s ease, border-color 0.15s ease;
-  width: 45%;
+  max-width: 300px;
 }
 
 .card:hover,
diff --git a/packages/create-next-app/templates/typescript/styles/Home.module.css b/packages/create-next-app/templates/typescript/styles/Home.module.css
index 35454bb748190..32a57d52f34c4 100644
--- a/packages/create-next-app/templates/typescript/styles/Home.module.css
+++ b/packages/create-next-app/templates/typescript/styles/Home.module.css
@@ -1,15 +1,10 @@
 .container {
-  min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
+  padding: 0 2rem;
 }
 
 .main {
-  padding: 5rem 0;
+  min-height: 100vh;
+  padding: 4rem 0;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -18,10 +13,10 @@
 }
 
 .footer {
-  width: 100%;
-  height: 100px;
-  border-top: 1px solid #eaeaea;
   display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
   justify-content: center;
   align-items: center;
 }
@@ -56,6 +51,7 @@
 }
 
 .description {
+  margin: 4rem 0;
   line-height: 1.5;
   font-size: 1.5rem;
 }
@@ -75,7 +71,6 @@
   justify-content: center;
   flex-wrap: wrap;
   max-width: 800px;
-  margin-top: 3rem;
 }
 
 .card {
@@ -87,7 +82,7 @@
   border: 1px solid #eaeaea;
   border-radius: 10px;
   transition: color 0.15s ease, border-color 0.15s ease;
-  width: 45%;
+  max-width: 300px;
 }
 
 .card:hover,