Prevent ripple color label overlap

Issue: #180
User-Visible: yes

demo/smoke_bg_color.mjs

@@ -63,7 +63,11 @@ const res = await page.evaluate(async () => {
   };
   c._openSettingsDialog();
   await c.updateComplete;
-  out.dialogHasBgRow = !!sr().querySelector('hp-dialog .colorrow input[type=color]');
+  const settingsDialog = sr().querySelector('hp-dialog');
+  const bgPicker = [...settingsDialog.querySelectorAll('hp-color-opacity')]
+    .find((picker) => picker.label === c._t('gs.bg_color'));
+  out.dialogHasBgRow = !!bgPicker && bgPicker.showOpacity === false
+    && !settingsDialog.querySelector('input[type=color]');
   c._settingsDialog = { ...c._settingsDialog, bgColor: '#0a2a4a' };
   out.dialogPreviews = (await stageBg()) === rgb('#0a2a4a');
   await c._saveSettingsDialog();

demo/smoke_color_picker_consumers.mjs

@@ -1,6 +1,6 @@
 import { launch, checkAll, finish } from './serve.mjs';
 
-const { page, browser } = await launch({ width: 760, height: 920 });
+const { page, browser } = await launch({ width: 390, height: 1000 });
 
 const result = await page.evaluate(async () => {
   const out = {};
@@ -74,6 +74,10 @@ const result = await page.evaluate(async () => {
   const ripple = pickerByLabel(dialog, card._t('marker.activity_color'));
   out.rippleUsesColorOnlyPicker = !!ripple && ripple.showOpacity === false
     && ripple.color === '#3ea6ff' && nativeColors() === 0;
+  const rippleLabelBox = ripple?.renderRoot.querySelector('.label')?.getBoundingClientRect();
+  const rippleSizeBox = dialog.querySelector('.ripple-sizerow .opl')?.getBoundingClientRect();
+  out.rippleLabelsDoNotOverlapOnMobile = !!rippleLabelBox && !!rippleSizeBox
+    && (rippleLabelBox.bottom <= rippleSizeBox.top || rippleLabelBox.right <= rippleSizeBox.left);
   const rippleSize = card._markerDialog.rippleSize;
   change(ripple, { color: '#abcdef', opacity: 0.05 });
   await card.updateComplete;

docs/CHANGELOG.md

@@ -6,7 +6,8 @@
   the global light/temperature/LQI/Glow/wall palettes, plan and space
   backgrounds, room colour and device activity ripple. Existing opacity appears
   inside the same surface, while colour-only fields and Default/Inherited
-  behaviour keep their previous data model
+  behaviour keep their previous data model. On narrow screens, activity colour
+  and ripple size use separate rows so both labels remain readable
   ([#180](https://github.com/Matysh/houseplan-card/issues/180)).
 
 ## v1.65.0-beta.3 — 2026-08-19

docs/CHANGELOG.ru.md

@@ -12,7 +12,9 @@
   общие цвета света, температуры, LQI, Glow и стен, фон плана и пространства,
   цвет комнат и пульсации активности устройства. Существующая прозрачность
   находится в той же поверхности, а поля только с цветом и поведение
-  «По умолчанию / Наследуется» сохраняют прежнюю модель данных
+  «По умолчанию / Наследуется» сохраняют прежнюю модель данных. На узких экранах
+  цвет и размер пульсации находятся в отдельных строках, поэтому обе подписи
+  остаются читаемыми
   ([#180](https://github.com/Matysh/houseplan-card/issues/180)).
 
 ## v1.65.0-beta.3 — 2026-08-19

docs/TESTING.md

@@ -109,8 +109,10 @@
       Default/Inherit restore `null` without adding alpha
       [auto: `smoke_color_picker_consumers.mjs`].
 - [ ] General settings keep one exclusive picker open among 12 swatches; marker
+      activity colour and ripple size use separate, non-overlapping mobile rows,
       ripple size remains independent, and cancelling the space dialog writes
-      no color draft [auto: `smoke_color_picker_consumers.mjs`].
+      no color draft [unit: `color-picker.test.mjs`, auto:
+      `smoke_color_picker_consumers.mjs`].
 - [ ] The three new dialog families are reviewed from the complete Linux
       artifact before a beta; implementation does not accept their baselines
       [golden: `general-color-popover-desktop-en`,

src/houseplan-card.ts

@@ -19332,13 +19332,15 @@ class HouseplanCard extends LitElement {
                 <span>${this._t('marker.preview.select_source')}</span>
               </div>`}
           ${d.display === 'icon_ripple'
-            ? html`<div class="colorrow">
+            ? html`<div class="colorrow ripple-colorrow">
                 <hp-color-opacity .label=${this._t('marker.activity_color')}
                   .pickerLabels=${this._colorPickerLabels}
                   .color=${d.rippleColor || '#3ea6ff'} .opacity=${1} .showOpacity=${false}
                   @hp-color-opacity-change=${(e: CustomEvent<{ color: string }>) => {
                     this._markerDialog = { ...d, rippleColor: e.detail.color };
                   }}></hp-color-opacity>
+              </div>
+              <div class="colorrow ripple-sizerow">
                 <span class="opl">${this._t('marker.ripple_size')}</span>
                 ${this._rangeInput(2, 8, 0.5, d.rippleSize, (n) => (this._markerDialog = { ...d, rippleSize: n }))}
                 <span class="opv">×${d.rippleSize}</span>

src/styles.ts

@@ -2163,6 +2163,13 @@ export const cardStyles = css`
       min-width: min(100%, 210px);
       justify-content: space-between;
     }
+    .ripple-colorrow > hp-color-opacity {
+      width: 100%;
+      justify-content: space-between;
+    }
+    .ripple-sizerow > .opl {
+      min-width: 0;
+    }
     .colorrow input[type='range'] { flex: 1; }
     .colorrow .tempin { width: 70px; flex: none; }
     .temprange {

test/color-picker.test.mjs

@@ -77,3 +77,17 @@ test('the hue range exposes one cyclic spectrum without restyling other ranges',
   const commonRange = component.match(/input\[type='range'\]\s*\{[\s\S]*?\n\s*\}/)?.[0] || '';
   assert.doesNotMatch(commonRange, /linear-gradient|hp-picker-hue-track/);
 });
+
+test('activity color and ripple size keep independent readable rows', () => {
+  const card = readFileSync(new URL('../src/houseplan-card.ts', import.meta.url), 'utf8');
+  const styles = readFileSync(new URL('../src/styles.ts', import.meta.url), 'utf8');
+  const start = card.indexOf("d.display === 'icon_ripple'");
+  const end = card.indexOf("marker.activity_alarm_note", start);
+  const ripple = card.slice(start, end);
+  assert.ok(start >= 0 && end > start);
+  assert.match(ripple, /class="colorrow ripple-colorrow"/);
+  assert.match(ripple, /class="colorrow ripple-sizerow"/);
+  assert.ok(ripple.indexOf('marker.activity_color') < ripple.indexOf('ripple-sizerow'));
+  assert.ok(ripple.indexOf('ripple-sizerow') < ripple.indexOf('marker.ripple_size'));
+  assert.match(styles, /\.ripple-colorrow > hp-color-opacity\s*\{[^}]*width:\s*100%/s);
+});