Improve the appearance of the ✅Talk List Dialog

from Improve the appearance of the ✅ dialog Improve the appearance of the Talk List Dialog

after

• 

before

• 

  • Thoughts.
    • Margins at the beginning of the list are useless.
    • If the title is a link, is the ShowLog button unnecessary?
      • But is explicit manipulation easier to understand than implicit manipulation?
    • It would be easier to see if the head is aligned if the line breaks before the title.
    • Margin between items

• React List component - Material-UI

  • 
    • I’m not using it on my development PC, so the data is crappy.
  • 
    • I tried to temporarily display a title that looks like that.

• Try iPhone X size

  • 
    • Hmmm, the button shrinking and the text sticking out is subtle.
  • Pattern with buttons enclosed in divs
    • 
  • Patterns out of ListItem
    • 
  • I prefer the former.

• The button shrinks because the parent has flex on it.

• buttons with align-items: flex-end; and aligned at the bottom

• 

• Confirmation with actual equipment

  • 
    • Ah, that’s what happens when the length of the text is mixed.

• I’d like to bring the talk list stored on my phone’s local storage to the development PC to try it out.

  • Import ✅ talk list

• I was able to reproduce it on a development PC.

  • 

• I was thinking that if I could have a row of buttons to save space, I’d prefer to have a row of buttons, but that’s not so good.

  • 

• flex-basis: 110px; to make the base size the width of the larger button, so the base will wrap around.

• Add flex-grow: 1; to both the text and button divs, so that when the text is short, the button div is also stretched, and when it is stretched enough, it becomes a single row.

• Use text-align: right; to right-align the button. The right edge of the button will be aligned no matter what the div of the button is.

• Buttons sticking out above text is tacky.

  • 
  • align-self: flex-start; and align-self: flex-end; to make text above and buttons below

• Lightly ink the list area and add a shadow similar to that of a button.

  • background: #eee;
  • box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);

• It’s done.

  • 

State of div.

---

This page is auto-translated from [/nishio/✅Talk List Dialogの見た目を改善する](https://scrapbox.io/nishio/✅Talk List Dialogの見た目を改善する) using DeepL. If you looks something interesting but the auto-translated English is not good enough to understand it, feel free to let me know at @nishio_en. I’m very happy to spread my thought to non-Japanese readers.