BL-14362 fix spacing around cards without much text

[nabalone]

This change is 

[StephenMcConnel]

Looks reasonable, but I have a couple of questions.

Reviewed 1 of 1 files at r1, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @nabalone)

---

components/language-chooser/react/language-chooser-react-mui/src/OptionCard.tsx line 51 at r1 (raw file):

          // fill up the entire card action area
          flex-grow: 1;
          width: 100%;

What happens if there are fewer cards than needed to fill up the card action area?
Could cards that display only the language name omit some content that adds to their height? (just asking)

[nabalone]

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @StephenMcConnel)

---

components/language-chooser/react/language-chooser-react-mui/src/OptionCard.tsx line 51 at r1 (raw file):

Previously, StephenMcConnel (Steve McConnel) wrote…

What happens if there are fewer cards than needed to fill up the card action area?
Could cards that display only the language name omit some content that adds to their height? (just asking)

I'm not sure if I understand the question correctly...I'll try explaining my thinking from the beginning and see if that makes sense? Every card has its own CardActionArea, which I am using only for the purpose of detecting clicks i.e. turning the card into a button. So I think we definitely want the Card and the CardActionArea to be the same size, so that we respond to clicks that are on the card and only on the card. For language cards, the parent sets a minimum height on the OptionCard, which sets the minimum height of the CardActionArea. Previously yes, some cards would omit some content and therefore be shorter, shorter than this minimum height. So in this PR I want to make the Card grow in such cases so that it is never shorter than its CardActionArea. I put some screenshots in the card which show the difference in these cases: https://issues.bloomlibrary.org/youtrack/issue/BL-14362/Fix-spacing-around-cards-without-much-text Does that answer your questions?

[andrew-polk]

Reviewed 1 of 1 files at r1, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @StephenMcConnel)

---

components/language-chooser/react/language-chooser-react-mui/src/OptionCard.tsx line 51 at r1 (raw file):

Previously, nabalone (Noel) wrote…

I'm not sure if I understand the question correctly...I'll try explaining my thinking from the beginning and see if that makes sense? Every card has its own CardActionArea, which I am using only for the purpose of detecting clicks i.e. turning the card into a button. So I think we definitely want the Card and the CardActionArea to be the same size, so that we respond to clicks that are on the card and only on the card. For language cards, the parent sets a minimum height on the OptionCard, which sets the minimum height of the CardActionArea. Previously yes, some cards would omit some content and therefore be shorter, shorter than this minimum height. So in this PR I want to make the Card grow in such cases so that it is never shorter than its CardActionArea. I put some screenshots in the card which show the difference in these cases: https://issues.bloomlibrary.org/youtrack/issue/BL-14362/Fix-spacing-around-cards-without-much-text Does that answer your questions?

Steve,
I'm not sure if you saw the YouTrack card; I think it would probably answer your questions.
https://issues.bloomlibrary.org/youtrack/issue/BL-14362/Fix-spacing-around-cards-without-much-text

[StephenMcConnel]

Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @nabalone)