@ash-qw/dsh-theme-prts 0.1.93 → 0.1.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "0.1.93",
+  "version": "0.1.94",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web",

package/src/client/conversation-scale-adapter.js

@@ -107,7 +107,8 @@ const PREVIEW_TOUCH_DURATION = 1200
 const SNAP_DELAY = 110
 const TOUCH_WAVE_DURATION = 620
 const HISTORY_PAGE_SETTLE_LIMIT = 4000
-const GEOMETRY_SETTLE_FRAME_LIMIT = 24
+const GEOMETRY_SETTLE_FRAME_LIMIT = 8
+const GEOMETRY_SETTLE_STABLE_FRAMES = 2
 let scaleInstanceSeed = 0
 
 function clamp(value, minimum, maximum) {
@@ -767,6 +768,7 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
   let geometryDirty = true
   let geometrySettleFrame
   let geometrySettleFramesRemaining = 0
+  let geometrySettleStableFrames = 0
   let geometrySettleSignature
   let observedOperationWidth
   let observedOperationHeight
@@ -789,6 +791,7 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
   const currentTime = timestamp => Number.isFinite(timestamp)
     ? timestamp
     : window?.performance?.now?.() ?? Date.now()
+  const phoneScaleHidden = () => Number(window?.innerWidth) <= 640
 
   function currentGeometrySignature() {
     if (!operation || !scroller) return undefined
@@ -817,11 +820,20 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
     if (!started || failed || geometrySettleFramesRemaining <= 0) return
     geometrySettleFramesRemaining -= 1
     const signature = currentGeometrySignature()
-    if (signature !== undefined && signature !== geometrySettleSignature) {
+    if (signature === undefined) {
+      geometrySettleStableFrames = 0
+    } else if (signature !== geometrySettleSignature) {
       geometrySettleSignature = signature
+      geometrySettleStableFrames = 1
       geometryDirty = true
       obstructionDirty = true
       schedule()
+    } else {
+      geometrySettleStableFrames += 1
+    }
+    if (geometrySettleStableFrames >= GEOMETRY_SETTLE_STABLE_FRAMES) {
+      geometrySettleFramesRemaining = 0
+      return
     }
     if (geometrySettleFramesRemaining > 0) {
       geometrySettleFrame = requestFrame(sampleGeometryStabilization)
@@ -829,8 +841,9 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
   }
 
   function requestGeometryStabilization() {
-    if (!started || failed) return
+    if (!started || failed || phoneScaleHidden()) return
     geometrySettleFramesRemaining = GEOMETRY_SETTLE_FRAME_LIMIT
+    geometrySettleStableFrames = 0
     if (geometrySettleFrame === undefined) {
       geometrySettleFrame = requestFrame(sampleGeometryStabilization)
     }
@@ -840,11 +853,17 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
     cancelFrame(geometrySettleFrame)
     geometrySettleFrame = undefined
     geometrySettleFramesRemaining = 0
+    geometrySettleStableFrames = 0
     geometrySettleSignature = undefined
   }
 
   function onHostGeometryChange() {
+    if (phoneScaleHidden()) {
+      stopGeometryStabilization()
+      return
+    }
     requestGeometryStabilization()
+    schedule(true)
   }
 
   function reducedMotion() {
@@ -1058,7 +1077,6 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
       scanPending = true
       fullScanPending = true
     }
-    if (resizeActive) return
     if (frame !== undefined || failed) return
     frame = requestFrame(flush)
   }
@@ -2200,6 +2218,13 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
       if (typeof ResizeObserver === 'function') {
         resizeObserver = new ResizeObserver((entries = []) => {
           geometryDirty = true
+          if (phoneScaleHidden()) {
+            stopGeometryStabilization()
+            if (resizeSettleTimer !== undefined) window?.clearTimeout?.(resizeSettleTimer)
+            resizeSettleTimer = undefined
+            setScaleResizeState(false)
+            return
+          }
           requestGeometryStabilization()
           const operationEntry = entries.find(entry => entry.target === operation)
           const width = Number(operationEntry?.contentRect?.width)
@@ -2219,12 +2244,8 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
             return
           }
           if (!resizeActive) {
+            schedule()
             setScaleResizeState(true)
-            if (frame !== undefined) {
-              if (window?.cancelAnimationFrame) window.cancelAnimationFrame(frame)
-              else window?.clearTimeout?.(frame)
-              frame = undefined
-            }
           }
           if (resizeSettleTimer !== undefined) window?.clearTimeout?.(resizeSettleTimer)
           resizeSettleTimer = window?.setTimeout?.(() => {
@@ -2241,7 +2262,13 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
           const external = mutations.filter(mutation =>
             !mutation.target?.closest?.('[data-prts-conversation-scale], [data-prts-conversation-preview], [data-prts-conversation-history-hint], [data-prts-conversation-history-status]')
           )
-          if (external.length) requestGeometryStabilization()
+          if (phoneScaleHidden()) return
+          if (external.some(mutation =>
+            operation?.contains?.(mutation.target)
+            || mutation.target?.contains?.(operation)
+            || mutation.target?.matches?.('header, [data-host-header], [data-slot*="header" i]')
+            || mutationAffectsOverlay(mutation)
+          )) requestGeometryStabilization()
           const historyRelevant = external.some(mutation =>
             mutation.type === 'childList'
               && operation?.contains?.(mutation.target)

package/src/client/operations-shell-v2.js

@@ -1,6 +1,12 @@
 import { createThemeSettingsOverlay, themeSettingsMarkup } from './theme-settings-workbench.js'
 import { createResizeShieldAdapter } from './resize-shield-adapter.js'
 
+const PHONE_RAIL_BREAKPOINT = 640
+const RAIL_HOLD_DELAY_MS = 350
+const RAIL_HOLD_MOVE_TOLERANCE = 8
+const RAIL_SWIPE_THRESHOLD = 32
+const RAIL_SWIPE_AXIS_RATIO = 1.25
+
 function setText(root, selector, value) {
   const node = root?.querySelector(selector)
   const next = String(value ?? '')
@@ -9,7 +15,7 @@ function setText(root, selector, value) {
 
 function markup(emblem) {
   return `<div data-prts-shell data-plugin="dsh-theme-prts">
-    <button type="button" data-prts-rail-launcher aria-label="打开 P.R.T.S. 导航" aria-controls="prts-nav-rail" aria-expanded="false"><span aria-hidden="true">P.R.T.S.</span></button>
+    <button type="button" data-prts-rail-launcher aria-label="打开 P.R.T.S. 导航" aria-controls="prts-nav-rail" aria-expanded="false"><span aria-hidden="true">P.R.T.S.</span><i data-prts-rail-gesture-cue aria-hidden="true">⌄<br>⌄</i></button>
     <nav id="prts-nav-rail" data-prts-nav-rail aria-label="P.R.T.S. 导航">
       <button type="button" data-prts-rail-brand aria-label="P.R.T.S. 终端设置" aria-controls="prts-theme-settings" aria-expanded="false">${emblem || ''}<span>P.R.T.S.</span></button>
       <div data-prts-nav-bottom>
@@ -52,6 +58,10 @@ export function createOperationsShell({
   let railViewport
   let railDefaultHidden = false
   let railViewportQuery
+  let railPointerQuery
+  let railHoverQuery
+  let railPointer
+  let railHoldTimer
   let settingsOverlay
   let schemeToggle
   let schemeIntent
@@ -72,6 +82,89 @@ export function createOperationsShell({
     try { return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true } catch { return false }
   }
 
+  function phoneRailGesture() {
+    if (railMode !== 'overlay' || Number(window.innerWidth) > PHONE_RAIL_BREAKPOINT) return false
+    return railPointerQuery?.matches === true
+      || railHoverQuery?.matches === true
+      || Number(window.navigator?.maxTouchPoints) > 0
+  }
+
+  function clearRailGesture({ release = true } = {}) {
+    if (railHoldTimer !== undefined) window.clearTimeout(railHoldTimer)
+    railHoldTimer = undefined
+    const pointer = railPointer
+    railPointer = undefined
+    if (release && pointer) {
+      try { railLauncher?.releasePointerCapture?.(pointer.pointerId) } catch {}
+    }
+    railLauncher?.removeAttribute('data-prts-rail-gesture-active')
+    railLauncher?.removeAttribute('data-prts-rail-gesture-ready')
+    railLauncher?.style?.removeProperty('--prts-rail-gesture-progress')
+  }
+
+  function armRailGesture() {
+    railHoldTimer = undefined
+    if (!railPointer || !phoneRailGesture()) return
+    railPointer.armed = true
+    railLauncher?.setAttribute('data-prts-rail-gesture-active', '')
+  }
+
+  function onRailPointerDown(event) {
+    if (!phoneRailGesture() || railPointer || (event.button ?? 0) !== 0) return
+    const pointerId = event.pointerId ?? 1
+    railPointer = {
+      pointerId,
+      startX: Number(event.clientX) || 0,
+      startY: Number(event.clientY) || 0,
+      armed: false,
+      ready: false,
+    }
+    try { railLauncher?.setPointerCapture?.(pointerId) } catch {}
+    railHoldTimer = window.setTimeout(armRailGesture, RAIL_HOLD_DELAY_MS)
+  }
+
+  function onRailPointerMove(event) {
+    const pointer = railPointer
+    if (!pointer || (event.pointerId ?? 1) !== pointer.pointerId) return
+    const deltaX = (Number(event.clientX) || 0) - pointer.startX
+    const deltaY = (Number(event.clientY) || 0) - pointer.startY
+    if (!pointer.armed) {
+      if (Math.hypot(deltaX, deltaY) > RAIL_HOLD_MOVE_TOLERANCE) clearRailGesture()
+      return
+    }
+    event.preventDefault?.()
+    if (Math.abs(deltaX) > Math.max(RAIL_HOLD_MOVE_TOLERANCE, Math.max(0, deltaY) / RAIL_SWIPE_AXIS_RATIO)) {
+      clearRailGesture()
+      return
+    }
+    const progress = Math.min(1, Math.max(0, deltaY) / RAIL_SWIPE_THRESHOLD)
+    pointer.ready = deltaY >= RAIL_SWIPE_THRESHOLD
+      && deltaY >= Math.abs(deltaX) * RAIL_SWIPE_AXIS_RATIO
+    railLauncher?.style?.setProperty('--prts-rail-gesture-progress', Math.round(progress * 12) + 'px')
+    railLauncher?.toggleAttribute('data-prts-rail-gesture-ready', pointer.ready)
+  }
+
+  function onRailPointerUp(event) {
+    const pointer = railPointer
+    if (!pointer || (event.pointerId ?? 1) !== pointer.pointerId) return
+    const shouldOpen = pointer.armed && pointer.ready
+    clearRailGesture()
+    if (shouldOpen) openRail()
+  }
+
+  function onRailLostPointerCapture(event) {
+    if (!railPointer || (event.pointerId ?? 1) !== railPointer.pointerId) return
+    clearRailGesture({ release: false })
+  }
+
+  function onRailClick(event) {
+    if (phoneRailGesture() && Number(event?.detail) > 0) {
+      event.preventDefault?.()
+      return
+    }
+    toggleRail()
+  }
+
   function playSchemePress() {
     if (!schemeToggle || reducedMotion()) return
     const revision = ++schemePressRevision
@@ -257,7 +350,8 @@ export function createOperationsShell({
     const overlay = railMode === 'overlay'
     const open = overlay && root.hasAttribute('data-prts-rail-open')
     railLauncher.setAttribute('aria-expanded', String(open))
-    railLauncher.setAttribute('aria-label', open ? '关闭 P.R.T.S. 导航' : '打开 P.R.T.S. 导航')
+    const closedLabel = phoneRailGesture() ? '长按并向下滑动打开 P.R.T.S. 导航' : '打开 P.R.T.S. 导航'
+    railLauncher.setAttribute('aria-label', open ? '关闭 P.R.T.S. 导航' : closedLabel)
     if (overlay && !open) {
       navRail.setAttribute('aria-hidden', 'true')
       navRail.setAttribute('inert', '')
@@ -294,6 +388,7 @@ export function createOperationsShell({
     if (!viewportChanged && !modeChanged && !forceClose) return railMode
     railViewport = nextViewport
     railMode = nextMode
+    clearRailGesture()
     root.dataset.prtsRailMode = nextMode
     root.removeAttribute('data-prts-rail-open')
     syncRailState()
@@ -320,13 +415,19 @@ export function createOperationsShell({
   }
 
   function onResponsiveChange() {
+    clearRailGesture()
     setRailViewport(window.innerWidth)
+    syncRailState()
     settingsOverlay?.scheduleScalePreviewRefresh?.()
   }
 
   function bindResponsiveQueries() {
     railViewportQuery = window.matchMedia?.('(min-width: 1180px)')
+    railPointerQuery = window.matchMedia?.('(pointer: coarse)')
+    railHoverQuery = window.matchMedia?.('(hover: none)')
     railViewportQuery?.addEventListener?.('change', onResponsiveChange)
+    railPointerQuery?.addEventListener?.('change', onResponsiveChange)
+    railHoverQuery?.addEventListener?.('change', onResponsiveChange)
   }
   function disableTheme() { onThemeDisable() }
 
@@ -367,7 +468,12 @@ export function createOperationsShell({
     conversationObserver.observe(operationRegion, { childList: true, subtree: true, attributes: true, attributeFilter: ['hidden', 'data-chat-flow-kind', 'data-message-role'] })
     schemeObserver = new window.MutationObserver(syncSchemeToggle)
     schemeObserver.observe(root, { attributes: true, attributeFilter: ['data-prts-scheme'] })
-    railLauncher.addEventListener('click', toggleRail)
+    railLauncher.addEventListener('click', onRailClick)
+    railLauncher.addEventListener('pointerdown', onRailPointerDown)
+    railLauncher.addEventListener('pointermove', onRailPointerMove)
+    railLauncher.addEventListener('pointerup', onRailPointerUp)
+    railLauncher.addEventListener('pointercancel', clearRailGesture)
+    railLauncher.addEventListener('lostpointercapture', onRailLostPointerCapture)
     document.addEventListener('keydown', onRailKeydown)
     document.addEventListener('click', onDocumentClick)
     schemeToggle.addEventListener('click', toggleScheme)
@@ -384,10 +490,16 @@ export function createOperationsShell({
   }
 
   function dispose() {
+    clearRailGesture()
     cancelSchemePointer()
     clearSchemeClickSuppression()
     clearSchemePressDelays()
-    railLauncher?.removeEventListener('click', toggleRail)
+    railLauncher?.removeEventListener('click', onRailClick)
+    railLauncher?.removeEventListener('pointerdown', onRailPointerDown)
+    railLauncher?.removeEventListener('pointermove', onRailPointerMove)
+    railLauncher?.removeEventListener('pointerup', onRailPointerUp)
+    railLauncher?.removeEventListener('pointercancel', clearRailGesture)
+    railLauncher?.removeEventListener('lostpointercapture', onRailLostPointerCapture)
     document.removeEventListener('keydown', onRailKeydown)
     document.removeEventListener('click', onDocumentClick)
     schemeToggle?.removeEventListener('click', toggleScheme)
@@ -399,7 +511,11 @@ export function createOperationsShell({
     window.removeEventListener?.('blur', cancelSchemePointer)
     themeDisable?.removeEventListener('click', disableTheme)
     railViewportQuery?.removeEventListener?.('change', onResponsiveChange)
+    railPointerQuery?.removeEventListener?.('change', onResponsiveChange)
+    railHoverQuery?.removeEventListener?.('change', onResponsiveChange)
     railViewportQuery = undefined
+    railPointerQuery = undefined
+    railHoverQuery = undefined
     resizeShield.dispose()
     settingsOverlay?.dispose()
     conversationObserver?.disconnect()

package/src/client/particle-field-adapter.js

@@ -557,6 +557,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
 
 
   function particleTraversalSpeed(value = preferences) {
+    if (phoneStatic()) return 0
     const numeric = Number(value?.particleTraversalSpeed)
     return Number.isFinite(numeric) ? clamp(numeric, 0, 2) : 1
   }
@@ -1123,6 +1124,19 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     const entry = entries.find(candidate => candidate.target === operation) ?? entries[0]
     const contentRect = entry?.contentRect
     pendingResizeSize = contentRect ? sizeFromRect(contentRect) : readOperationSize()
+    if (phoneStatic()) {
+      const nextSize = pendingResizeSize
+      clearResizeState()
+      const changed = applyFieldSize(nextSize)
+      if (changed && particles.length) snapParticlesToCurrentLayout()
+      resizeCommits += changed ? 1 : 0
+      syncCanvasBackingStore()
+      geometryDirty = false
+      cancelFrame()
+      draw(Number(window.performance?.now?.()) || 0)
+      cancelFrame()
+      return
+    }
     if (resizeFrame !== undefined) return
     resizeFrame = window.requestAnimationFrame?.(() => {
       resizeFrame = undefined
@@ -1532,7 +1546,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     if (heroActive) leaveHero()
   }
   function onScroll() {
-    if (!scroller) return
+    if (!scroller || phoneStatic()) return
     if (heroActive) {
       scheduleFrame()
       return
@@ -1581,6 +1595,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   }
 
   function registerContentMutations(mutations) {
+    if (phoneStatic()) return
     let weight = mutations.length
     for (const mutation of mutations) {
       for (const node of [...mutation.addedNodes, ...mutation.removedNodes]) {
@@ -1693,8 +1708,35 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     cancelFrame()
   }
 
+  function rebindScroller(nextScroller) {
+    scroller?.removeAttribute('data-prts-hero-active')
+    scroller?.removeEventListener('scroll', onScroll)
+    cancelHydrationResume()
+    hydrationPaused = false
+    mutationBurstScore = 0
+    if (mutationBurstTimer !== undefined) window.clearTimeout?.(mutationBurstTimer)
+    mutationBurstTimer = undefined
+    heroMarker = undefined
+    heroActive = false
+    scroller = nextScroller
+    scroller.addEventListener('scroll', onScroll, { passive: true })
+    syncHeroState()
+    if (!heroActive) {
+      resetTraversal()
+      if (!phoneStatic()) restoreTraversalFromScroll()
+      commitTransitionTargets(segment, true)
+    }
+    scheduleFrame()
+  }
+
   function mount(nextOperation, nextScroller) {
-    if (operation === nextOperation && scroller === nextScroller && ambient?.isConnected && canvas?.isConnected) return
+    if (operation === nextOperation && ambient?.isConnected && canvas?.isConnected) {
+      if (scroller === nextScroller) return
+      if (nextScroller) {
+        rebindScroller(nextScroller)
+        return
+      }
+    }
     unmount()
     operation = nextOperation
     scroller = nextScroller
@@ -1705,7 +1747,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     glow = created.glow
     canvas = document.createElement('canvas')
     canvas.setAttribute('data-prts-particle-layer', '')
-    canvas.setAttribute('aria-label', '随对话滚动轮换阵营标识的粒子画布')
+    canvas.setAttribute('aria-label', phoneStatic() ? '静态阵营标识粒子画布' : '随对话滚动轮换阵营标识的粒子画布')
     canvas.style.visibility = 'hidden'
     if (typeof window.CanvasRenderingContext2D === 'function') context = canvas.getContext('2d')
     targetCache.clear()

package/src/client/resize-shield-adapter.js

@@ -29,6 +29,11 @@ export function createResizeShieldAdapter({
 
   function onResize() {
     if (!started) return
+    if (Number(window?.innerWidth) <= 640) {
+      clearTimer()
+      setActive(false)
+      return
+    }
     setActive(true)
     clearTimer()
     settleTimer = window?.setTimeout?.(settle, settleDelay)

package/src/styles/prts.css

@@ -294,18 +294,23 @@ html[data-dsh-prts][data-prts-rail-mode="overlay"] [data-prts-rail-launcher]:is(
 
 @media (hover: none), (pointer: coarse) {
   html[data-dsh-prts][data-prts-rail-mode="overlay"] [data-prts-rail-launcher] {
-    top: calc(var(--prts-host-top-inset) + 12px);
-    width: 40px;
-    height: 40px;
-    opacity: .92;
-    transform: none;
+    top: 50%; width: 24px; height: 88px; opacity: .58;
+    transform: translateY(-50%); touch-action: none;
   }
-
-  html[data-dsh-prts][data-prts-rail-mode="overlay"] [data-prts-rail-launcher] > span {
-    opacity: 1;
+  html[data-dsh-prts] [data-prts-rail-launcher] > span { opacity: 0; }
+  html[data-dsh-prts] [data-prts-rail-launcher][data-prts-rail-gesture-active] { width: 40px; opacity: 1; }
+  html[data-dsh-prts] [data-prts-rail-gesture-cue] {
+    position: absolute; inset: calc(27px + var(--prts-rail-gesture-progress, 0px)) 10px auto auto;
+    display: block; opacity: 0; font: 700 14px/8px sans-serif;
+  }
+  html[data-dsh-prts] [data-prts-rail-gesture-active] [data-prts-rail-gesture-cue] {
+    opacity: 1; animation: prts-rail-swipe-cue 720ms ease-in-out infinite;
   }
+  html[data-dsh-prts] [data-prts-rail-gesture-ready] [data-prts-rail-gesture-cue] { filter: drop-shadow(0 0 3px currentColor); }
 }
 
+@keyframes prts-rail-swipe-cue { 50% { opacity: .45; } }
+
 html[data-dsh-prts] [data-prts-rail-brand] {
   height: 64px;
   display: grid;
@@ -811,12 +816,18 @@ html[data-dsh-prts] [data-prts-region="operation"] {
   color: var(--prts-ink);
 }
 
-html[data-dsh-prts][data-prts-sessions-collapsed] [data-prts-region="sessions"] [data-slot="sidebar.workspaces"],
-html[data-dsh-prts][data-prts-sessions-collapsed] [data-prts-region="sessions"] [data-slot="sidebar.settings"] {
+html[data-dsh-prts] [data-prts-region="frame"][data-sidebar-collapsed] [data-prts-region="sessions"] :is(
+  [data-slot="sidebar.workspaces"],
+  [data-slot="sidebar.settings"]
+) {
   opacity: 0;
   pointer-events: none;
 }
 
+html[data-dsh-prts] [data-sidebar-collapsed] :is([data-prts-owned-facility], [data-prts-owned-facility-spine], [data-prts-owned-facility-vector]) {
+  visibility: hidden; content-visibility: hidden;
+}
+
 html[data-dsh-prts] [data-prts-region="sessions"] > *,
 html[data-dsh-prts] [data-prts-region="sessions"] [data-slot="sidebar"] {
   height: 100%;
@@ -827,11 +838,15 @@ html[data-dsh-prts] [data-prts-region="sessions"] [data-rc7-sidebar-root] {
   width: 100% !important;
   min-width: var(--prts-sessions-width);
   padding: 14px 10px;
-  overflow-y: auto;
+  overflow: hidden auto;
   background: transparent !important;
   color: var(--prts-ink);
 }
 
+html[data-dsh-prts] [data-prts-region="sessions"] [data-slot="sidebar.workspaces"] [role="tree"] {
+  overflow-x: hidden;
+}
+
 html[data-dsh-prts] [data-prts-region="sessions"] > * > [data-slot="sidebar"] > :first-child > button[aria-label*="new session" i] {
   display: none !important;
 }
@@ -1362,6 +1377,7 @@ html[data-dsh-prts-settings] .prts-plugin-settings {
   width: 100%;
   display: grid;
   gap: 16px;
+  container: prts-plugin-settings / inline-size;
   color: inherit;
   font: inherit;
 }
@@ -1474,6 +1490,19 @@ html[data-dsh-prts-settings] .prts-plugin-settings button[role='switch']:disable
   }
 }
 
+@container prts-plugin-settings (max-width: 22rem) {
+  html[data-dsh-prts-settings] .prts-plugin-settings__row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  html[data-dsh-prts-settings] .prts-plugin-settings button[role='switch'] {
+    align-self: flex-end;
+  }
+}
+
+
 
 @media (max-width: 640px) {
   html[data-dsh-prts] {