UI Fixes for Mobile

This commit is contained in:
2026-03-08 16:27:40 -04:00
parent 74a1b264b1
commit f0da6ddbcc
3 changed files with 25 additions and 7 deletions

View File

@@ -862,6 +862,8 @@ const CONDITIONAL_TOGGLES = [
]; ];
function applyConditionalVisibility(container) { function applyConditionalVisibility(container) {
const tab = TABS.find((t) => t.id === currentTab);
CONDITIONAL_TOGGLES.forEach((group) => { CONDITIONAL_TOGGLES.forEach((group) => {
const toggleRow = container.querySelector( const toggleRow = container.querySelector(
`.row.setting[data-setting="${group.toggle}"]` `.row.setting[data-setting="${group.toggle}"]`
@@ -873,12 +875,17 @@ function applyConditionalVisibility(container) {
group.whenOff.forEach((name) => { group.whenOff.forEach((name) => {
const row = container.querySelector(`.row.setting[data-setting="${name}"]`); const row = container.querySelector(`.row.setting[data-setting="${name}"]`);
if (row) row.classList.toggle("cl-tab-hidden", isOn); if (!row) return;
// Only unhide if this setting belongs to the current tab
const inTab = tab && tab.settings.has(name);
row.classList.toggle("cl-tab-hidden", !inTab || isOn);
}); });
group.whenOn.forEach((name) => { group.whenOn.forEach((name) => {
const row = container.querySelector(`.row.setting[data-setting="${name}"]`); const row = container.querySelector(`.row.setting[data-setting="${name}"]`);
if (row) row.classList.toggle("cl-tab-hidden", !isOn); if (!row) return;
const inTab = tab && tab.settings.has(name);
row.classList.toggle("cl-tab-hidden", !inTab || !isOn);
}); });
}); });

View File

@@ -128,7 +128,10 @@
/* ── Smooth Scroll ── */ /* ── Smooth Scroll ── */
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
overflow-x: hidden; }
html, .cl-body {
max-width: 100vw;
} }
/* ── Focus-visible Accessibility ── */ /* ── Focus-visible Accessibility ── */
@@ -543,13 +546,17 @@ html {
.cl-navbar__mobile-menu { .cl-navbar__mobile-menu {
display: none; display: none;
position: fixed; position: fixed;
inset: 0; top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
background: var(--cl-bg); background: var(--cl-bg);
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1.25rem; gap: 1.25rem;
z-index: 1000; z-index: 999;
} }
.cl-navbar__mobile-menu.open { .cl-navbar__mobile-menu.open {
@@ -2143,6 +2150,10 @@ html {
MOBILE — tighter padding, no horizontal overflow MOBILE — tighter padding, no horizontal overflow
═══════════════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) { @media (max-width: 767px) {
.cl-orb-container {
display: none;
}
.cl-container { .cl-container {
padding: 0 1rem; padding: 0 1rem;
} }

View File

@@ -188,13 +188,13 @@ module CommunityLanding
html << "</div>" html << "</div>"
html << "<button class=\"cl-navbar__hamburger\" id=\"cl-hamburger\" aria-label=\"Toggle menu\"><span></span><span></span><span></span></button>\n" html << "<button class=\"cl-navbar__hamburger\" id=\"cl-hamburger\" aria-label=\"Toggle menu\"><span></span><span></span><span></span></button>\n"
html << "</div></nav>\n"
html << "<div class=\"cl-navbar__mobile-menu\" id=\"cl-nav-links\">\n" html << "<div class=\"cl-navbar__mobile-menu\" id=\"cl-nav-links\">\n"
html << theme_toggle html << theme_toggle
html << render_social_icons html << render_social_icons
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--ghost\">#{button_with_icon(signin_label)}</a>\n" html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--ghost\">#{button_with_icon(signin_label)}</a>\n"
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--primary\">#{button_with_icon(join_label)}</a>\n" html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--primary\">#{button_with_icon(join_label)}</a>\n"
html << "</div>" html << "</div>\n"
html << "</div></nav>\n"
html html
end end