"About This Example" text is not always aligned properly

[charmarkk]

In the About This Example section in many examples, the text inside of it is not aligned or wrapped correctly. Discovered via #2569's checks.

The first bullet point in this section is aligned with the lower left corner of the button icon when in a standard desktop viewport. Shrinking it to a certain degree, but not triggering the mobile breakpoint, fixes it and it mostly appears aligned properly - the bullets are below the icon with the "Similar examples include" text floating off to the right. Once the mobile breakpoint is triggered however, the same issue then exists, again fixing itself if the viewport shrinks enough. Screenshot of this behavior follows.

Example page: https://www.w3.org/WAI/ARIA/apg/patterns/button/examples/button/

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed "About This Example" text is not always aligned properly.

The full IRC log of that discussion

<jugglinmike> Subtopic: "About This Example" text is not always aligned properly
<jugglinmike> github: https://github.com//issues/2648
<jugglinmike> Matt_King: Does this happen on every single example page?
<jugglinmike> MarkMcCarthy: No. It doesn't happen on Alert or Slider. It might just be the Button
<jugglinmike> MarkMcCarthy: It may depend on how much text precedes the list
<jugglinmike> Matt_King: It does have some of the smallest amount of text
<jugglinmike> Andrea: I see it, as well
<jugglinmike> Howard_Edwards: I see it, as well
<jugglinmike> Andrea: I'm seeing a negative value for a CSS margin which looks suspicious to me.
<jugglinmike> Alex_Flenniken: That margin comes from the template
<jugglinmike> MarkMcCarthy: But that doesn't appear to be the cause in and of itself
<jugglinmike> Howard_Edwards: It looks like the content above has been implicitly pushing down the list so that the bullets clear the graphic
<MarkMcCarthy> jugglinmike: not so suggest a structural change for a presentational problem, but if we wrapped the icon and intro text in a block level element, it may make it even easier to flow everything correctly
<MarkMcCarthy> s/so suggest/to suggest
<jugglinmike> Matt_King: This feels like kind of a minor issue. Its coded as "bug" and "site design" right now
<jugglinmike> MarkMcCarthy: This is a little distracting, but not a big deal. I think we can keep it in the backlog as "low priority"
<jugglinmike> Matt_King: Okay, then we'll do that
<jugglinmike> Zakim, end the meeting