Skip to content

fix(web): prevent text wrapping and button clipping in navbar (#326) #515

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

Merged
ProdigyV21 merged 5 commits into from
Aug 10, 2026
Merged

fix(web): prevent text wrapping and button clipping in navbar (#326) #515

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7c9da75
fix(web): prevent text wrapping and clipping in navbar buttons for #326
Himanth-reddy Aug 5, 2026
7f40cd4
fix(web): optimize navbar grid and responsive breakpoint to prevent h…
Himanth-reddy Aug 5, 2026
a3361c3
fix(web): restore nav-links size to match Dashboard and Web app buttons
Himanth-reddy Aug 5, 2026
7b4a98d
fix(web): preserve header logo on mobile, match button heights, and f…
Himanth-reddy Aug 5, 2026
9cc269d
fix(web): preserve centered responsive navigation
Aug 10, 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
74 changes: 61 additions & 13 deletions netlify-arvio-tv-site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -624,7 +624,7 @@
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; width: 100%; max-width: 100vw; overflow-x: hidden; }
html { background: var(--bg); scroll-behavior: smooth; }

html.theme-transitioning,
Expand Down Expand Up @@ -791,6 +791,7 @@
.brand {
display: flex; align-items: center; gap: 10px;
justify-self: start;
flex-shrink: 0;
font-weight: 700; letter-spacing: 0.02em;
font-size: 15px;
}
Expand All @@ -810,29 +811,33 @@
filter: drop-shadow(0 0 14px rgba(13, 240, 194, 0.16));
}
.nav-links {
margin: 0;
justify-self: center;
display: flex;
align-items: center;
gap: 4px;
padding: 5px;
padding: 4px;
border: 1px solid var(--line-soft);
border-radius: 999px;
background:
linear-gradient(180deg, color-mix(in oklch, var(--ink) 4%, transparent), transparent),
color-mix(in oklch, var(--bg) 84%, transparent);
box-shadow: 0 16px 44px -32px oklch(0 0 0 / 0.9);
font-size: 13px;
font-size: 13.5px;
color: var(--ink-2);
font-weight: 650;
white-space: nowrap;
flex-shrink: 0;
}
.nav-links a {
position: relative;
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 8px 12px;
min-height: 38px;
padding: 9px;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
transition: color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.nav-links a::after {
Expand Down Expand Up @@ -871,8 +876,9 @@
justify-self: end;
display: inline-flex;
align-items: center;
gap: 12px;
gap: 8px;
margin-left: 0;
flex-shrink: 0;
}
.theme-toggle {
background: transparent;
Expand Down Expand Up @@ -905,6 +911,7 @@
font-size: 13px;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.nav-web::before {
Expand All @@ -925,6 +932,8 @@
padding: 10px 18px; border-radius: 999px;
background: var(--ink); color: var(--bg);
font-size: 13px; font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
transition: transform .2s ease, box-shadow .2s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px oklch(0 0 0 / 0.5); }
Expand Down Expand Up @@ -1971,16 +1980,28 @@
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1400px) {
.nav-web { display: none !important; }
}

@media (max-width: 1000px) {
.nav-links { display: none; }
.nav-inner {
display: flex;
justify-content: space-between;
gap: 12px;
}
.nav-actions { margin-left: auto; }
}

@media (max-width: 900px) {
.wrap { padding: 0 20px; }
.nav-links { display: none; }
.nav-inner {
display: flex;
justify-content: space-between;
gap: 10px;
}
.nav-actions { margin-left: auto; gap: 8px; }
.nav-web { min-height: 40px; padding: 10px 14px; }
.hero { padding: 48px 0 20px; }
.hero-meta { grid-template-columns: repeat(2, 1fr); }
.section { padding: 80px 0; }
Expand All @@ -1996,10 +2017,32 @@
.download { padding: 100px 0; }
}

@media (max-width: 768px) {
.nav-web { display: none !important; }
}

@media (max-width: 640px) {
.nav-inner { padding: 12px 16px; }
.brand { gap: 6px; }
.brand-mark { width: 26px; height: 22px; }
.brand-wordmark { display: block !important; width: 95px; height: 22px; }
.nav-cta { padding: 8px 12px; font-size: 12px; }
}

@media (max-width: 420px) {
.wrap { padding: 0 12px; }
.nav-inner { padding: 10px 12px; gap: 6px; }
.brand { gap: 4px; }
.brand-mark { width: 24px; height: 20px; }
.brand-wordmark { display: block !important; width: 80px; height: 20px; }
.nav-cta { padding: 7px 10px; font-size: 11.5px; }
}

@media (max-width: 340px) {
.brand-wordmark { display: none !important; }
}

@media (max-width: 640px) {
.nav-inner { padding: 12px 20px; }
.nav-web { padding: 10px 12px; font-size: 12px; }
.nav-cta { padding: 10px 13px; font-size: 12px; }
.compare { padding: 72px 0; }
.compare-table {
display: grid;
Expand Down Expand Up @@ -2212,11 +2255,16 @@
@media (max-width: 900px) {
.hero-content-split { flex-direction: column; text-align: center; gap: 60px; }
.hero-left { max-width: 100%; }
.hero-right { min-height: 400px; }
.hero-right { min-height: 340px; width: 100%; max-width: 100vw; overflow: hidden; }
.hero-h1 { margin-left: auto; margin-right: auto; }
.hero-sub { margin-left: auto; margin-right: auto; }
.hero-ctas { justify-content: center; }
.cinematic-showcase { width: 288px; height: 162px; --r: 210px; }
.cinematic-showcase { width: 288px; height: 162px; --r: 210px; transform: scale(0.85) rotateX(6deg) rotateY(-10deg); }
}

@media (max-width: 480px) {
.hero-right { min-height: 260px; }
.cinematic-showcase { transform: scale(0.65) rotateX(4deg) rotateY(-6deg); }
}
</style>
</head>
Expand Down
Loading