[Bug] Footer display option for site-wide license is flush to left viewport edge

[possumbilities]

Description

At a minimum one would expect that the footer display option for the plugin would show the license details with some level of parity with the active theme, but instead it just left aligns the image and test to the far left edge of the viewport with no padding or margin.

Reproduction

1. Activate the plugin
2. Navigate to Settings > Creative Commons
3. Select "Display license as" Footer checkbox
4. Save options
5. Navigate to the f/e of the site, and scroll to the footer section
6. See error.

Expectation

I believe a user would generally expect that the bounds of the license displayed in the footer either follow within the confines of the rest of the site content (via the active theme) OR at a minimum include a small degree of left-edge padding/margin to make it more visually readable.

Screenshots

Environment

• Browser: Chrome
• Version: 2021.04.1

Resolution

• [x] I would be interested in resolving this bug.

[CRortyDG]

I think a better solution would be adding the CC footer element to the natural HTML <footer>\ element to match with site styles, but here is a possible fix that uses the same math as the default footer.

[possumbilities]

@CRortyDG In principle I like your suggestion that it should be in the natural HTML <footer> element, but unfortunately there is no guarantee that any theme will have that element. There are still sites and themes that utilize <div> elements for nearly everything so I don't know of a way that we could safely make that route work.

As for you alternate fix, is that something you intend to submit as a Pull Request?

[CRortyDG]

Understandable it cannot be added to the <footer> element!

I would like to submit a Pull Request! I have yet to do this and was only just getting started in open source with a problem I understood. I will have to read more about submitting pull requests to ensure I do it correctly before I do this though.

As for my solution... Thinking about the problem on a wider scale, I am not sure the chosen variable will work, and it will instead need to be defined differently. That variable is defined through the Twenty Twenty-One theme, but not on other themes (specifically not Twenty Twenty-Two in an additional test.)

Do you have any thoughts on a better variable to use in place of --global--spacing-horizontal @possumbilities? Testing 5% seems to work well on multiple screens... I will read more about submitting Pull Requests and better test a solution!

[abuansarpatowary]

@possumbilities, @TimidRobot Please take a look at this PR https://github.com/creativecommons/wp-plugin-creativecommons/pull/224 and let me know if any enhancements are needed.