fix: はてなブログでのスクロールバー幅縮小・テーブル末尾余白を修正

[hirano00o]

概要

はてなブログにスクリプトを埋め込んだ際に発生する2つのスタイル問題を修正。

問題と修正

問題1: スクロールバーの幅が小さい

Chrome 121+ は @supports (scrollbar-color: auto) ブロックに入るため scrollbar-width: thin（約8px）が適用され、ドラッグしにくい状態になっていた。

scrollbar-width: auto に変更してブラウザデフォルト幅（約15px）を維持する。

問題2: 最終行と外枠の余白

はてなブログのグローバル CSS が table 要素に margin-bottom: 1em 等を付与しており、.gce-table にも適用されてスクロール領域内の末尾に余白が生じていた。

.gce-container .gce-table に margin: 0 を明示して外部 CSS を打ち消す。

変更ファイル

ファイル	変更内容
src/styles.ts	scrollbar-width: thin → auto、.gce-table に margin: 0 追加
test/styles.test.ts	テスト値更新 + margin: 0 を検証するテストケース追加

テスト

• npm test: 100 tests passed
• npm run build: 成功