from ✅ダイアログの見た目を改善する

Talk List Dialogの見た目を改善する

after

before

考えたこと

リスト冒頭のマージンが無駄

タイトルをリンクにしたらShowLogボタンは不要？

でも暗黙の操作より明示的な操作の方がわかりやすい？

タイトル手前で改行すると頭が揃ってみやすそう

アイテムの間にマージンつける

開発用PCでは使ってないからデータがしょぼいな

一時的にそれっぽいタイトルを表示するようにしてみた

iPhone Xサイズにしてみる

うーん、ボタンが縮んでテキストがはみ出てるのは微妙だなぁ

ボタンをdivで囲んだパターン

ListItemの外に出したパターン

前者がいい

ボタンが縮むのは親にflexがついてるから

ボタンにalign-items: flex-end;して下に揃えた

実機で確認

あー、テキストの長さがまちまちだとそうなるのかー

スマホのローカルストレージに保存されてるトークリストを開発PCに持ってきて試したい

開発PCで再現できた

スペース節約のためにボタンが1列になれるならなった方がいいと考えてたけどそれほど良くないな

flex-basis: 110px; で基本サイズを大きいボタンの幅にする、これで基本は折り返しになる

flex-grow: 1; をテキストとボタンの両方のdivにつける、これでテキストが短い時にはボタンのdivも引き伸ばされ、十分伸びたら1列になる

text-align: right; でボタンを右揃えにしておく。ボタンのdivがどうなろうが右端が揃うようになる。

ボタンがテキストより上に突き出すのはダサい

align-self: flex-start; と align-self: flex-end; でテキストを上に、ボタンを下にする

リストの領域に薄墨を引いてボタン同様のシャドウをつける

できた

divの状態