search

DoSomething / forge

🎨 The DoSomething.org pattern library.
http://forge.dosomething.org
MIT License
48 stars 14 forks source link

Fix figure with less content #528

Closed DFurnes closed 8 years ago

DFurnes commented 8 years ago

Changes

References DoSomething/phoenix#5139. Slightly reworks the .-center modifier to fix an issue where the body doesn't fill the figure if it doesn't have enough text to fill the cell's width.

I'd recommend checking out the final code for the .-center modifier, since the diff gets a bit muddied by indentation and shifting things around for readability. The commit comments & inline comments in the code also have more rationale for each change.

Screenshots

Sad misaligned cat, taken from the 6.6.0 release: screen shot 2015-09-17 at 11 02 27 am

Happy, correctly aligned cat (this branch): screen shot 2015-09-17 at 11 01 32 am

And still lookin' good with a larger text block (this branch): screen shot 2015-09-17 at 11 01 15 am

@DoSomething/front-end

weerd commented 8 years ago

Looks good!

Out of curiosity would table-layout: fixed have helped w/ letting the max-width property not be overridden?

DFurnes commented 8 years ago

I think the problem with table-layout: fixed is that we'd need to set a specific width on one of the columns, but we want them both to expand to their maximum widths. But interesting stuff! There's so much display: table wizardry to know. :dizzy: