Skip to content

fix: "scrollbar-gutter: stable" on html to prevent layout shift#11413

Merged
PeerRich merged 1 commit intocalcom:mainfrom
thepradipvc:bug/layout-shift
Sep 18, 2023
Merged

fix: "scrollbar-gutter: stable" on html to prevent layout shift#11413
PeerRich merged 1 commit intocalcom:mainfrom
thepradipvc:bug/layout-shift

Conversation

@thepradipvc
Copy link
Copy Markdown
Contributor

@thepradipvc thepradipvc commented Sep 17, 2023 •
edited
Loading

What does this PR do?

Added CSS to prevent layout shift.

Fixes #11398

  • Bug fix (non-breaking change which fixes an issue)

Mandatory Tasks

  • Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

@vercel
Copy link
Copy Markdown

vercel Bot commented Sep 17, 2023 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 17, 2023 6:49pm

@vercel
Copy link
Copy Markdown

vercel Bot commented Sep 17, 2023

@Chaudharypradip is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Sep 17, 2023 •
edited
Loading

Thank you for following the naming conventions! 🙏

@github-actions github-actions Bot added the 🐛 bug Something isn't working label Sep 17, 2023
@thepradipvc thepradipvc changed the title bug: Added CSS to prevent layout shift fix: Added CSS to prevent layout shift Sep 17, 2023
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Sep 17, 2023

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

@PeerRich
Copy link
Copy Markdown
Member

PeerRich commented Sep 17, 2023

will this have side effects given its globally applied to HTML?

@PeerRich PeerRich changed the title fix: Added CSS to prevent layout shift fix: "scrollbar-gutter: stable" on html to prevent layout shift Sep 17, 2023
@thepradipvc
Copy link
Copy Markdown
Contributor Author

thepradipvc commented Sep 18, 2023

No, this shouldn't cause any side effects. On pages with a substantial amount of content, the scrollbar is already present, so this change won't have any visible impact. On pages with less content, it will reserve space for the scrollbar, ensuring that if the page's content exceeds the viewport size, the appearance of the scrollbar won't disrupt the layout (layout shift).

@PeerRich PeerRich requested a review from a team September 18, 2023 07:48
@PeerRich PeerRich merged commit c562f45 into calcom:main Sep 18, 2023
@thepradipvc thepradipvc deleted the bug/layout-shift branch September 18, 2023 14:07
ashwintelmore pushed a commit to ashwintelmore/cal.com that referenced this pull request Sep 24, 2023
@thepradipvc @ashwintelmore
fix: "scrollbar-gutter: stable" on html to prevent layout shift (calc…
465935b 
…om#11413)
aar2dee2 pushed a commit to rkreddy99/cal.com that referenced this pull request Sep 27, 2023
@thepradipvc @aar2dee2
fix: "scrollbar-gutter: stable" on html to prevent layout shift (calc…
1cead38 
…om#11413)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@PeerRich PeerRich PeerRich approved these changes

Assignees

No one assigned

Labels

🐛 bug Something isn't working

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[bug]: Layout Shifting

2 participants

@thepradipvc @PeerRich