from <a href="/ja/%E2%9C%85%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%82%92%E6%94%B9%E5%96%84%E3%81%99%E3%82%8B">✅ダイアログの見た目を改善する</a>
Scrapbox Dialogの右の隙間を修正
after:
<ul>
<li><img src="https://gyazo.com/36c9901f53277a1f2fabebe03d133b52/thumb/1000" alt="image"></li>
</ul>
before:
<ul>
<li><img src="https://gyazo.com/c521e80e41d01b51bdb5a7c4def5a3b2/thumb/1000" alt="image"></li>
</ul>
movie:
<ul>
<li><img src="https://gyazo.com/24c0120e89e939636c820c8a9b2fd128/thumb/1000" alt="image">
</li>
<li>beforeではflexのitemsの中のコンテンツにクラス名をつけて、CSSを当ててサイズをコントロールしていた
<ul>
<li>afterではitems自体にクラス名をつける形に変えた</li>
<li>widthで固定サイズにするのではなくflexで調節させる</li>
</ul>
</li>
<li>ボタンを包むdivは<code>flex-basis: auto;</code>で中身のサイズにして固定
</li>
<li>入力欄のdivはbasisを固定値で入れた上でgrowで空きスペースいっぱいに広がらせる
<ul>
<li>中の入力欄は外のdivのサイズに合わせる
css</li>
</ul>
</li>
</ul>
<pre><code>div.input-icon {
 flex-basis: 120px;
 flex-grow: 1;
}
div.input-icon &gt; div {
 width: 100%;
}
</code></pre>
<ul>
<li>ページタイトルは可能なら長くなって欲しくて、プロジェクト名はあまり長くなる必要がない、これはgrowの値の違いで表現している<ul>
<li>これに関してはもっと良いやり方があるかも知れない</li>
</ul>
</li>
</ul>
<a href="/ja/Flexbox">Flexbox</a>

✅Scrapbox Dialogの右の隙間を修正