184 files

custom_components/maintenance_supporter/frontend-src/styles.ts

@@ -908,8 +908,15 @@ export const sharedStyles = css`
     display: flex;
     flex-direction: column;
     gap: 2px;
+    /* #150 follow-up (2026-08-31, maisun's mobile screenshot): the box used
+       to carry min-width: 90px — in the narrow grid the due column is
+       fit-content(100px) and right-aligned, so on cells narrower than 90px
+       the box overhung LEFT across the object name. It now tracks the cell
+       with no floor, and the label ellipsizes inside. */
+    align-self: stretch;
+    max-width: 100%;
+    min-width: 0;
     width: 100%;
-    min-width: 90px;
   }
 
   .trigger-progress-bar {
@@ -930,8 +937,25 @@ export const sharedStyles = css`
     font-size: 12px;
     color: var(--secondary-text-color);
     text-align: right;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
+  /* #150 follow-up: 3-state trend arrow — replaces the sparkline on
+     narrow/tight rows (panel-styles toggles visibility per regime). */
+  .trend-arrow {
+    display: none;
+    font-style: normal;
+    font-weight: 700;
+    margin-left: 2px;
+  }
+  .trend-approaching { color: var(--warning-color, #ff9800); }
+  .trend-stable { color: var(--secondary-text-color); }
+  .trend-easing { color: var(--success-color, #4caf50); }
+
+
   /* Days progress bar (detail view) */
   .days-progress {
     margin: 8px 0 16px;
@@ -974,6 +998,11 @@ export const sharedStyles = css`
   /* Mini-sparkline in overview rows */
   .mini-sparkline {
     width: 60px;
+    /* Same class of bug as the trigger-progress floor (#150 follow-up): in
+       due cells narrower than the fixed width the right-aligned SVG used to
+       overhang LEFT (phone-360 sweep). preserveAspectRatio="none" lets it
+       just squeeze. */
+    max-width: 100%;
     height: 20px;
     display: block;
     margin-top: 2px;