fix: Fix CSS inconsistency in Contributor Highlights for "Home" and "Following" tabs for `/feed` route #1783

5hraddha · 2023-10-02T21:34:36Z

Description

This PR fixes CSS inconsistency in Contributor Highlight Cards for "Home" and "Following" tabs for /feed route.

What type of PR is this? (check all applicable)

Related Tickets & Documents

Fixes #1778

Mobile & Desktop Screenshots/Recordings

Before the change:
https://github.com/open-sauced/app/assets/27571141/c5dbdbe5-7893-48d4-976a-c0d2450afa4c

272104773-c5dbdbe5-7893-48d4-976a-c0d2450afa4c.2.mov

After the change:
https://github.com/open-sauced/app/assets/27571141/e9e82d49-71df-4efd-83e3-672e6e3eb16f

272093777-e9e82d49-71df-4efd-83e3-672e6e3eb16f.mp4

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2023-10-02T21:34:40Z

✅ Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`84f6447`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/6527306f0192370008fd79f1
😎 Deploy Preview	https://deploy-preview-1783--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2023-10-02T21:34:40Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`84f6447`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/6527306fabc3890008266cd2
😎 Deploy Preview	https://deploy-preview-1783--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

nickytonline · 2023-10-02T22:26:50Z

Thanks for the PR @5hraddha! Mind adding a before and after screenshot or video in the description?

5hraddha · 2023-10-02T22:41:04Z

Mobile & Desktop Screenshots/Recordings

Thanks for the PR @5hraddha! Mind adding a before and after screenshot or video in the description?

Sure @nickytonline! I've added a video recording in Mobile & Desktop Screenshots/Recordings section after the change, but I'll do for the before the change too. Thanks!

bdougie · 2023-10-02T23:02:01Z

I've added a video recording in Mobile & Desktop Screenshots/Recordings section after the change, but I'll do for the before the change too. Thanks!

I embedded them to save a click

bdougie

Looks good.

5hraddha · 2023-10-02T23:21:44Z

I've added a video recording in Mobile & Desktop Screenshots/Recordings section after the change, but I'll do for the before the change too. Thanks!

I embedded them to save a click

Thanks @bdougie!

jpmcb

Thanks for diving into this!! 🍕 🚀

jpmcb

(apologies for the re-review) Looks like, on diving deeper, this is still a problem with responsive, smaller screen sizes:

resized-home-following.mov

Notice when I make the screen abit smaller and the feed collapses in abit, the problem persists. On the other responsive screens (like for the smaller mobile view), it seems fine. Just the first resizing still seems broken.

Maybe there's an additional class we're missing?

5hraddha · 2023-10-03T02:43:52Z

(apologies for the re-review) Looks like, on diving deeper, this is still a problem with responsive, smaller screen sizes:

resized-home-following.mov
Notice when I make the screen abit smaller and the feed collapses in abit, the problem persists. On the other responsive screens (like for the smaller mobile view), it seems fine. Just the first resizing still seems broken.

Maybe there's an additional class we're missing?

Thanks for noticing that @jpmcb. I've fixed the glitch. Here is the recording for the reference. Please, let me know if that is suffice. Thanks!

opensauced-app-style-fix-v2.mp4

OgDev-01

LGTM

jpmcb

2023-10-03.15-36-58.mp4

It looks like there's still one view that doesn't have the same styling.

Notice the 3rd resizing in my screen capture still has a problem.

5hraddha · 2023-10-03T21:53:35Z

jpmcb

2023-10-03.15-36-58.mp4
It looks like there's still one view that doesn't have the same styling.

Notice the 3rd resizing in my screen capture still has a problem.

Hey @jpmcb, Could you please help me with the screen size where the CSS breaks?

jpmcb · 2023-10-03T22:15:27Z

Sure! If I go less than 1280px wide, it drops to a smaller size without the user profile column on the left:

NsdHSO

Good to ship.

5hraddha · 2023-10-04T20:14:18Z

Am sorry that this is prolonging this far. But, it's bit weird @jpmcb. I could see different behaviours in different browsers. On Chrome, it's all good at screen width smaller than 1280px. Notice the sizes of the card on inspection. They are same. Attaching a recording for reference:

opensauce-google-test.mp4

On Firefox, I do see some negligible glitch. On inspection alone, I saw that there is a minute difference in the sizes of the card.

opensauce-firefox-test.mp4

Which browser are you checking on?

nickytonline · 2023-10-06T13:23:42Z

Which browser are you checking on?

@jpmcb is using Firefox, so we should ensure it works well there as well.

5hraddha · 2023-10-10T00:17:21Z

@nickytonline @jpmcb I figured out that there was a bug in tailwind.config.js while adding the additional smallest breakpoint - xs. As per the Tailwind documentation, if we want to add an additional small breakpoint, we can’t use extend because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system. So, I have updated the config as suggested in the documentation.

