OpenSource.org | Post top margin causing display issues

[toncijajic]

A margin-top: -350px; was causing the top of the post to move "out of the page", we need to investigate why it happened.

Details

This bit of code was forcing the post out of page (screenshot: https://d.pr/i/QUAFjl): https://github.com/OpenSourceOrg/dotOrg/blob/09f69dfdc1984847a27182801844791475840af5/themes/osi/assets/scss/_6_components.wp-content.scss#L69

I fixed it temporarily by unsetting it via custom CSS:

/*2024-06-14 Tonci #8330205 temporary to solve top margin*/

.post .post--content {
    margin-top: unset;
}

However, that code has been there since August 2023, so something else must've changed to cause this issue.

We should investigate what and fix it.

[geoffguillain]

Hey @toncijajic

I have been able to identify when the issue has been introduced (Fev, 21st): PR (dev): https://github.com/OpenSourceOrg/dotOrg/pull/52 | PR (prod): https://github.com/OpenSourceOrg/dotOrg/pull/56

Before this pull request, blog posts used to have featured images. The post was displayed to overlap the image, hence the negative margin.

Here is a screenshot from my local environment before this PR with dummy content:

Since the theme does not use the feature image, we don't need this negative margin anymore.

I can remove it from the template's stylesheets if that works for you.

Extra

While investigating this issue, I have done a small Q/A and I have monitored 2 issues:

1. On all pages: when we hide the main navigation, the content loses the height of the navigation, and the content "jumps" up ~100 pixels. We should counterbalance when the navigation is hidden by adding the navigation's height as the top margin for content.
2. On Chrome (and slightly on Firefox) Blog archive page is having some trouble when the navigation is hidden. The navigation is flickering before disappearing. A class is added while the header is resized after some scrolling down on small devices. File responsible for this: https://github.com/OpenSourceOrg/dotOrg/blob/09f69dfdc1984847a27182801844791475840af5/themes/osi/assets/js/src/theme/header-resize.js

Please take a look at my feedback and let me know how you want to move forward.

[toncijajic]

@geoffguillain it feels weird the navigation is disappearing, it should follow the user scrolling down. Could it be a bug? Would it be easy to fix?

[geoffguillain]

Hey @toncijajic

This was done on purpose on large screens: https://github.com/OpenSourceOrg/dotOrg/blob/09f69dfdc1984847a27182801844791475840af5/themes/osi/assets/scss/_7_vendor.plugins.scss#L110-L113

The header is transforming to a minimized version, this can be seen on mobile. When it is happening on the desktop the menu is hidden. By the way, the styles of this minimized version of the header are not desktop-ready, cf. screenshot. If you want to keep the header visible at all times, we will need to revert the styles to the non-minimized version on large screens, or design something specific.

Could you please double-check that you want to re-enable the sticky header on large screens and some directions about the expected output if so?

[geoffguillain]

Hey @toncijajic,

I have created a PR for the original request. The blog posts on the develop server are fixed: https://open-source-initiative-development.mystagingwebsite.com/blog/open-source-ai-definition-weekly-update-mar-11

Please have a look, and let me know if I can merge this to production.

[toncijajic]

Thanks for the info @geoffguillain!

This was done on purpose on large screens:

Very weird.

Could you please double-check that you want to re-enable the sticky header on large screens and some directions about the expected output if so?

Yup, I'll confirm this shouldn't be happening.

Please have a look, and let me know if I can merge this to production.

Will do once I confirm with the partner that the print preview they use is working correctly, too.

[toncijajic]

@geoffguillain we're seeing some issues with H1 headings disappearing on the pages.

Examples:

• https://open-source-initiative-development.mystagingwebsite.com/osd
• https://open-source-initiative-development.mystagingwebsite.com/about-3/team

Could you spin up these changes on a fresh production clone so we can remove the environment variables and know what to fix?

[geoffguillain]

Hey @toncijajic

Could you spin up these changes on a fresh production clone so we can remove the environment variables and know what to fix?

The issue is not the staging server but the repo. Some commits/PR has been pushed only to the production branch.

I have cherry-picked the commits that I have found about the title and imported them to the develop branch. That should be enough for testing: https://open-source-initiative-development.mystagingwebsite.com/osd

I would recommend archiving the current develop branch and creating a new one based on trunk to align both environments. Before doing so, it would be better if there is no pending work on develop before doing this. I can see some opened issues currently working on: https://github.com/OpenSourceOrg/dotOrg/issues

[toncijajic]

@geoffguillain, thanks for the analysis!

Give us a day to get our ducks in a row and we'll ping back on the next steps.

[xpurichan]

@geoffguillain I've assessed the open issues:

1. https://github.com/OpenSourceOrg/dotOrg/issues/93 - active work in progress
2. https://github.com/OpenSourceOrg/dotOrg/issues/92 - this issue
3. https://github.com/OpenSourceOrg/dotOrg/issues/71 - awaiting partner feedback, prolonged delay
4. https://github.com/OpenSourceOrg/dotOrg/issues/55 - irrelevant since the partner has moved to another events solution
5. https://github.com/OpenSourceOrg/dotOrg/issues/34 - irrelevant since the partner has moved to another events solution

With this in mind, it sounds like we should wait for #93 to be completed (hopefully within a day or so). I can also communicate with the partner that we require a response and closure on #71 in order to move forward with this.

Let me know if that's a good plan of action for you.