Skip to content

fix(ui): resolve mobile layout arrangement and responsive navbar comp… #773

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
tushar0i wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(ui): resolve mobile layout arrangement and responsive navbar comp… #773

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1741397
fix(ui): resolve mobile layout arrangement and responsive navbar comp…
tushar0i Jun 30, 2026
3625c61
Merge branch 'main' into fix/issue-771-mobile-responsive
sonukapoor Jul 13, 2026
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
47 changes: 36 additions & 11 deletions website/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ body {
width: calc(100% - 2rem);
margin: 0 auto;
min-height: 3.6rem;
padding: 0 0.75rem 0 0;
padding: 0 0.75rem 0 0.25rem;
border: 1px solid rgba(183, 212, 255, 0.22);
border-radius: 0.95rem;
background: linear-gradient(95deg, rgba(8, 22, 44, 0.9), rgba(6, 20, 41, 0.76));
Expand All @@ -126,9 +126,9 @@ body {
}

.navbar__brand {
display: inline-flex;
display: flex;
flex: none;
Comment thread
tushar0i marked this conversation as resolved.
align-items: center;
align-self: stretch;
margin-right: 1.25rem;
padding: 0 0.9rem;
border-radius: 0.85rem 0 0 0.85rem;
Expand Down Expand Up @@ -802,9 +802,11 @@ body {
width: calc(100% - 1rem);
min-height: 3.25rem;
padding-right: 0.55rem;
padding-left: 0.55rem;
}

.navbar__brand {
max-width: 45vw;
margin-right: 0.6rem;
padding: 0 0.65rem;
}
Expand All @@ -817,6 +819,10 @@ body {
padding-inline: 0.45rem;
}

.navbar-icon-link {

@sonukapoor sonukapoor Jul 13, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I get the workaround, but this hides the GitHub and OWASP nav links as well. Can you target just the npm icon? Something like .navbar-icon-link[href*='npmjs'] or whichever selector the npm link uses. That keeps the other nav links visible at tablet width.

display: none;

@sonukapoor sonukapoor Jul 11, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

My original feedback was to remove the .navbar-icon-link hiding at 996px - but looking at the diff, it looks like it was moved to 802px rather than removed entirely. Was that intentional? If you do want to hide the icon links at that breakpoint, that's fine, but just want to confirm it was a deliberate choice and not a move-instead-of-delete.

@tushar0i tushar0i Jul 11, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Screenshot 2026-07-11 at 20 11 42 Sir, I did it intentionally because I noticed the npm icon was overflowing. I was trying to figure out why the other icons (OWASP and GitHub) weren't affected, but I couldn't find the root cause. As a temporary workaround, I hid the entire navbar-icon-link.

}

.navbar-owasp-badge span {
display: none;
}
Expand Down Expand Up @@ -906,6 +912,11 @@ body {
padding-right: 0;
}

/* hide Docusaurus search hint on narrow viewports */
[class*='searchHint_'] {
display: none;

@sonukapoor sonukapoor Jul 11, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

This targets a Docusaurus CSS module class by substring match, which is fragile - if Docusaurus ever renames this component internally, the rule silently stops working. Can you add a short comment explaining why the search hint needs to be hidden on mobile? Something like /* hide Docusaurus search hint on narrow viewports */ would do.

@tushar0i tushar0i Jul 11, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Screenshot 2026-07-11 at 20 07 06 Sir , I hid it because it was overflowing at the 700px breakpoint (see the attached screenshot showing the overflow). I also added the requested comment:

/* hide Docusaurus search hint on narrow viewports */

}

.site-shell {
padding-top: 2.2rem;
}
Expand Down Expand Up @@ -948,6 +959,27 @@ body {
}
}

@media (max-width: 640px) {
.dependabot-callout .callout-banner {
flex-direction: column;
align-items: flex-start;
}
}

@media (max-width: 480px) {
.press-bar {
flex-direction: column;
}

.command-stack {
display: flex;
flex-direction: column;
min-width: 100%;
white-space: pre-wrap;

@sonukapoor sonukapoor Jul 13, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Minor: white-space: pre-wrap and overflow-x: auto are doing opposite things - pre-wrap wraps lines so content never overflows, which makes the scroll container pointless. Pick one: if you want wrapping, drop overflow-x: auto. If you want horizontal scroll, drop pre-wrap.

overflow-x: auto;
}
}

/* Mermaid edge label padding */
.edgeLabel .label {
background-color: #1b2434 !important;
Expand Down Expand Up @@ -985,11 +1017,4 @@ body {

.callout-banner-copy {
flex: 1;
}

@media (max-width: 640px) {
.dependabot-callout .callout-banner {
flex-direction: column;
align-items: flex-start;
}
}
}

@sonukapoor sonukapoor Jul 13, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Missing newline at end of file - just make sure the file ends with a newline before committing.