search

ShoyuVanilla / FoundryVTT-Chat-Portrait

Other
14 stars 24 forks source link

SWADE/Deadlands Icons and text are truncated at default icon size #78

Closed TheBiggerBadderBear closed 3 years ago

TheBiggerBadderBear commented 3 years ago

Foundry Version: 0.8.9 Savage Worlds Adventure Edition: 0.20.4 Other Modules: Deadlands The Weird West, SWADE Tools

If using the default size options (36px), when an item is clicked the image and text is cutoff by the card break. It also looks like Chat Portrait moves the text to align with the bottom of the icon, rather than the middle as default.

Screenshot 1 - At default 36px icon size, the icon is cut-off and the text is barely visible: 2021-09-01 11_07_54-Window

Screenshot 2 - If the text is clicked, it expands the description out as normal: 2021-09-01 11_08_03-Window

Screenshot 3 - If the Chat Portrait module is disabled, the item shows as normal. Note also that the text is aligned with the middle of the icon: 2021-09-01 11_07_35-Window

Screenshot 4 - And if the icon size is reduced to 24px in Chat Portrait, the text/image can all fit correctly: 2021-09-01 11_10_28-Window

p4535992 commented 3 years ago

It's not my module is the css of SWADE

.swade.chat-card .card-header h3 {
  flex: 1;
  margin: 0;
  line-height: 36px;
  color: #111;
  overflow: hidden;
  height: 30px; HERE THE PROBLEM
  word-break: break-all;
}

simply remove that "height: 30px" seem to work, try to open a issue to the SWADE system project.

my module anyway give you the option to customize the css so for now you can just set to N pixel the setting like i show below:

img1

add "display:flex;" if you want to center the text:

img2

TheBiggerBadderBear commented 3 years ago

That's great, thank you for the reply. Setting "height: 40px" in Custom Styling unfortunately breaks any other entries that go over one line, however setting "height: auto" seems to do the trick. Great.

Do you have any idea about the vertical-align? It looks fine when your module is disabled (the text is vertically in the middle of the icon), but then the text moves to the bottom when Chat Portrait is enabled.

Thanks again!

p4535992 commented 3 years ago

The solution with "display:flex" is not enough ?

TheBiggerBadderBear commented 3 years ago

I missed that part of your reply, apologies. Yes, "height: auto; display:flex" fixes both issues. Thank you again. Closing now.