added grids and adjusted padding, font size, and alignment of my widget and profile page

[DynieM]

No description provided.

[clpetersonucf]

Some high-level thoughts about the responsive UX:

Profile page

• The sidebar should be hidden and the profile pic and navigation options relocated (likely to a nav bar) at slimmer page widths. Horizontal real estate becomes very valuable with these widths, and the sidebar consumes too much of it.
• Individual activity log rows are not responsive, and extend beyond the right side of the page.

My Widgets page

• Responsive elements do not kick in soon enough - the side bar extends well beyond the left side of the page before repositioning vertically at the bottom.
• The side bar could use some style changes to better take advantage of the horizontal real estate when vertically arranged. This includes extending the search bar and allowing widget titles to occupy the full width of the viewport, instead of being restricted to a limited fixed width.
• Selected widget elements should be better aligned. The instance title is positioned well to the right of where it should be, and most content sections appear to be left-aligned instead of center-aligned.
• Make sure to test display of the score activity section with and without instance scores present. Patrick made some great strides with making the score activity table responsive, but we want to make sure that's the case down to a reasonable minimum width.

In both cases, I think making the responsive elements kick in around the same breakpoint as the header navigation (~720px) is reasonable, but it all depends on what the functional minimum width of the page is. For My Widgets, that may be wider. It's also reasonable to enforce a minimum width for responsive elements, something like 480px.

As far as accessibility is concerned, the profile and settings page are solid, with the exception that the radio group for selecting user icons does not allow "None" to be selected. In My Widgets, there are still a number of issues:

1. The instance list in the sidebar is not properly treated as a menu or list of links. Individual instances are not in the tab sequence, despite being inputs.
2. The search input is not properly represented to the screen reader.
3. Many of the selected instance inputs are not accessible. These include Edit Widget, Collaborate, Make a Copy, Delete, Edit Settings, the learn more and embed code links in Share With Your Students, view all sharing options, and the Export Options button.