Jluc
August 29, 2026, 9:33pm
1
And then I got this view:
Hi @Jluc ,
Thanks for your feedback. Indeed, since we no longer truncate device names, with the 3 shutter buttons taking up quite a bit of width on mobile, it doesn’t look very good
I think the shutter buttons are too wide on mobile, I suggest compacting them:
I’ve proposed a PR:
master ← claude/gladys-mobile-view-y4nme1
ouvert 07:22AM - 30 Aug 26 UTC
### Description
Since 5.0.2, a shutter/curtain row in the "devices in room" das… hboard widget could render its device name as an unreadable vertical column of single letters on mobile: the text button group ("Ouvrir | ⏸ | Fermé" in French) is wider than half a phone screen, and the name cell — `flex: 1 1 auto` with no width floor and `overflow-wrap: anywhere` — was squeezed to about one character per line.
Two changes, CSS-first (no feature component markup touched except `ShutterButtons`):
- **Compact shutter buttons in narrow cards.** The widget's `.table-responsive` wrapper now declares a `device-widget / inline-size` container, and below 24rem of card width the shutter buttons swap their text labels for `fe-arrow-up` / `fe-arrow-down` icons. The labels stay in the DOM, visually hidden, so screen readers keep the button names; the active state stays visible through the highlighted button. The switch follows the card's real width, not the viewport's, so a narrow desktop column compacts exactly like a phone, and a wide card (tablet, single column) keeps the text labels. The scene editor renders `ShutterButtons` outside any `device-widget` container, so it is untouched.
- **A 6rem floor under the name cell.** No control can crush a name below readable word-chunks anymore, whatever its width; a control that truly cannot coexist with the floor overflows the wrapper again, which is the signal `acAdaptiveControls` measures.
Rendering verified in the demo (`npm run start-demo`) with the reporter's exact device name:
| 360px phone (after) | Narrow desktop column, before → after |
|---|---|
| Name wraps on words, icon group `↑ ⏸ ↓`, active state highlighted | "Volet" was shredded to "Vole / t" next to text buttons → icons + readable name |
Also checked: 820px single-column card still shows the full text labels, and the pre-existing vertical setpoint stepper in very narrow columns is unchanged (present on master too).
## Forum
### Checklist
- [x] Tests pass: no server change (front-only CSS/markup fix); Cypress not run in this environment
- [x] Linter and prettier pass on both front and server (`npm run eslint`, `npm run prettier`) — run on the changed front files
- [x] No undocumented breaking change
---
_Generated by [Claude Code](https://claude.ai/code/session_01LQBnTp4Y9wp5KBe5swY4Nf)_
## Summary by CodeRabbit
* **Style**
* Improved device cards to adapt shutter controls based on available card width.
* Shutter buttons now display clear open/close labels with directional icons.
* On narrow cards, controls switch to a compact icon layout while retaining accessible labels.
* Prevented device names and summaries from wrapping awkwardly on smaller screens.
If anyone wants to test, I have a Gladys Plus test URL available: https://claude-gladys-mobile-view-y4.gladys-plus.pages.dev/
guim31
August 30, 2026, 7:38am
3
Very nice at my place!
I also think it’s important to save space, the new theme seems to have larger paddings!
mutmut
August 30, 2026, 7:44am
4
I also noticed spacing issues on mobile:
In my case, it’s not the commands but the values that aren’t rounded, 3 decimal places would be enough for display.
Hi everyone!
This topic is now in development .
A PR has been opened to round the displayed sensor values (without losing small magnitudes):
master ← claude/gladys-mobile-view-y4nme1
ouvert 08:24AM - 30 Aug 26 UTC
### Description
Follow-up to the mobile report on the community forum ([topic 1… 0763](https://community.gladysassistant.com/t/5-0-2-probleme-affichage-volet-roulant-avec-long-titre-sur-mobile/10763/4)): sensor rows of the devices widget print `last_value` verbatim, so a Zigbee float32 artifact like `45.60000038146973 %` overflows the card on mobile.
Rounding to a fixed number of decimals (as suggested on the forum) would fix the noise but destroy small values — `0.0004` would become `0`, and the magnitude *is* the information. Instead, `smartRound` (which already handled values ≥ 1 with 2 decimals under 10, 1 decimal under 1000, integers above) now keeps **3 significant digits below 1** instead of full precision:
| input | displayed |
|---|---|
| `45.60000038146973` | `45.6` |
| `33.33333333333336` | `33.3` |
| `0.005` | `0.005` (not `0`) |
| `0.00123456` | `0.00123` |
| `0.10000000149011612` | `0.1` |
Non-numeric values (`null`, strings) pass through untouched, covered by tests.
`smartRound` is now applied everywhere the widget printed a raw number:
- `RawDeviceValue` — the fallback renderer of most numeric sensors (humidity, power, energy…)
- `BadgeNumberDeviceValue` — the colored badges (CO2, AQI…)
- `MultiLevelDeviceFeature` — the value label next to the slider (shutter position, dimmer…)
- `DistanceSensorDeviceValue` / `PressureSensorDeviceValue` — their no-conversion path (metric user, metric unit) skipped the rounding the converted path already had
Rendering verified in the demo front at 360px with injected noisy values (screenshots attached to the session): `Humidité 45.6 %`, `Position 33.3 %`, `Humidité 0.005 %`, badge `43` — where before the raw values overflowed the card pill.
## Forum
Forum: https://community.gladysassistant.com/t/5-0-2-probleme-affichage-volet-roulant-avec-long-titre-sur-mobile/10763
### Checklist
- [x] Tests pass: `server/test/utils/units.test.js` extended for the new `< 1` behavior and the non-number guard (38 passing locally); the changed server lines are covered
- [x] Linter and prettier pass on both front and server (`npm run eslint`, `npm run prettier`) — run on the changed files
- [x] No undocumented breaking change
---
_Generated by [Claude Code](https://claude.ai/code/session_01LQBnTp4Y9wp5KBe5swY4Nf)_
Feel free to follow the PR, test (optional, especially for small requests) and give your feedback here if needed.
Could we have a popup like for the lamps but dedicated to the shutters?
mutmut:
impec, merci !
Nice, it’s merged and will be included in the next version of Gladys
Absolutely!
