<p>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:
<img src="https://gyazo.com/84ce13f8e1e4073f3fdffc0da100172c/thumb/1000" alt="image"></p>
<ul>
<li>before<ul>
<li><img src="https://gyazo.com/d01f8b60f3dfe9ca5ba2f5154044085c/thumb/1000" alt="image"></li>
</ul>
</li>
<li>とりあえず上下にでこぼこしてるのはなんとかしたい<ul>
<li>入力欄はinputタグ直接で、ボタンはMaterial-UIなので後者に揃えるのが良さそう<ul>
<li>入力欄    <a href="https://material-ui.com/components/text-fields/">Text Field React component - Material-UI</a></li>
</ul>
</li>
</ul>
</li>
<li>ボタンに背景色をつける<ul>
<li>variant=&quot;contained&quot; <a href="https://material-ui.com/components/buttons/">React Button component - Material-UI</a></li>
<li><img src="https://gyazo.com/0eb4f93d2ac3c77ff0ed64b878506122/thumb/1000" alt="image"></li>
</ul>
</li>
<li>入力欄にこんなにパディングいらない
css</li>
</ul>
<pre><code>.MuiOutlinedInput-input {
    padding: 9px;
}
</code></pre>
<pre><code>- ![image](https://gyazo.com/f9a6013f0b6ea724acb2d47ef91b18be/thumb/1000)
</code></pre>
<ul>
<li>マージンがないせいでラベルがはみ出してるのをなおしたい
css</li>
</ul>
<pre><code>.dialog-inputs &gt; div {
  margin-top: 7px;
}
</code></pre>
<pre><code>- ![image](https://gyazo.com/7856c9b750e100efade7fb5c1e37c0e3/thumb/1000)
</code></pre>
<ul>
<li>iPhone Xサイズだとどうなるか<ul>
<li><img src="https://gyazo.com/94bc7583e7c90ae292743e5e80c3dbdb/thumb/1000" alt="image"></li>
</ul>
</li>
<li>サイズを調節してみる<ul>
<li><img src="https://gyazo.com/84ce13f8e1e4073f3fdffc0da100172c/thumb/1000" alt="image"><ul>
<li>うーん、個人的にはここが揃って欲しいけどな…</li>
<li><img src="https://gyazo.com/c521e80e41d01b51bdb5a7c4def5a3b2/thumb/1000" alt="image"></li>
</ul>
</li>
</ul>
</li>
<li>改善した<ul>
<li><a href="/ja/%E2%9C%85Scrapbox%20Dialog%E3%81%AE%E5%8F%B3%E3%81%AE%E9%9A%99%E9%96%93%E3%82%92%E4%BF%AE%E6%AD%A3">✅Scrapbox Dialogの右の隙間を修正</a></li>
</ul>
</li>
</ul>


✅Scrapbox Dialogの見た目を改善する