facebook / facebook/docusaurus

Trim whitespace on higher resolutions

未关闭
#4,347 14 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
better engineering domain: theme
主要语言
TypeScript
星标
66.2k
派生
10k
平均合并
1 天 3 小时
30 天内合并 PR
52

描述

## 💥 Proposal

(First of all, I'm not designer, so please take my opinions for what they are - the opinions of a single consumer)

When looking at documentation, there is a large swath of extraneous whitespace between the left hand ToC and the content which is not present on the right hand side.

![image](https://user-images.githubusercontent.com/1404810/109984295-e9740200-7d03-11eb-8dec-456ef1a6da15.png)

This is the `margin` added the the `container`.

![image](https://user-images.githubusercontent.com/1404810/109984356-fa247800-7d03-11eb-81a4-8c63a0cc28c4.png)

Notice how it almost hugs the ToC on the right hand side.

Reducing the size of the window makes the left hand side also hug, which IMO looks better

![image](https://user-images.githubusercontent.com/1404810/109984583-32c45180-7d04-11eb-954b-131307936367.png)

That also more closely resembles Docusarus v1, FWIW

![image](https://user-images.githubusercontent.com/1404810/109984638-42439a80-7d04-11eb-82f0-34a70f144246.png)

This looks extra weird when the entries in the ToC break due to not enough room when there's a bunch of (IMO) wasted space on the left

![image](https://user-images.githubusercontent.com/1404810/109984765-61dac300-7d04-11eb-946e-557933464584.png)

(example from https://jestjs.netlify.app/docs/api)

---

My suggestion is to cut most of the `margin` on the left side of the container. Short and sweet! 😀

(while I'm at it - any particular reason why left side ToC is flush on the left, but right hand ToC is flush to the content? Looks unbalanced IMO)

### Have you read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/master/CONTRIBUTING.md#reporting-new-issues)?

Yup!

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。