Bug: View on open sauced button has inconsistent spacing

[marcusgchan]

Describe the bug

The view on open sauced button has inconsistent spacing. Here are a few things I've noticed. This issue is related to #89

If there’s a follow button, then there will be extra space between the follow and view on open sauced button since there’s a margin bottom. However, the interesting part is the behaviour is different in development and production. Here is a screenshot of what it looks like in prod:

Here is what it looks like in development:

The spacing is consistent and a lot smaller because the classes aren't being overwritten by Github's classes. The reason for the different behaviour during development and production is during development, vite's HMR for CSS works by injecting CSS into the <style> tag in the header.

In the above screenshot for development, there are at least 2 tailwind classes causing issues since it's overwriting Github's classes due to style in <style> tag + !important taking precedence over github's styles with !important

1. Open sauced's mb-0 takes precedence and removes the margin bottom from the follow button only in development. In production, Github's classes has higher precedence.

2. The my-4 class takes precedence only in development so the spacing between the open sauced button and follow button is smaller in development compared to production. Development screenshot:
   Production screenshot:

To summarize, the spacing between view on open sauced button and follow button and margin top and bottom for the view on open sauced button is inconsistent between dev and prod b/c css is injected into the <style> tag only in development which has a higher precedence (Open sauced styles take precedence for dev and Github's classes takes precedence during prod). Another reason for the inconsistent spacing is the class my-4 and mb-0 is used by github and tailwind.

One solution could be to inject the view on open sauced button in a different location like always after the username. There will still be the issue of different spacing in dev and prod but it'll be less noticeable.

Or we could consider prefixing tailwind classes to avoid conflicts.

Steps to reproduce

1. Open a tab and go to bdougie's profile with the prod version of open sauced
2. Open a new window and go to the same profile in development

Browsers

No response

Additional context (Is this in dev or production?)

dev and prod have different behaviours

Code of Conduct

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

Contributing Docs

• I agree to follow this project's Contribution Docs

[marcusgchan]

I think this also affects other things for example I'm getting a layout shift when I refresh the page. To reproduce, go the profile page and refresh the page on development and do the same in production.

In this video, Iook for the layout shift initially. Then I will switch to the prod and there's no more layout shift. In addition, there's also a spacing issue when the extension is running in development (happening because of same reason explained in issue description):

These are screenshots from the video below:

Timestamp (0:12):

Timestamp (0:32):

Screen.Recording.2023-08-18.at.6.56.55.PM.mov

[Anush008]

@marcusgchan, regarding your suggestion to move the buttons, what other location do you have in mind for the buttons on the profile page?

[marcusgchan]

I'm not quite sure. Personally, It seems the most intuitive where it currently is or after the username (before the follow button).

[bdougie]

I think the current placement of the button is fine and we probably just need to adjust for edge cases.

This is what is currently in Production.

user not on opensauced but sponsoring

user with view button and viewing their own profile

user with view button and sponsor button

The local dev issue may be something we ignore, and we leave this issue open for now.

[a0m0rajab]

This is related to this issue: #146 which explained the edge cases and opened for contributors, I will work on this in the next few days to solve both of them.

[a0m0rajab]

.take

[a0m0rajab]

I have solved the button spacing that could be done from our side, yet we still have the conflict that's happening in #89 to impact this. if we solve that we could have a better UX/UI for the button.

[github-actions]

🎉 This issue has been resolved in version 1.14.2-beta.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 1.14.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