From 6c1e41c5f9e93a2a724bab53bbbd3ec8f2c9bb0d Mon Sep 17 00:00:00 2001
From: Sin991114 <50400652+Sin991114@users.noreply.github.com>
Date: Tue, 23 Jun 2026 16:32:30 +0800
Subject: [PATCH] Fix font-size/padding not applying in VS Code (#1261) (#1595)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The VS Code webview was misdetected as a mobile device when the panel
was narrow on touch-capable machines, because device detection only
exempted the Electron shell. That added the `mobile-pointer` class,
letting mobile.css override the typography vars with `!important`, which
beats the inline styles from applyTypography/applyPadding — so font-size
and padding settings had no effect.

Treat the VS Code runtime like the desktop shell, as Electron already is.
---
 packages/ui/src/lib/device.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/lib/device.ts b/packages/ui/src/lib/device.ts
index 846ae83c..3236305b 100644
--- a/packages/ui/src/lib/device.ts
+++ b/packages/ui/src/lib/device.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import { isDesktopShell } from '@/lib/desktop';
+import { isDesktopShell, isVSCodeRuntime } from '@/lib/desktop';
 
 export type DeviceType = 'desktop' | 'mobile' | 'tablet';
 
@@ -108,7 +108,8 @@ export function getDeviceInfo(): DeviceInfo {
   const prefersCoarsePointer = pointerQuery?.matches ?? false;
   const noHover = hoverQuery?.matches ?? false;
   const maxTouchPoints = typeof navigator !== 'undefined' ? navigator.maxTouchPoints ?? 0 : 0;
-  const isDesktopShellRuntime = isDesktopShell();
+  // VS Code is a desktop surface — don't misdetect a narrow panel as mobile (#1261)
+  const isDesktopShellRuntime = isDesktopShell() || isVSCodeRuntime();
   const { isExplicitTablet } = getNavigatorDeviceHints(maxTouchPoints);
 
   const hasTouchInput = prefersCoarsePointer || noHover || maxTouchPoints > 0;