Once that was done, my breakpoints were working as they should without the surprising behaviour. Then, I have added extra needed Tailwind classes to the component, to make sure they are rendered the same way in both the browsers.

Attaching the screen recording for reference:

Chrome

opensauced-app-style-fix-v3-chrome.mp4

Firefox

opensauced-app-style-fix-v3-firefox.mp4

I believe that should resolve the issue. Please, have a check and let me know if you find any other unusual CSS behaviour in this regard. Thank you!

jpmcb · 2023-10-10T19:56:56Z

Nice investigation on this!!!

I still see the same problem on the smaller view now only on Firefox:

Home feed (which seems to be slightly wider)

Following feed (which seems to be slightly narrower)

we can merge this in and try to roll forward a fix for the firefox edge case if people prefer

5hraddha · 2023-10-10T21:51:45Z

Thanks for your patience, @jpmcb. Appreciate your keen eye on UI, too.

I just feel that there is still something missing that I'm not able to find at the moment. The UI should not be this quirky in Firefox. I'll keep looking into this and will raise an issue if I happen to find the problem.

Thanks again!

## [1.71.0-beta.2](v1.71.0-beta.1...v1.71.0-beta.2) (2023-10-12) ### 🐛 Bug Fixes * Fix CSS inconsistency in Contributor Highlights for "Home" and "Following" tabs for `/feed` route ([#1783](#1783)) ([ad08c16](ad08c16)) * reset input state of delete list dialog box after closing the dialog and deleting the list ([#1877](#1877)) ([397570d](397570d))

## [1.71.0](v1.70.0...v1.71.0) (2023-10-19) ### ⏩ Reverts * clojure feature changes made directly to beta ([#1900](#1900)) ([7564245](7564245)) ### 🍕 Features * add clojure to dashboard interests ([7373865](7373865)) * add clojure to dashboard interests ([#1901](#1901)) ([e628041](e628041)) * add identifier to analytics ([#1887](#1887)) ([8169213](8169213)) * add keyboard binding for posting a highlight ([#1894](#1894)) ([346adff](346adff)) * Add OS detection hook and update search dialog ([#1760](#1760)) ([585a2aa](585a2aa)) * implemented usage of posthog.identify(identifier) ([30a4bc0](30a4bc0)) * issue support ([#1890](#1890)) ([a067789](a067789)) * show onboarding button on small screens ([#1803](#1803)) ([faf54bd](faf54bd)) ### 🐛 Bug Fixes * add check for listId to hooks ([#1869](#1869)) ([4bde212](4bde212)) * add responsiveness to profile detail ([#1892](#1892)) ([7466144](7466144)) * add target for the highlight link ([#1897](#1897)) ([d89d94b](d89d94b)) * Added isLoading condition to the title ([#1886](#1886)) ([03cd66d](03cd66d)) * adjust style for newsletter form so that it adjusts for smaller screens ([#1782](#1782)) ([9d97030](9d97030)) * attempt to clear any present service workers ([#1889](#1889)) ([e641223](e641223)) * can't update user profile bio passed 256 chars ([00a77be](00a77be)) * can't update user profile bio passed 256 chars ([#1898](#1898)) ([42c99c7](42c99c7)) * decreased delay time of tooltips ([3aef3c0](3aef3c0)) * decreased delay time of tooltips ([#1923](#1923)) ([fc50edf](fc50edf)) * Fix CSS inconsistency in Contributor Highlights for "Home" and "Following" tabs for `/feed` route ([#1783](#1783)) ([ad08c16](ad08c16)) * Fix horizontal padding /spacing on smaller screens for the Create New List form ([#1909](#1909)) ([e92a3d9](e92a3d9)) * hide secondary header in create insights page ([#1925](#1925)) ([a5245f7](a5245f7)) * list header misalignment now properly aligned ([#1941](#1941)) ([0224fa8](0224fa8)) * made active tab forecolor more prominent for hub navigation ([eeee241](eeee241)) * made active tab forecolor more prominent for hub navigation ([#1921](#1921)) ([fe997ed](fe997ed)) * match graph tooltip color with graph nodes ([#1930](#1930)) ([3f845d2](3f845d2)) * Modify Button Text ([#1942](#1942)) ([19a3484](19a3484)) * now legend labels in most active graph tooltip render properly ([#1927](#1927)) ([8a0ff79](8a0ff79)) * now treemap on list activity page appears on small screens ([c6ffb4a](c6ffb4a)) * now treemap on list activity page appears on small screens ([#1873](#1873)) ([92f9790](92f9790)) * refactored parameters for captureAnalytics to an object ([a2af672](a2af672)) * replace hash icon to arrow down for filter select ([#1825](#1825)) ([ee13255](ee13255)) * reset input state of delete list dialog box after closing the dialog and deleting the list ([#1877](#1877)) ([397570d](397570d)) * Unnecesary X-Scrollbar in tablist ([#1881](#1881)) ([9d72aeb](9d72aeb)) * update redirect paths to remove navigation errors ([#1888](#1888)) ([a2159d8](a2159d8))

