From 7c9da75397e3b0a260b90be19b78ded0045a4ff9 Mon Sep 17 00:00:00 2001 From: Himanth Reddy Date: Wed, 5 Aug 2026 17:07:50 +0530 Subject: [PATCH 1/5] fix(web): prevent text wrapping and clipping in navbar buttons for #326 --- netlify-arvio-tv-site/index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/netlify-arvio-tv-site/index.html b/netlify-arvio-tv-site/index.html index f1db285dd..a8bc2c10c 100644 --- a/netlify-arvio-tv-site/index.html +++ b/netlify-arvio-tv-site/index.html @@ -833,6 +833,8 @@ min-height: 34px; padding: 8px 12px; 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 { @@ -873,6 +875,7 @@ align-items: center; gap: 12px; margin-left: 0; + flex-shrink: 0; } .theme-toggle { background: transparent; @@ -905,6 +908,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 { @@ -925,6 +929,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); } From 7f40cd4b09267987f7bbdbcedce10bc4fba01af4 Mon Sep 17 00:00:00 2001 From: Himanth Reddy Date: Wed, 5 Aug 2026 17:38:37 +0530 Subject: [PATCH 2/5] fix(web): optimize navbar grid and responsive breakpoint to prevent header item overlap --- netlify-arvio-tv-site/index.html | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/netlify-arvio-tv-site/index.html b/netlify-arvio-tv-site/index.html index a8bc2c10c..d6ddd33ff 100644 --- a/netlify-arvio-tv-site/index.html +++ b/netlify-arvio-tv-site/index.html @@ -783,9 +783,9 @@ } .nav-inner { display: grid; - grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr); + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; - gap: 18px; + gap: 16px; padding: 16px 0; } .brand { @@ -813,25 +813,26 @@ justify-self: center; display: flex; align-items: center; - gap: 4px; - padding: 5px; + gap: 2px; + 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: 12.5px; color: var(--ink-2); font-weight: 650; white-space: nowrap; + min-width: 0; } .nav-links a { position: relative; display: inline-flex; align-items: center; - min-height: 34px; - padding: 8px 12px; + min-height: 32px; + padding: 6px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; @@ -865,15 +866,15 @@ .nav-links a:hover::after, .nav-links a.active::after { opacity: 1; transform: scaleX(1); } .nav-links .nav-donate { - padding-left: 28px !important; + padding-left: 24px !important; color: color-mix(in oklch, #ff7eb8 58%, var(--ink)); } - .nav-links .nav-donate::before { left: 11px; } + .nav-links .nav-donate::before { left: 9px; } .nav-actions { justify-self: end; display: inline-flex; align-items: center; - gap: 12px; + gap: 8px; margin-left: 0; flex-shrink: 0; } @@ -1977,9 +1978,18 @@ } /* ============ RESPONSIVE ============ */ + @media (max-width: 1320px) { + .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; From a3361c35e2cb4b34a42273eef1644342a2755fbd Mon Sep 17 00:00:00 2001 From: Himanth Reddy Date: Wed, 5 Aug 2026 17:46:08 +0530 Subject: [PATCH 3/5] fix(web): restore nav-links size to match Dashboard and Web app buttons --- netlify-arvio-tv-site/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/netlify-arvio-tv-site/index.html b/netlify-arvio-tv-site/index.html index d6ddd33ff..ed936521a 100644 --- a/netlify-arvio-tv-site/index.html +++ b/netlify-arvio-tv-site/index.html @@ -813,15 +813,15 @@ justify-self: center; display: flex; align-items: center; - gap: 2px; - padding: 4px; + gap: 4px; + padding: 5px; 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: 12.5px; + font-size: 13px; color: var(--ink-2); font-weight: 650; white-space: nowrap; @@ -831,8 +831,8 @@ position: relative; display: inline-flex; align-items: center; - min-height: 32px; - padding: 6px 10px; + min-height: 34px; + padding: 8px 12px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; @@ -866,10 +866,10 @@ .nav-links a:hover::after, .nav-links a.active::after { opacity: 1; transform: scaleX(1); } .nav-links .nav-donate { - padding-left: 24px !important; + padding-left: 28px !important; color: color-mix(in oklch, #ff7eb8 58%, var(--ink)); } - .nav-links .nav-donate::before { left: 9px; } + .nav-links .nav-donate::before { left: 11px; } .nav-actions { justify-self: end; display: inline-flex; From 7b4a98dc04c6f9ac7aec5f851e215eb04abbe4e2 Mon Sep 17 00:00:00 2001 From: Himanth Reddy Date: Wed, 5 Aug 2026 18:15:13 +0530 Subject: [PATCH 4/5] fix(web): preserve header logo on mobile, match button heights, and fix mobile horizontal overflow --- netlify-arvio-tv-site/index.html | 61 ++++++++++++++++++++++---------- 1 file changed, 43 insertions(+), 18 deletions(-) diff --git a/netlify-arvio-tv-site/index.html b/netlify-arvio-tv-site/index.html index ed936521a..4ededd0c4 100644 --- a/netlify-arvio-tv-site/index.html +++ b/netlify-arvio-tv-site/index.html @@ -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, @@ -782,15 +782,15 @@ border-bottom: 1px solid var(--line-soft); } .nav-inner { - display: grid; - grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + display: flex; + justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; } .brand { display: flex; align-items: center; gap: 10px; - justify-self: start; + flex-shrink: 0; font-weight: 700; letter-spacing: 0.02em; font-size: 15px; } @@ -810,29 +810,29 @@ filter: drop-shadow(0 0 14px rgba(13, 240, 194, 0.16)); } .nav-links { - justify-self: center; + margin: 0 auto; 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; - min-width: 0; + 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 15px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; @@ -871,7 +871,6 @@ } .nav-links .nav-donate::before { left: 11px; } .nav-actions { - justify-self: end; display: inline-flex; align-items: center; gap: 8px; @@ -1978,7 +1977,7 @@ } /* ============ RESPONSIVE ============ */ - @media (max-width: 1320px) { + @media (max-width: 1400px) { .nav-links { display: none; } .nav-inner { display: flex; @@ -1996,7 +1995,6 @@ 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; } @@ -2012,10 +2010,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; @@ -2228,11 +2248,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); } } From 9cc269d9c14806138ca62825f5d426eaf80ac911 Mon Sep 17 00:00:00 2001 From: Arvin Date: Mon, 10 Aug 2026 15:31:14 +0200 Subject: [PATCH 5/5] fix(web): preserve centered responsive navigation --- netlify-arvio-tv-site/index.html | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/netlify-arvio-tv-site/index.html b/netlify-arvio-tv-site/index.html index 4ededd0c4..6845d142c 100644 --- a/netlify-arvio-tv-site/index.html +++ b/netlify-arvio-tv-site/index.html @@ -782,14 +782,15 @@ border-bottom: 1px solid var(--line-soft); } .nav-inner { - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr); align-items: center; - gap: 16px; + gap: 18px; padding: 16px 0; } .brand { display: flex; align-items: center; gap: 10px; + justify-self: start; flex-shrink: 0; font-weight: 700; letter-spacing: 0.02em; font-size: 15px; @@ -810,7 +811,8 @@ filter: drop-shadow(0 0 14px rgba(13, 240, 194, 0.16)); } .nav-links { - margin: 0 auto; + margin: 0; + justify-self: center; display: flex; align-items: center; gap: 4px; @@ -832,7 +834,7 @@ display: inline-flex; align-items: center; min-height: 38px; - padding: 9px 15px; + padding: 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; @@ -871,6 +873,7 @@ } .nav-links .nav-donate::before { left: 11px; } .nav-actions { + justify-self: end; display: inline-flex; align-items: center; gap: 8px; @@ -1978,6 +1981,10 @@ /* ============ RESPONSIVE ============ */ @media (max-width: 1400px) { + .nav-web { display: none !important; } + } + + @media (max-width: 1000px) { .nav-links { display: none; } .nav-inner { display: flex;