fix: keep long text feature values inside the device widget (#2917)

front/src/components/boxs/device-in-room/DeviceCard.jsx

@@ -49,7 +49,7 @@ const DeviceCard = ({ children, ...props }) => {
       <div>
         <div class="loader py-3" />
         <div class="table-responsive">
-          <table class="table card-table table-vcenter">
+          <table class={`table card-table table-vcenter ${style.deviceFeaturesTable}`}>
             <tbody>
               {loading
                 ? placeholderRows.map((_, index) => (

front/src/components/boxs/device-in-room/device-features/sensor-value/TextDeviceValue.jsx

@@ -1,5 +1,7 @@
 import { Text } from 'preact-i18n';
 
+import style from '../style.css';
+
 // A text state is displayed raw, except when the feature declares supported_options
 // (a read-only dynamic select): the matching option's label replaces the technical
 // identifier the device reports ('Netflix' instead of 'com.netflix.app')
@@ -10,7 +12,7 @@ const displayValue = deviceFeature => {
 };
 
 const RawDeviceValue = ({ deviceFeature }) => (
-  <div>
+  <div class={style.textValue}>
     {deviceFeature.last_value_string === null && <Text id="dashboard.boxes.devicesInRoom.noValue" />}
     {deviceFeature.last_value_string !== null && <span>{displayValue(deviceFeature)}</span>}
   </div>

front/src/components/boxs/device-in-room/device-features/style.css

@@ -56,3 +56,16 @@ input[type='range'][class~='light-temperature']::-ms-fill-lower {
 .rangeInput {
   flex: 1;
 }
+
+/* A text feature holds free-form content the device decides: a Zigbee integration can
+   publish a comma-separated list of device names, which offers no space to break on.
+   The card table is laid out automatically, so such a value keeps its column at its
+   full one-line width, the table grows past the card and the other feature values are
+   pushed out of the visible area — the narrower the card, the sooner it happens (a
+   3-column dashboard layout is enough). `anywhere` is the value that also lowers the
+   cell's min-content width, which is what lets the column shrink back into the card;
+   `break-word` wraps but leaves the intrinsic width untouched, so the table would
+   still overflow. Same idiom as the external integration texts and the chart tooltips. */
+.textValue {
+  overflow-wrap: anywhere;
+}

front/src/components/boxs/device-in-room/style.css

@@ -12,3 +12,33 @@
     background-position-x: -200%;
   }
 }
+
+/* The card lays its features out in an automatically sized `table.card-table` inside a
+   `.table-responsive` wrapper. An auto table can never be narrower than the sum of its
+   columns' min-content widths: as soon as that sum exceeds the card, the wrapper starts
+   scrolling horizontally and the values on the right drop out of sight — which is the
+   #2917 symptom (the narrower the card, the sooner it happens). Wrapping a single value
+   is not enough; every column has to stay able to shrink.
+
+   The name cell is the main offender: a label such as
+   "Compteur électrique index - Consommation 30 minutes" holds its column open. `anywhere`
+   is deliberate rather than `break-word` — only `anywhere` also lowers the cell's
+   min-content width, which is what actually lets the column shrink back into the card.
+
+   The rule sits on the cells themselves rather than on the elements they hold: the value
+   column carries free-form text too — the #2917 case is a comma-separated list of Zigbee
+   device names, a single unbreakable token — and Firefox frequently leaves an auto
+   table's min-content width unchanged when `anywhere` is set on a descendant of the cell
+   rather than on the cell. Every column of this table may therefore shrink; the icon cell
+   holds a lone `<i>` and the colour picker row is a single `colspan` cell, so neither is
+   affected. Controls keep their own `min-width`, which this property does not touch. */
+.deviceFeaturesTable td {
+  overflow-wrap: anywhere;
+}
+
+/* Tabler renders every sensor value badge with `white-space: nowrap`, so a label like
+   "Pas de valeur récente" counts as one unbreakable word and sets a floor of its full
+   width on the value column. Letting it wrap drops that floor to its longest word. */
+.deviceFeaturesTable :global(.badge) {
+  white-space: normal;
+}