[wp-trac] [WordPress Trac] #63689: [Bug] My Sites dashboard layout doesn't adapt to long site names

[WordPress Trac]

#63689: [Bug] My Sites dashboard layout doesn't adapt to long site names
--------------------------------+------------------------------
 Reporter:  ratul01047          |       Owner:  (none)
     Type:  defect (bug)        |      Status:  new
 Priority:  normal              |   Milestone:  Awaiting Review
Component:  Networks and Sites  |     Version:  4.3
 Severity:  normal              |  Resolution:
 Keywords:  has-patch           |     Focuses:  ui, multisite
--------------------------------+------------------------------
Changes (by sabernhardt):

 * version:  6.8 => 4.3


Old description:

> **Problem**: Site names that are longer than the fixed container width
> get truncated or cause layout issues in the My Sites dashboard.
>
> **Current Behavior**: [[Image(https://tinyurl.com/yohng9pu)]]
>
> **Expected Behavior**: Site containers should adapt to content width for
> better readability.
>
> **Proposed Solution**: Add `width: auto` or similar responsive styling to
> site list items.

New description:

 **Problem**: Site names that are longer than the fixed container width get
 truncated or cause layout issues in the My Sites dashboard.

 **Current Behavior**:
 https://www.awesomescreenshot.com/image/55409211?key=e2878c76ab4d9779e9dc7a7ce348457a

 **Expected Behavior**: Site containers should adapt to content width for
 better readability.

 **Proposed Solution**: Add `width: auto` or similar responsive styling to
 site list items.

--

Comment:

 This calls attention to a few things about the list on the My Sites page:
 1. @ratul01047's image shows a single narrow container for a network of
 one site (using the subdomain as its Site Title). [33072] made columns
 responsive, but it set width percentages for up to six columns without
 checking if the user's total is fewer than that.
 2. PR 9242 adds CSS to break long words onto multiple lines if necessary.
 That works, yet reusing the `word-wrap-break-word` class on the `ul` (or
 the individual `li` elements) would achieve the same goal.
  \\ `<ul class="my-sites striped word-wrap-break-word">`
 3. The My Sites page has `h3` headings that skip the `h2` level. Both
 elements are styled the same, so the headings could be changed to `h2`
 rather easily.
 4. Further outside the original scope of this ticket, any Global Settings
 content outputs inside the `ul` without its own `li`. This was a table row
 with two columns before [33072], so the content might not belong inside
 the list. I did not find any
 [https://github.com/search?q=add_filter%28+%27myblogs_options%27&type=code
 examples of the filter] using the 'global' context.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63689#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform