Merge pull request #1572 from NoRedInk/phx-1112-question-box-character-shouldnt-overflow-container

[PHX-1112] Bump up Tip QuestionBox `minHeight` so character always fits
This commit is contained in:
Micah Hahn 2023-12-04 12:12:28 -05:00 committed by GitHub
commit 80bd3a634b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -13,6 +13,7 @@ module Nri.Ui.QuestionBox.V6 exposing
- Background color in Tip theme changed from white to sunshine yellow
- added html function
- Increase `minHeight` for tip question box so character fits
Changes from V5:
@ -295,18 +296,19 @@ viewContainer config =
, Css.displayFlex
, Css.property "gap" "30px"
, Css.flexDirection Css.column
-- Approximately one line of text
, Css.minHeight (Css.px 53)
, case config.theme of
Tip ->
Css.batch
[ Css.padding2 (Css.px 15) (Css.px 25)
[ -- Enough space that the character circle fits in the box
Css.minHeight (Css.px 80)
, Css.padding2 (Css.px 15) (Css.px 25)
]
_ ->
Css.batch
[ Css.borderLeft3 (Css.px 1) Css.solid Colors.gray85
[ -- Approximately one line of text
Css.minHeight (Css.px 53)
, Css.borderLeft3 (Css.px 1) Css.solid Colors.gray85
, Css.borderTop3 (Css.px 1) Css.solid Colors.gray85
, Css.borderRight3 (Css.px 1) Css.solid Colors.gray85
, Css.borderTopLeftRadius (Css.px borderRounding)