Fixes : [Pricing] Make Tier Comparison Header Sticky #6122 #6767

priyanshu4999 · 2025-08-30T16:37:02Z

Description

Fixes : [Pricing] Make Tier Comparison Header Sticky and Update Comparison Component (#6122)

-- Feature request for sticky header on comparison table for easy view.

Notes for Reviewers

Screen.Recording.2025-08-30.205718.mp4

-- Sticky header (Subscription Tier header) positioning uses relative measurements independent of navbar length for it to adapt to different screen widths (future point of concern).
-- Tables split into two and concatenated to implement the feature. Table widths updated; overflow-x now scrolls properly on smaller devices.
-- Media queries adjusted for responsive design.

Signed commits

Yes, I signed my commits.

…lable body Signed-off-by: priyanshu4999 <[email protected]>

Signed-off-by: priyanshu4999 <[email protected]>

l5io · 2025-08-30T17:03:04Z

🚀 Preview for commit 57cbe2b at: https://68b32e6ad231841ea0e539e4--layer5.netlify.app

vr-varad · 2025-08-31T09:05:39Z

src/sections/Pricing/comparison.js

@@ -1,40 +1,39 @@
 import React from "react";
 import styled from "styled-components";
-import details  from "./generateDetails";


Remove this unwanted change.

vr-varad

The table and header are not in sync, if I move the table the header doesn't move with it.

vr-varad · 2025-08-31T09:10:43Z

src/sections/Pricing/comparison.js

-.price-table tr:hover {
-    background-color: ${props => props.theme.secondaryLightColor};
+  .price-table tr:hover {
+    background-color: ${(props) => props.theme.secondaryLightColor};


please remove unwanted formatting changes.

vr-varad · 2025-08-31T09:12:00Z

src/sections/Pricing/comparison.js


-.price-table tr.price-table-head td {
+  .price-table tr.price-table-head td {
    font-size: 1.15rem;


here as well.

vr-varad

@priyanshu4999 Please remove unwanted formating changes.

…isble for main container, tuned header postion w.r.t nav bar , updated media queries for table width and position Signed-off-by: priyanshu4999 <[email protected]>

Signed-off-by: priyanshu4999 <[email protected]>

priyanshu4999 · 2025-08-31T11:23:37Z

Apologies for unwanted formatting, I will remember to disable code formatter in future.
As for Sync body and head, Now both ways scrolling works, somehow missed it while testing on desktop.

l5io · 2025-08-31T11:36:33Z

🚀 Preview for commit df5ecb5 at: https://68b433233ff74e21707f02bd--layer5.netlify.app

Signed-off-by: priyanshu4999 <[email protected]>

l5io · 2025-08-31T11:54:27Z

🚀 Preview for commit 4e7e889 at: https://68b437a8f002a9573bbf6038--layer5.netlify.app

vr-varad

As you have removed the scroll from the table its very difficult to find how to scroll (sideways)

like this one which is present in the current folder.

priyanshu4999 · 2025-08-31T18:48:44Z

I get that, The scroll on table before was at very bottom, one need to scroll completely down to there , write now it is just below header and is visible on hover keeping previous theme , only thing i did is to shift it below sticky header and make it thin. If that is uncomfortable i can replace it at table end and revert it to normal thickness.

l5io · 2025-08-31T18:55:37Z

🚀 Preview for commit 3111c76 at: https://68b49a0a42a18050e8344dbb--layer5.netlify.app

vr-varad · 2025-09-01T07:52:14Z

Thank you for your contribution!
Let's discuss this during the website call today at 5:30 PM IST | 7 AM CT

Add it as an agenda item to the meeting minutes, if you would :)

Signed-off-by: priyanshu4999 <[email protected]>

l5io · 2025-09-01T17:15:21Z

🚀 Preview for commit 5f79c51 at: https://68b5d44c9b84c822877bcc6f--layer5.netlify.app

l5io · 2025-09-01T19:41:05Z

🚀 Preview for commit 6d47d9a at: https://68b5f62eda4b29aa713fa065--layer5.netlify.app

priyanshu4999 · 2025-09-06T19:51:27Z

Hi @vr-varad, just wanted to ask if anything is pending for this pr to be resolved?

l5io · 2025-09-07T07:19:46Z

🚀 Preview for commit be78861 at: https://68bd31bfcd486a77c29d99c1--layer5.netlify.app

Namanv0509 · 2025-09-15T07:54:45Z

Thank you for your contribution!
Let's discuss this during the website call today at 5:30 PM IST | 7 AM CT

Add it as an agenda item to the meeting minutes, if you would :)

Namanv0509 · 2025-09-22T10:54:36Z

Thank you for your contribution!
Let's discuss this during the website call today at 5:30 PM IST | 7 AM CT

Add it as an agenda item to the meeting minutes, if you would :)

Rajesh-Nagarajan-11

while scrolling half of the headings alone sticky , balance goes up

kindly consider this and make it possible , Thank you

Namanv0509 · 2025-10-08T23:32:39Z

@priyanshu4999 any update on it ?

l5io · 2025-10-08T23:47:13Z

🚀 Preview for commit 512d667 at: https://68e6f7a7c157e091492f7c3c--layer5.netlify.app

Rajesh-Nagarajan-11 · 2025-10-26T15:21:43Z

@priyanshu4999 any updates ??

l5io · 2025-11-13T07:30:20Z

🚀 Preview for commit 239bbcb at: https://691588b458452d0963958e16--layer5.netlify.app

leecalcote · 2025-12-01T07:17:16Z

merge conflict.

leecalcote · 2025-12-01T07:17:47Z

There has been no update from the PR author for a month or so. I'll close this PR.

priyanshu4999 added 2 commits August 30, 2025 22:16

split comparison table to two stacked table for sticky head and scrol…

5b5a15f

…lable body Signed-off-by: priyanshu4999 <[email protected]>

sync column widths of header and body tables of comparison component

f3a7247

Signed-off-by: priyanshu4999 <[email protected]>

priyanshu4999 force-pushed the comparison-component branch from 9c5d4f9 to 57cbe2b Compare August 30, 2025 16:47

leecalcote requested a review from Namanv0509 August 30, 2025 16:52

vr-varad reviewed Aug 31, 2025

View reviewed changes

vr-varad suggested changes Aug 31, 2025

View reviewed changes

vr-varad reviewed Aug 31, 2025

View reviewed changes

vr-varad suggested changes Aug 31, 2025

View reviewed changes

priyanshu4999 added 2 commits August 31, 2025 16:37

Updated css , position sticky , overflow-x to scroll for body and vis…

afc37c5

…isble for main container, tuned header postion w.r.t nav bar , updated media queries for table width and position Signed-off-by: priyanshu4999 <[email protected]>

Removed Added Body-head scroll sync too, unwanted Formatting Changes

df5ecb5

Signed-off-by: priyanshu4999 <[email protected]>

priyanshu4999 force-pushed the comparison-component branch from 57cbe2b to df5ecb5 Compare August 31, 2025 11:20

chore: fix lint error (trailing spaces)

4e7e889

Signed-off-by: priyanshu4999 <[email protected]>

vr-varad suggested changes Aug 31, 2025

View reviewed changes

Enabled table bottom scroll

5f79c51

Signed-off-by: priyanshu4999 <[email protected]>

priyanshu4999 force-pushed the comparison-component branch from 3111c76 to 5f79c51 Compare September 1, 2025 16:59

Merge branch 'master' into comparison-component

6d47d9a

Merge branch 'master' into comparison-component

be78861

Rajesh-Nagarajan-11 reviewed Sep 22, 2025

View reviewed changes

Merge branch 'master' into comparison-component

512d667

Merge branch 'master' into comparison-component

239bbcb

Namanv0509 self-assigned this Nov 13, 2025

Namanv0509 added 2 commits November 14, 2025 17:09

Merge branch 'master' into comparison-component

ce338d7

Merge branch 'master' into comparison-component

38928c7

leecalcote closed this Dec 1, 2025

Fixes : [Pricing] Make Tier Comparison Header Sticky #6122 #6767

Fixes : [Pricing] Make Tier Comparison Header Sticky #6122 #6767

Uh oh!

Conversation

priyanshu4999 commented Aug 30, 2025

Uh oh!

l5io commented Aug 30, 2025

Uh oh!

vr-varad Aug 31, 2025

Choose a reason for hiding this comment

Uh oh!

vr-varad left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vr-varad Aug 31, 2025

Choose a reason for hiding this comment

Uh oh!

vr-varad Aug 31, 2025

Choose a reason for hiding this comment

Uh oh!

vr-varad left a comment

Choose a reason for hiding this comment

Uh oh!

priyanshu4999 commented Aug 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

l5io commented Aug 31, 2025

Uh oh!

l5io commented Aug 31, 2025

Uh oh!

vr-varad left a comment

Choose a reason for hiding this comment

Uh oh!

priyanshu4999 commented Aug 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

l5io commented Aug 31, 2025

Uh oh!

vr-varad commented Sep 1, 2025

Uh oh!

l5io commented Sep 1, 2025

Uh oh!

l5io commented Sep 1, 2025

Uh oh!

priyanshu4999 commented Sep 6, 2025

Uh oh!

l5io commented Sep 7, 2025

Uh oh!

Namanv0509 commented Sep 15, 2025

Uh oh!

Namanv0509 commented Sep 22, 2025

Uh oh!

Rajesh-Nagarajan-11 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Namanv0509 commented Oct 8, 2025

Uh oh!

l5io commented Oct 8, 2025

Uh oh!

Rajesh-Nagarajan-11 commented Oct 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

l5io commented Nov 13, 2025

Uh oh!

leecalcote commented Dec 1, 2025

Uh oh!

leecalcote commented Dec 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

vr-varad left a comment •

edited

Loading

priyanshu4999 commented Aug 31, 2025 •

edited

Loading

priyanshu4999 commented Aug 31, 2025 •

edited

Loading

Rajesh-Nagarajan-11 left a comment •

edited

Loading

Rajesh-Nagarajan-11 commented Oct 26, 2025 •

edited

Loading