graphql / graphql/graphql.github.io

Dark mode code block ("CodeMirror") sections display a mysterious white square

オープン
#1,797 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
889
フォーク
1.5k
平均マージ
4日 12時間
マージ済み PR(30日)
21

説明

### Description

When looking at the interactive code block (maybe called "CodeMirror") sections in dark mode, there is a white square that doesn't seem to do anything. I could see this on Chrome, Firefox, and Safari.

### Steps to Reproduce

1. Go to a page with an interactive code block (e.g., https://graphql.org/learn/queries/)
2. You may see something like this:

Screenshot 2024-10-19 at 19 44 36

### Expected Result

I would expect not to see the white square.

### Actual Result

...I saw the white square.

### Additional Context

There's a small chunk of CSS that sets this white square to be white:
```css
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
background-color: white; /* The little square between H and V scrollbars */
}
```
On light mode, this makes the square invisible (because the background is also white). However, this CSS doesn't seem to account for dark mode.

My proposed fix is a little lazy. I'll just make the square invisible on dark mode:
```css
.CodeMirror-scrollbar-filler:is(html[class~=dark] *) ,
.CodeMirror-gutter-filler:is(html[class~=dark] *) {
background-color: transparent; /* The little square between H and V scrollbars */
}
```

I think that a larger fix might be ideal in the future, because the scrollbars are invisible anyway, so this square doesn't seem to have any use (see: #1617). But maybe my proposed fix is OK in the meantime.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

graphql.org/learn/queries/から始め、ダークモードでインタラクティブなCodeMirrorセクションを確認し、次に .CodeMirror-scrollbar-filler と .CodeMirror-gutter-filler のCSSルールを探します。ダークモードで白い四角形が表示されなくなり、インタラクティブなコードブロックが引き続き動作すれば完了です。Chrome、Firefox、Safariで結果を確認してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
css
領域
frontend, web-dev
issue の種類
バグ
難易度
2/5
見積もり時間
1〜3時間
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
52/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。