I'm putting out an open call for a CSS guru! For help with troubleshooting, this chat output is from my SmartAoE script. My suspicion is that it is due to me hardcoding my div a number of pixels for the left margin and width, and possibly interacting with screen resolution or something similar? I'm using margin-left:-42px and width: 270px, as in the first two lines below extracted from a buildTitle() function. let output = `<div style=" margin-left:-42px ">` +
`<div style="display: table; border: !{tableborder}; background-color: !{tablebgcolor}; width: 270px ; text-align: left; border-radius: !{tableborderradius}; border-collapse: separate; box-shadow: !{tableshadow}">` +
`<div style="display: table-header-group; background-image: !{titlecardbackground}; border-bottom: !{titlecardbottomborder};">` +
`<div style="display: table-row;">` +
`<div style="display: table-cell; padding: 2px 2px; text-align: center; border-bottom: 2px solid #444444;border-top-left-radius: !{tableborderradius};border-top-right-radius: !{tableborderradius};">` +
`<span style="font-family: !{titlefontface}; font-style:normal; font-size: !{titlefontsize}; line-height: !{titlefontlineheight}; font-weight: bold; color: !{titlefontcolor}; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;">${cardParameters.title}</span>` +
`<br><span style="font-family: !{subtitlefontface}; font-variant: normal; font-size: !{subtitlefontsize}; font-style:normal; font-weight: bold; color: !{subtitlefontcolor}; ">${subtitle}</span>` +
`</div>` +
`</div>` +
`</div>` Disclaimer: I know very little CSS/HTML, and basically went with brute force trial and error based on the construction from Kurt's Scriptcards code. Also, before someone comments that I haven't closed the div above, there is more added later for the damage, saving throws, and description fields :) Anyway, I'm trying to remember back to when I was coding this part months ago and what issues I had. I was trying to eke out as much width as possible in the default chat window along with getting the appropriate column spacing in the saving throw section (the part under "Damage 19 Thunder" in Asher's picture). In particular, I needed the extra width to handle long token names in the saving throw region without wrapping to multi-line immediately and I think I was having difficulty getting a satisfying result using em units or %. Do you guys think that using pixels could be the problem? EDIT - for comparison, here is what it looks like in the browser for me, and to my knowledge this is the first time this has come up for other users so far.