Page item and label header markup has some quirks about drizzle

[megnotarte]

Small

[gerardo-rodriguez]

Hey @tylersticka, could I get some clarification from you on these tasks? Maybe some screenshots?

There's too much margin above the titles at large sizes (should probably be margin below thumbs instead).

Not sure what this is describing. :)

We should override padding on labels in case a project doesn't (they are a <ul> currently).

This isn't clear to me either. :P

We should allow pattern titles to wrap (not sure why we aren't).

Is this referring to the <pre> code?

Thanks!

[tylersticka]

There's too much margin above the titles at large sizes (should probably be margin below thumbs instead).

Currently the page titles have margin above them. This is fine at small sizes:

But at larger sizes when the layout shifts, the upper margin looks kinda funky. This isn't super noticeable until you have a longer description, which we do in other projects:

---

We should override padding on labels in case a project doesn't (they are a <ul> currently).

The labels are inside of a <ul> element, but we aren't overriding the list display of that element in our Drizzle CSS. But if we disable or change toolkit.css, they get excess padding on the left:

This is because our toolkit.css removes padding-left from all <ul> elements. But that's fairly uncommon in our projects, so ideally our <ul> would have its left padding removed (perhaps with a utility class) to avoid this issue.

---

We should allow pattern titles to wrap (not sure why we aren't).

Is this referring to the <pre> code?

Nope, the pattern headings. They have a white-space: nowrap utility on them, which means longer titles won't break at narrow widths:

---

@mrgerardorodriguez Responses above, let me know if you have more questions.

[gerardo-rodriguez]

Cool, thanks @tylersticka! 😀