[Bug]: Add icon is huge in pages SEO tab

[ufoloko]

Is there an existing issue for this?

• [X] I have searched the existing issues

What happened?

After install or upgrade last version 9.13.4, SEO section inside Advanced tab is showing in this way.

Icon and link for Add URL are not taking any style, so button is displaying very big.

Steps to reproduce?

1.- Install last version 9.13.4 or simple update any site to this last version.

2.- Edit any page settings

3.- Click on Advanced tab, then SEO tab.

Current Behavior

Button for Add URL is being showed very big, specially for the svg icon

Expected Behavior

Button for Add URL should be displayed in this way

Relevant log output

No response

Anything else?

This happen with last version 9.13.4, even if you install from zero or if you update a site.

Affected Versions

9.13.4 (alpha)

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[valadas]

Hmm, that probably got missed in this update: https://github.com/dnnsoftware/Dnn.Platform/pull/6099

The fix should be similar than what was done everywhere else but a file got somehow missed.

[ufoloko]

Hi @valadas digging a little i found something.

For some reason, that className is not being rendering in Pages.Web client component, that should be automatically generated by webpack.

Looking a little bit webpack settings, the only difference is Pages.Web component is to have those additional config lines on css-loader plugin

I checked all other client components and don´t have those lines, so probably there can be the issue.

Sadly i was not able to run webpack because im receiving a lot of issues or warnings when running yarn install, so im not able to check if removing the lines solve the problem

[bdukes]

You may want to try running corepack enable to make sure the correct version of Yarn is setup.

[ufoloko]

I already tried that, but it appears is not a yarn issue, is more related with node packages

[jeremy-farrance]

Note: I'll get a fix/pull in later this week or this coming weekend.

I figured this out. I am assuming the upper cased 'a' was introduced by mistake? In src\components\Seo\PageUrls\ Table.jsx, if you added console logging after the imports:

console.log('styles: ', styles);

Here is the output, notice the "AddItemRow"... the "A" is getting lowercased. Probably as it should be. Especially since in Table.jsx, urlRow is lowercased.

{
    "urlRow": "style-module__urlRow--zLUFg",
    "addItemRow": "style-module__AddItemRow--BmX9J"
}

Which then requires that when you assign the className, its now styles.addItemRow, so:

        return (
            <div>
                <div className={styles.addItemRow}>
                                      ^^

After removing the console log and recompiling:

"No biggie!"

[david-poindexter]

Thank you @jeremy-farrance - looking forward to your PR!