Skip to content

Fixed the horizontal scrollbar issue on the Docs page and adjusted the website's overall scrollbar styling #1704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+26 −13
Open

Fixed the horizontal scrollbar issue on the Docs page and adjusted the website's overall scrollbar styling #1704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ce8cc47
Fixing the Navigation is not working in the blog in Japanese
Deepak-cell311 May 11, 2025
c489e85
Fixed the Inconsistent width of container on mobile device
Deepak-cell311 May 11, 2025
7557898
fix linting
Deepak-cell311 May 13, 2025
ad240fb
fix All the issues
Deepak-cell311 May 13, 2025
06f93ff
fixed scrollbar
Deepak-cell311 Jun 14, 2025
90026fe
fixed scrollbar
Deepak-cell311 Jun 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -674,7 +674,8 @@ export const DocsNav = ({
'transition-all duration-500 ease-in-out',
{
'max-h-0 opacity-0 overflow-hidden': !active.getReference,
'max-h-80 overflow-y-auto opacity-100': active.getReference,
'max-h-80 overflow-y-auto scrollbar-hidden opacity-100':
active.getReference,
},
)}
id='reference'
Expand Down
7 changes: 5 additions & 2 deletions cypress/components/Headlines.cy.tsx
View file
Open in desktop
Copy link
Member

@Utkarsh-123github Utkarsh-123github Jun 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why these changes in testing file?

Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
Headline4,
} from '~/components/Headlines';
import mockNextRouter, { MockRouter } from '../plugins/mockNextRouterUtils';
import slugifyMarkdownHeadline from '~/lib/slugifyMarkdownHeadline';

describe('Headlines Component', () => {
let mockRouter: MockRouter;
Expand Down Expand Up @@ -94,11 +95,13 @@ describe('Headlines Component', () => {
it('should be active if the URL has the hash', () => {
/* Testing the active headline with Headline1 */

const title = 'What is JSON Schema?';
const slug = slugifyMarkdownHeadline(title);
// Set the URL with the hash
mockRouter.asPath = '/#what-is-json-schema';
mockRouter.asPath = `/#${slug}`;

// Check if Correct headline is active
cy.mount(<Headline1>What is JSON Schema?</Headline1>);
cy.mount(<Headline1>{title}</Headline1>);
cy.get('span').should(
'have.class',
'text-startBlue dark:text-endBlue inline-block ml-2',
Expand Down
12 changes: 10 additions & 2 deletions lib/slugifyMarkdownHeadline.ts
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess these changes in this particular file aren't required for this scrollbar issue.

Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ export default function slugifyMarkdownHeadline(
const FRAGMENT_REGEX = /\[#(?<slug>(\w|-|_)*)\]/g;
if (!markdownChildren) return '';
if (typeof markdownChildren === 'string')
return slugify(markdownChildren, { lower: true, trim: true });
return slugify(markdownChildren, {
lower: true,
trim: true,
remove: /[*+~()'"!]/g,
});
const metaSlug = markdownChildren.reduce((acc, child) => {
if (acc) return acc;
if (typeof child !== 'string') return null;
Expand All @@ -21,6 +25,10 @@ export default function slugifyMarkdownHeadline(
.filter((child) => typeof child === 'string')
.map((string) => string.replace(FRAGMENT_REGEX, ''))
.join(' ');
const slug = slugify(joinedChildren, { lower: true, trim: true });
const slug = slugify(joinedChildren, {
lower: true,
trim: true,
remove: /[*+~()'"!]/g,
});
return slug;
}
16 changes: 8 additions & 8 deletions pages/community/index.page.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why these changes are made in this file? I think this isn't related with scrollbar issue.

Original file line number Diff line number Diff line change
Expand Up @@ -149,10 +149,10 @@ export default function communityPages(props: any) {
</div>
</section>
<div className='m-auto w-12/12 md:w-11/12 lg:w-10/12 xl:w-10/12'>
<div className='z-40 mt-20 mx-auto w-full md:h-[520px] md:flex grid grid-cols-1 lg:grid-cols-2 md:justify-between rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900'>
<div className='p-4 px-8 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
<div className='z-40 mt-20 mx-auto w-full md:h-[520px] flex flex-col md:flex-row rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900'>
<div className='p-4 px-8 flex justify-between w-full md:w-1/2 h-auto flex-col text-center md:text-left'>
<div data-testid='HomeCard-main' className='m-auto'>
<h2 className=' text-blue-700 font-bold text-[2rem] text-center'>
<h2 className='text-blue-700 font-bold text-[2rem] text-center'>
Ambassadors Program
</h2>
<h2 className='text-center font-bold text-slate-500 text-base tracking-wide dark:text-white mt-10'>
Expand All @@ -174,16 +174,16 @@ export default function communityPages(props: any) {
</div>
</div>
</div>
<div className='w-full h-fit-content md:w-3/6 max-sm:w-1/4 flex rounded-r-lg justify-end bg-cover bg-center bg-ambassador' />
<div className='w-full h-[400px] border-b border-l border-r border-gray-200 md:h-[480px] md:w-1/2 flex rounded-b-lg md:rounded-l-none md:rounded-r-lg justify-end bg-cover bg-center bg-ambassador bg-no-repeat relative' />
</div>

<div className='z-40 mt-20 rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 mx-auto w-full md:h-[520px] md:flex grid grid-cols-1 lg:grid-cols-2 md:justify-between dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900'>
<div className='p-4 px-8 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
<div className='z-40 mt-20 mx-auto w-full md:h-[520px] flex flex-col md:flex-row rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900'>
<div className='p-4 px-8 flex justify-between w-full md:w-1/2 h-auto flex-col text-center md:text-left'>
<div
data-testid='HomeCard-main'
className='m-auto flex flex-col items-center text-center'
>
<h2 className='text-blue-700 font-bold text-[2rem]'>
<h2 className='text-blue-700 font-bold text-[2rem] text-center'>
Join the JSON Schema Slack workspace!
</h2>
<h2 className='font-bold text-base text-slate-500 dark:text-white tracking-wide mt-10'>
Expand All @@ -201,7 +201,7 @@ export default function communityPages(props: any) {
</div>
</div>
</div>
<div className='w-full h-fit-content md:w-3/6 flex rounded-r-lg justify-end bg-cover bg-center bg-slack' />
<div className='w-full h-[400px] border-b border-l border-r border-gray-200 md:h-auto md:w-3/6 flex rounded-b-lg md:rounded-l-none md:rounded-r-lg justify-end bg-cover bg-center bg-slack' />
</div>
</div>

Expand Down
1 change: 1 addition & 0 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ html {
font-family: 'Inter', sans-serif;
scroll-padding-top: 100px;
scroll-behavior: smooth;
scrollbar-width: none;
}

.DocSearch-Button-Keys {
Expand Down