fix: mobile styles on documentation page and missing react key

[connorb08]

fixes: #3270

[connorb08]

@connorb08 please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@microsoft-github-policy-service agree [company="{your company}"]

Options:

• (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.

@microsoft-github-policy-service agree

• (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.

@microsoft-github-policy-service agree company="Microsoft"

Contributor License Agreement

@microsoft-github-policy-service agree

[jakebailey]

Where did 999 come from? Are you sure this shouldn't be one of the size constants from https://github.com/microsoft/TypeScript-Website/blob/v2/packages/typescriptlang-org/src/style/globals.scss?

999 does work on my phone (yay), but I'm trying to understand if it'll work for everyone.

[connorb08]

I used 999 because that is the breakpoint in the stylesheet where it turns from a flex row into a column. You are right though, it definitely makes more sense to use the xs breakpoint, I updated the PR to use that instead.

It would work either way because the fix is in the .whitespace.raised style, but adding the padding just makes it look better / more readable on a mobile screen so the text doesn't go all the way to the edge.

[jakebailey]

Not sm, like the others here? xs is 480px, so I'm just trying to figure out what is and isn't right as (honestly) not a CSS expert

[connorb08]

Yep, the media query on lines 28-30 uses the xs breakpoint to remove the padding for the content.

At 500px, the page has padding around the content:

Without the padding, when you shrink the page, the text goes all the way to the edge:

Adding the breakpoint at xs adds some padding to the page header:

Since the content is already padded at anything larger than xs, it makes more sense for that to be the breakpoint.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3380.centralus.5.azurestaticapps.net