WebPartTitle font-size doesn't adjust in mobile view like other SharePoint WebParts

[ThomasLamb]

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.7.0 ]

Expected / Desired Behavior / Question

On an out-of-the-box SharePoint WebPart like "Highlighted content" when you view the page with browser width less than 320px the font-size used is 14px, then from 320px to 480px the font-size used for the title is 21px, and when the browser width is greater than 480px the font-size is 24px.

I expect that the font-size of the <WebPartTitle /> should do the same thing as out-of-the-box SharePoint WebPart.

Observed Behavior

The font-size of <WebPartTitle /> is always 24px no matter how wide or thin my browser is.

Steps to Reproduce

Add a <WebPartTitle /> control to a custom WebPart per the documentation, then run the WebPart and add it to the workbench. Now shrink the browser window to a size smaller than 480px wide and observe that the font-size of the rendered title doesn't adjust.

[ThomasLamb]

Thank my UI approving co-worker for first spotting this really minor issue, heh.

I've created a fix in a fork https://github.com/ThomasLamb/sp-dev-fx-controls-react/

The only file changed is src/controls/webPartTitle/WebPartTitle.module.scss. In it:

1. I changed the default font-size of 24px to 14px;
2. Added some media queries to modify the font-size at different browser sizes:

  @media (min-width: 320px) {
    font-size: 21px;
  }

  @media (min-width: 480px) {
    font-size: 24px;
}

I'm just not sure how to test this change, first time modifying a package. 😳
I figured out how to reference a local package in package.json and have tested the change. There was a bug with my change, I had max-width when it should've been min-width in the media query. 😅

[estruyf]

Thanks @ThomasLamb your PR got merged and will be available in version 1.8.0. If you want you can already test out the beta version in a couple of minutes: https://sharepoint.github.io/sp-dev-fx-controls-react/beta/

[estruyf]

Closing the issue as version 1.8.0 has just been released.