+ ${"icon_ripple"===t.display?W`
{this._markerDialog={...t,rippleColor:e.detail.color}}}>
+
+
${this._t("marker.ripple_size")}
${this._rangeInput(2,8,.5,t.rippleSize,e=>this._markerDialog={...t,rippleSize:e})}
×${t.rippleSize}
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index d9a7f428..b3d0f675 100644
--- a/docs/CHANGELOG.md
+++ b/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
diff --git a/docs/CHANGELOG.ru.md b/docs/CHANGELOG.ru.md
index 9ab99224..5da88e50 100755
--- a/docs/CHANGELOG.ru.md
+++ b/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
diff --git a/docs/TESTING.md b/docs/TESTING.md
index cca4c6e4..5abb1565 100644
--- a/docs/TESTING.md
+++ b/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`,
diff --git a/src/houseplan-card.ts b/src/houseplan-card.ts
index 6c921a6a..54d455a8 100755
--- a/src/houseplan-card.ts
+++ b/src/houseplan-card.ts
@@ -19332,13 +19332,15 @@ class HouseplanCard extends LitElement {
${this._t('marker.preview.select_source')}
`}
${d.display === 'icon_ripple'
- ? html`
+ ? html`
) => {
this._markerDialog = { ...d, rippleColor: e.detail.color };
}}>
+
+
${this._t('marker.ripple_size')}
${this._rangeInput(2, 8, 0.5, d.rippleSize, (n) => (this._markerDialog = { ...d, rippleSize: n }))}
×${d.rippleSize}
diff --git a/src/styles.ts b/src/styles.ts
index fa0aa594..2b689689 100644
--- a/src/styles.ts
+++ b/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 {
diff --git a/test/color-picker.test.mjs b/test/color-picker.test.mjs
index 427ff633..faffa92b 100644
--- a/test/color-picker.test.mjs
+++ b/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);
+});