Skip to content

fix(mobile): logo navigates home; AI Atlas no longer hover-locks on Android #95

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
MaryWylde merged 1 commit into from
May 6, 2026
Merged

fix(mobile): logo navigates home; AI Atlas no longer hover-locks on Android #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 7 additions & 2 deletions src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,9 +123,14 @@ const Header: FC = () => {
<Link href="/" locale={locale} shallow={false} legacyBehavior>
<Image
onClick={e => {
if (router.pathname !== '/') {
!isSmallScreen && handleClick(e, '/');
const goingToLanding = router.pathname !== '/';
if (isSmallScreen) {
e.preventDefault();
if (isOpenedSidebar) toggleSidebar();
if (goingToLanding) router.push('/');
return;
}
if (goingToLanding) handleClick(e, '/');
}}
src={
isDarkTheme
Expand Down
35 changes: 29 additions & 6 deletions src/pages/ai-atlas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,21 @@ const POL = (r: number, theta: number) => ({
y: Math.sin(RAD(theta)) * r * HALF,
});

/* On touch devices Mouse* events fire synthetically on tap but never
get a leave — without this, hover state would lock on Android. */
function useHasHover() {
const [hasHover, setHasHover] = useState(false);
useEffect(() => {
if (typeof window === 'undefined' || !window.matchMedia) return;
const mq = window.matchMedia('(hover: hover) and (pointer: fine)');
const update = () => setHasHover(mq.matches);
update();
mq.addEventListener?.('change', update);
return () => mq.removeEventListener?.('change', update);
}, []);
return hasHover;
}

type Lang = 'en' | 'ru';
const pickLang = (locale: string | undefined): Lang =>
locale === 'ru' ? 'ru' : 'en';
Expand Down Expand Up @@ -1328,8 +1343,11 @@ function SecurityCallout({
);
}

function SecurityView({ t }: { t: T }) {
const [hoveredLayer, setHoveredLayer] = useState<number | null>(null);
function SecurityView({ t, hasHover }: { t: T; hasHover: boolean }) {
const [hoveredLayer, setHoveredLayerRaw] = useState<number | null>(null);
const setHoveredLayer = (n: number | null) => {
if (hasHover) setHoveredLayerRaw(n);
};
const leftLayers = t.securityLayers.filter(l => l.side === 'left');
const rightLayers = t.securityLayers.filter(l => l.side === 'right');
const calloutTops = ['4%', '38%', '72%'];
Expand Down Expand Up @@ -1448,6 +1466,7 @@ function AiAtlasApp() {
const [hoverNode, setHoverNode] = useState<string | null>(null);
const [linkHoverNode, setLinkHoverNode] = useState<string | null>(null);
const [viewMode, setViewMode] = useState<ViewMode>('environment');
const hasHover = useHasHover();

/* mark <body> while AI Atlas is mounted so the global navbar can
match the page's paper background (light mode only for now).
Expand Down Expand Up @@ -1651,9 +1670,11 @@ function AiAtlasApp() {
const pinnedSolo = !!focusedNode && !hoverNode && !linkHoverNode;

const onSelect = (id: string | null, mode?: string) => {
if (mode === 'hover') setHoverNode(id);
else if (mode === 'link-hover') setLinkHoverNode(id);
else {
if (mode === 'hover') {
if (hasHover) setHoverNode(id);
} else if (mode === 'link-hover') {
if (hasHover) setLinkHoverNode(id);
} else {
setLinkHoverNode(null);
setFocusedNode(id === focusedNode ? null : id);
}
Expand Down Expand Up @@ -2126,7 +2147,9 @@ function AiAtlasApp() {
</div>
)}

{viewMode === 'security' && <SecurityView t={t} />}
{viewMode === 'security' && (
<SecurityView t={t} hasHover={hasHover} />
)}
</div>

<aside className="rail">
Expand Down
30 changes: 30 additions & 0 deletions src/styles/ai-atlas.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1058,3 +1058,33 @@ html.scroll-style-atlas::-webkit-scrollbar-thumb:hover {
}
}

/* Touch devices (Android, iOS): :hover sticks after tap until the user
taps elsewhere, leaving nodes visually "locked". Neutralize the
hover styles where there is no real hover capability. */
@media (hover: none) {
.node:hover {
background: var(--paper);
box-shadow: none;
transform: none;
}
.node--filled:hover {
background: var(--ink-fill);
}
.node.node--redacted:hover {
background: var(--paper);
color: inherit;
}
.ring__label:hover {
opacity: 0.85;
fill: inherit;
}
.kv li .v.v--ref:hover { filter: none; }
.dossier__link:hover { border-bottom-color: var(--rule-soft); }
.dossier__tip:hover { text-decoration-color: var(--rule-soft); }
.legend-cta:hover {
color: var(--red);
letter-spacing: 0.04em;
}
.view-toggle__btn:hover { color: inherit; }
}

Loading