GitHubのチェックボックスをでかくする + ãƒžãƒ¼ã‚¸ã‚¹ãƒ†ãƒ¼ã‚¿ã‚¹ã®æž ã‚’ã§ã‹ãã™ã‚‹

仕事でGitHubを利用していて、ちょっと使いにくいなと思うことがあった箇所をUser CSSでチマチマ直すということをよくやっている。

blog.3qe.us

マシンを交換したりするとしばしば設定を失くしてしまうので、ブログにメモっておこう。

チェックボックスをでかくする

1.5倍

input[type=checkbox] {
    transform: scale(1.5);
}

チェックボックスが小さくてよくクリックミスしてしまう。自分は4K環境であまりスケーリングしていないので、割とチェックボックスを狙い通りにクリックするのが難しかったりする。 そこでチェックボックスを巨大化させた。巨大化といっても1.5倍くらいで今のところ満足している。老眼になったらもっと大きくなるのだろうか。

マージステータスの枠を縦に長くする

GitHubは、そのブランチで実行されたActionsの結果をもとに、Pull-Requestがマージできるかどうかを機械的にチェックできるようになっている。ひらたくいえばCIが通らないとマージできないといった仕組みを作ることができる。

自分のチームでは、たくさんのCIやチェックが走るようになっているので、枠が縦に伸びている。しかしこの枠は一定限度までしか伸びない。

チェック項目がはみ出てる

この状態だと、チェックのどこかが失敗しているときに、詳細を確認するために枠内でたくさんスクロールしなければならず、けっこうストレスを感じていた。

そこで、枠を大きくすることにした。

.merge-status-list {
    max-height: 99999px !important;
}

すると枠が伸びてくれる。

全部表示されるようになった

これにより、あーBackstopが落ちてるのか、ということが一瞬でわかるようになった。

むすび

開発の暮らしの中でちょっとしたストレスがあると、それが積み重なって嫌な気分になってしまうので、快適に開発できることを目指していきたい。