[wp-meta] [Making WordPress.org] #4917: Trac needs more responsive styles

[Making WordPress.org]

#4917: Trac needs more responsive styles
-------------------------------------------------+-------------------------
 Reporter:  sumitsingh                           |       Owner:  (none)
     Type:  defect                               |      Status:  new
 Priority:  normal                               |   Milestone:
Component:  Trac                                 |  Resolution:
 Keywords:  needs-design-feedback has-patch      |
  has-screenshots                                |
-------------------------------------------------+-------------------------

Comment (by vladytimy):

 Solutions for [comment:9 this comment]:
 > between 550px and 640px breakpoints both avatars float right

 Here I have a dilemma. CSS comment says: {{{img.avatar {float: right; /*
 move it to the right to help prevent collisions */} }}} but I can't
 reproduce any collisions without floating right even with longer names
 given that ''Reported by'' & ''Owned by'' are static length strings.
 (4917.2.patch removes floating - we either test it or let the floating
 right as it is currently)

 > between 640px and 770px breakpoints ''Reported by'' & ''Owned by:''
 overlaps reporter's & owner's avatar
 Explored solutions:
 - Avatar floating right is not consistent with the design
 - Changing margin-left from -60px to 0; moving rule from (max-width:
 640px) to (max-width: 770px)   (**chosen approach**)

 > between 640px and 770px breakpoints the {{{#modify .trac-properties}}}
 table has styling issues
 Explored solutions:
 - smaller width columns results in a crowded design and needs different
 HTML/selectors
 - moving table rules from (max-width: 640px) to (max-width: 770px) creates
 one column, but intricates up ''Keywords'' and ''Focuses'' fields, making
 unclear what input is for what section. (see screenshot
 ''4917.bad_explored_solution_640-770p'')
 - reducing {{{#focuses}}} padding-right from 52px to 22px on this screen
 size - it aligns with above element. (**chosen approach**)


 All these are small things, but make trac look better on medium screens.

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/4917#comment:10>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org