update css with home highlights wrapper styles

ec0e6b8

bdougie approved these changes Oct 2, 2023

View reviewed changes

jpmcb approved these changes Oct 2, 2023

View reviewed changes

jpmcb requested changes Oct 2, 2023

View reviewed changes

add max width to fix style inconsistency

b17e62b

Merge branch 'beta' into shraddha/fix-css-consistenty

face3a2

OgDev-01 approved these changes Oct 3, 2023

View reviewed changes

OgDev-01 requested a review from jpmcb October 3, 2023 21:20

jpmcb requested changes Oct 3, 2023

View reviewed changes

NsdHSO approved these changes Oct 4, 2023

View reviewed changes

Merge branch 'beta' into shraddha/fix-css-consistenty

f54d771

OgDev-01 added the requested changes label Oct 6, 2023

5hraddha added 3 commits October 9, 2023 17:08

Merge branch 'beta' into shraddha/fix-css-consistenty

e10cc57

fix config for adding smaller breakpoints

08f0ddf

fix discrepancy in css style in firefox

a8a1183

5hraddha added 2 commits October 9, 2023 20:20

remove extra space in the url

8ff06fb

Merge branch 'beta' into shraddha/fix-css-consistenty

16fe6f5

Merge branch 'beta' into shraddha/fix-css-consistenty

c078fdb

OgDev-01 added ready-to-merge and removed requested changes labels Oct 11, 2023

Merge branch 'beta' into shraddha/fix-css-consistenty

84f6447

brandonroberts merged commit ad08c16 into open-sauced:beta Oct 12, 2023
10 checks passed

5hraddha deleted the shraddha/fix-css-consistenty branch October 16, 2023 18:59

fix: Fix CSS inconsistency in Contributor Highlights for "Home" and "Following" tabs for `/feed` route #1783

fix: Fix CSS inconsistency in Contributor Highlights for "Home" and "Following" tabs for `/feed` route #1783

5hraddha commented Oct 2, 2023 •

edited by bdougie

netlify bot commented Oct 2, 2023 •

edited

netlify bot commented Oct 2, 2023 •

edited

nickytonline commented Oct 2, 2023

5hraddha commented Oct 2, 2023

bdougie commented Oct 2, 2023

bdougie left a comment

5hraddha commented Oct 2, 2023

jpmcb left a comment

jpmcb left a comment •

edited

5hraddha commented Oct 3, 2023

OgDev-01 left a comment

jpmcb left a comment

5hraddha commented Oct 3, 2023

jpmcb commented Oct 3, 2023

NsdHSO left a comment

5hraddha commented Oct 4, 2023

nickytonline commented Oct 6, 2023

5hraddha commented Oct 10, 2023

jpmcb commented Oct 10, 2023

5hraddha commented Oct 10, 2023

fix: Fix CSS inconsistency in Contributor Highlights for "Home" and "Following" tabs for /feed route #1783

fix: Fix CSS inconsistency in Contributor Highlights for "Home" and "Following" tabs for /feed route #1783

Conversation

5hraddha commented Oct 2, 2023 • edited by bdougie

Description

What type of PR is this? (check all applicable)

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Oct 2, 2023 • edited

✅ Deploy Preview for oss-insights ready!

netlify bot commented Oct 2, 2023 • edited

✅ Deploy Preview for design-insights ready!

nickytonline commented Oct 2, 2023

5hraddha commented Oct 2, 2023

bdougie commented Oct 2, 2023

bdougie left a comment

Choose a reason for hiding this comment

5hraddha commented Oct 2, 2023

jpmcb left a comment

Choose a reason for hiding this comment

jpmcb left a comment • edited

Choose a reason for hiding this comment

5hraddha commented Oct 3, 2023

OgDev-01 left a comment

Choose a reason for hiding this comment

jpmcb left a comment

Choose a reason for hiding this comment

5hraddha commented Oct 3, 2023

jpmcb commented Oct 3, 2023

NsdHSO left a comment

Choose a reason for hiding this comment

5hraddha commented Oct 4, 2023

nickytonline commented Oct 6, 2023

5hraddha commented Oct 10, 2023

jpmcb commented Oct 10, 2023

Home feed (which seems to be slightly wider)

Following feed (which seems to be slightly narrower)

5hraddha commented Oct 10, 2023

fix: Fix CSS inconsistency in Contributor Highlights for "Home" and "Following" tabs for `/feed` route #1783

fix: Fix CSS inconsistency in Contributor Highlights for "Home" and "Following" tabs for `/feed` route #1783

5hraddha commented Oct 2, 2023 •

edited by bdougie

netlify bot commented Oct 2, 2023 •

edited

netlify bot commented Oct 2, 2023 •

edited

jpmcb left a comment •

edited