vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(#1157): add viewport meta to all pages; use clientWidth for side panel

Browse source 
Without a viewport meta tag, some browsers (notably Firefox with
Fingerprinting Protection active) internally read screen.availWidth /
screen.availHeight to compute the default viewport size, producing the
console warning 'Fingerprinting Protection is altering screen.availWidth
and screen.availHeight'.

Fix:
- Add <meta name="viewport" content="width=device-width, initial-scale=1">
  to all five pages that were missing it (dashboard index/flow/logs, agent
  index/stats). screen.html already had it.
- Replace window.innerWidth with document.documentElement.clientWidth in
  the side-panel drag-resize code in common.js. clientWidth returns the
  actual CSS layout viewport width and is not rounded by Firefox's
  Fingerprinting Protection, making the drag calculation correct even
  with privacy.resistFingerprinting enabled.
This commit is contained in:
iris 2026-06-03 17:37:57 +02:00 • committed by mara
commit 6e670c8a72
6 changed files with 11 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/packages/agent/src/index.html
View file

@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hyperhive agent</title>
<link rel="icon" type="image/svg+xml" href="icon">
<link rel="stylesheet" href="static/agent.css">

1
frontend/packages/agent/src/stats.html
View file

@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hyperhive agent — stats</title>
<link rel="icon" type="image/svg+xml" href="icon">
<link rel="stylesheet" href="static/agent.css">

8
frontend/packages/dashboard/src/common.js
View file

@ -298,7 +298,11 @@ export const Panel = (() => {
const WIDTH_KEY = 'hyperhive:side-panel-width';
const WIDTH_MIN = 320;
function clampWidth(w) {
const max = Math.floor(window.innerWidth * 0.96);
// Use document.documentElement.clientWidth rather than window.innerWidth:
// clientWidth gives the actual CSS layout viewport width and is not
// altered by Firefox's Fingerprinting Protection (which rounds
// window.innerWidth/outerWidth to the nearest 200px).
const max = Math.floor(document.documentElement.clientWidth * 0.96);
return Math.max(WIDTH_MIN, Math.min(max, w));
}
function applyStoredWidth() {
@ -334,7 +338,7 @@ export const Panel = (() => {
document.addEventListener('pointermove', (e) => {
if (!dragging) return;
// Drawer is anchored to the right edge — width = viewport - pointer X.
const w = clampWidth(window.innerWidth - e.clientX);
const w = clampWidth(document.documentElement.clientWidth - e.clientX);
drawer.style.setProperty('--side-panel-w', w + 'px');
});
function stopDrag() {

1
frontend/packages/dashboard/src/flow.html
View file

@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hyperhive // FL0W</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/static/common.css">

1
frontend/packages/dashboard/src/index.html
View file

@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hyperhive // h1ve-c0re</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/static/common.css">

1
frontend/packages/dashboard/src/logs.html
View file

@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hyperhive // LOGS</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/static/common.css">