【Scrapbox】ウィンドウサイズの横幅が767pxの時に、見た目が崩れるのを防ぐ【UserCSS】

https://gyazo.com/e41a1f25e89de3b107b7056cbb83d517

概要

解像度が1920×1080、拡大/縮小が125%のディスプレイの半分でScrapboxを表示すると、冒頭の画像のBEFOREのように検索欄の見た目が崩れる。

これは、上記の状態ではウィンドウサイズが767.20pxになっており、app.cssで定義しているメディアクエリのブレークポイントの間になっているため、CSSが適応されず見た目が崩れている。

https://gyazo.com/fd5cf6607436cc3eb51bada74695999d

修正前のブレークポイント

解決方法

app.cssからメディアクエリを抽出し、メディアクエリのブレイクポイントを修正したCSSをImport Pagesで取込めるJSON形式で出力する。

Import Pageで取込んだCSSをUserCSSとして読み込むと、冒頭の画像のAFTERのように検索欄の見た目が崩れなくなる。

https://gyazo.com/86cdb5c801dfb5e7a39d7dec6d8e3492

修正後のブレークポイント

UserCSSの記述例

Import Pagesで生成したページ

app.cssを大量に上書きする性質上、他のUserCSSより早い段階でインポートした方が無難

JSON形式のUserCSSを生成するプログラム