facebook / facebook/docusaurus

Trim whitespace on higher resolutions

Đang mở
#4,347 14 bình luận 0 reaction 0 người được giao Xem trên GitHub
better engineering domain: theme
Ngôn ngữ chính
TypeScript
Star
66.2k
Fork
10k
Merge trung bình
1 ngày 3 giờ
Pull request đã merge (30 ngày)
52

Mô tả

## 💥 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!

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.