≡

wincent.dev

  • Products
  • Blog
  • Wiki
  • Issues
You are viewing an historical archive of past issues. Please report new issues to the appropriate project issue tracker on GitHub.
Home » Issues » Feature request #1530

Feature request #1530: Drop table-based CSS for comment display

Kind feature request
Product wincent.dev
When Created 2010-04-02T06:59:16Z, updated 2010-06-26T12:01:17Z
Status closed
Reporter Greg Hurrell
Tags no tags

Description

In the issue tracker and elsewhere comments are displayed inside a table.

If such a comment includes a <pre></pre> block then the table will expand to be as wide as is necessary in order to display the block without any wrapping. This can cause a horizontal scrollbar to appear and horizontal scrolling is seldom a comfortable thing.

So to get around this problem I've always had CSS which artificially imposes a max-width of 640px to any <pre></pre> block matching the table pre selector.

See ticket #1528 for an example of what this looks like. It is definitely the lesser of two evils, but it still looks ugly having artificially contrained <pre></pre> blocks.

I know that when I initially did the CSS I tried to do the comments without using tables, but couldn't get it to work nicely with alternating row colors.

Note that blog comments use a different style entirely involving speech bubbles (see this post, for example) and so don't suffer from either problem: tables aren't used so we don't have artificial constraints, and neither do we have unwanted horizontal scrolling.

So I'm opening this ticket as a reminder to revisit this issue.

I don't really want to switch to the "speech bubble" model for issue tracker comments or the forums, but I could potentially borrow some of the elements involved.

Once that problem is solved the remaining one will be the issue descriptions themselves, which also appear in tables and therefore also use the max-width constraint.

Comments

  1. Greg Hurrell 2010-06-24T09:52:28Z

    See also issue #1591, where I talk about changing the speech bubble DOM just a little (replacing nested "div" elements with "ol" and "li" elements).

  2. Greg Hurrell 2010-06-26T11:50:49Z

    Ok, so this is kind of sorted out now.

    I've made issue comments into "ol" lists, and have applied styling that makes them look like tables. They don't look exactly like the old ones because it was basically impossible to achieve an identical look:

    • the background coloring is applied to the entire row (caption and comment) rather than just the comment side on the right
    • if the window is made very narrow the caption and the comment will end up wrapping (ie. caption will appear above and comment below)
    • may not look nice in crappy browsers (but as most of the traffic I am interested in is either Mac-using or tech savvy, I can probably assume that most visitors are coming with Firefox 3, Safari 4, Google Chrome or above)

    Gonna roll with it anyway and see how it goes.

  3. Greg Hurrell 2010-06-26T12:01:17Z

    Status changed:

    • From: new
    • To: closed
Add a comment

Comments are now closed for this issue.

  • contact
  • legal

Menu

  • Blog
  • Wiki
  • Issues
  • Snippets