alois/Verso
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): extend CSS breakpoints to cover Tor Browser spoofed viewport
Build and Deploy Verso / deploy (push) Successful in 10m11s
Details

Browse Source 
Tor Browser sets viewport width to ~980px to resist fingerprinting, so
@media (max-width: 767px) never fires on a real phone using it. Add the
secondary condition (pointer: coarse) and (max-width: 1024px) — same
dual-check already used in JS — to all mobile CSS overrides in
ide-lumiere.scss and project-list-lumiere.scss. This activates the font
scaling, toolbar height increase, auto-zoom prevention, and project page
layout fixes on Tor Browser.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
claude
2026-06-19 08:24:29 +00:00
parent 4c5db24963
commit 1814cba458
2 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
+6 -1
View File
@@ -439,8 +439,13 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
// the toolbar height. Scoped to .ide-redesign-main so only the editor page
// is affected. CodeMirror's own font size is controlled by user settings and
// is unaffected by these CSS custom properties.
//
// Two-condition query mirrors the JS dual-check in main-layout.tsx:
// (max-width: 767px) — standard mobile browsers
// (pointer: coarse) and (…1024px) — Tor Browser spoofs viewport to ~980px
// but does NOT spoof touch hardware
@media (max-width: 767px) {
@media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) {
[data-lumiere='true'] .ide-redesign-main {
--font-size-01: 0.875rem; // 14px (was 12px)
--font-size-02: 1rem; // 16px (was 14px)
services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+2 -2
View File
@@ -351,7 +351,7 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
form.project-search .form-control {
min-width: 360px;
@media (max-width: 767px) {
@media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) {
min-width: 0;
}
}
@@ -897,7 +897,7 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
// ── Mobile layout overrides ────────────────────────────────────────────────
@media (max-width: 767px) {
@media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) {
// Stack the header vertically so nothing overflows the viewport width.
.lumiere-header {