189 files

custom_components/maintenance_supporter/frontend-src/panel-styles.ts

@@ -399,7 +399,21 @@ export const panelStyles = css`
   .today-dot.triggered { background: #ff5722; }
   .today-main { flex: 1; min-width: 0; }
   .today-task { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .today-object { color: var(--secondary-text-color); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* #169: the sub-line is a flex row of two parts that truncate on their
+     own — a long object name shortens itself instead of pushing the
+     person chip out of the row on a phone (a single nowrap text line cut
+     the chip first, i.e. entirely). The chip keeps a readable minimum. */
+  .today-object {
+    color: var(--secondary-text-color); font-size: 12.5px;
+    display: flex; align-items: center; gap: 8px; min-width: 0;
+  }
+  .today-object-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .today-object .today-person { flex: 0 0 auto; min-width: 0; max-width: 45%; font-size: 12px; }
+  .today-object .today-person .person-avatar { width: 18px; height: 18px; font-size: 9px; }
+  /* Narrow: the avatar alone — initials + colour identify the member,
+     the object name keeps its room. */
+  :host([narrow]) .today-object .today-person .person-name,
+  :host([tight]) .today-object .today-person .person-name { display: none; }
   .today-row .btn-complete { color: var(--success-color, #4caf50); flex: none; }
   .today-row .today-complete { flex: none; --ha-button-font-size: 13px; white-space: nowrap; }
   .today-row .today-complete ha-icon { --mdc-icon-size: 18px; }
@@ -411,7 +425,10 @@ export const panelStyles = css`
   }
   .today-empty ha-icon { --mdc-icon-size: 56px; color: var(--success-color, #4caf50); }
 
-  /* Command palette (Ctrl/Cmd+K). */
+  .header .header-search { margin-left: auto; color: var(--app-header-text-color, white); --ha-icon-button-size: 40px; flex: none; }
+  .tab-bar .tab-search { margin-left: auto; align-self: center; color: var(--secondary-text-color); --ha-icon-button-size: 40px; flex: none; }
+
+  /* Global search overlay ("/" or the header magnifier; #171). */
   .palette-backdrop {
     position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.4);
     display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
@@ -433,8 +450,15 @@ export const panelStyles = css`
   }
   .palette-item.active { background: color-mix(in srgb, var(--primary-color) 14%, transparent); }
   .palette-item ha-icon { --mdc-icon-size: 20px; color: var(--secondary-text-color); flex: none; }
+  .palette-main { min-width: 0; flex: 1; }
+  .palette-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
   .palette-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .palette-sub { margin-left: auto; color: var(--secondary-text-color); font-size: 12.5px; flex: none; padding-left: 10px; }
+  .palette-sub { margin-left: auto; color: var(--secondary-text-color); font-size: 12.5px; flex: none; padding-left: 10px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .palette-page { flex: none; font-size: 11.5px; padding: 1px 7px; border-radius: 10px; background: color-mix(in srgb, var(--primary-color) 14%, transparent); color: var(--primary-color); }
+  .palette-snippet { font-size: 12.5px; color: var(--secondary-text-color); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+  .palette-group { padding: 10px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary-text-color); }
+  .palette-group + .palette-item { border-top: none; }
+  .palette-waiting { font-weight: 400; text-transform: none; letter-spacing: 0; padding-bottom: 10px; }
   .palette-empty { padding: 20px 16px; color: var(--secondary-text-color); text-align: center; }
   .palette-hint { padding: 8px 16px; font-size: 12px; color: var(--secondary-text-color); border-top: 1px solid var(--divider-color); }
 
@@ -532,6 +556,8 @@ export const panelStyles = css`
     --mdc-icon-size: 14px;
     opacity: 0.75;
   }
+  /* #169 follow-up: the member avatar sits inside the pill at chip height */
+  .sub-chip .person-avatar { width: 16px; height: 16px; font-size: 8.5px; margin-left: -4px; }
 
   /* Row action buttons (Complete / Skip): right-aligned in their column and a
      bit larger — the default mwc glyph reads small inside its padded button. */
@@ -858,16 +884,17 @@ export const panelStyles = css`
   .user-badge {
     display: inline-flex;
     align-items: center;
-    gap: 3px;
-    padding: 2px 8px;
+    gap: 5px;
+    padding: 2px 8px 2px 3px;
     margin-left: 8px;
-    background: var(--primary-color);
-    color: var(--text-primary-color);
-    border-radius: 10px;
+    background: var(--secondary-background-color, rgba(127, 127, 127, 0.12));
+    color: var(--primary-text-color);
+    border-radius: 12px;
     font-size: 11px;
     font-weight: 500;
     line-height: 1.4;
   }
+  .user-badge .person-avatar { width: 18px; height: 18px; font-size: 9px; }
 
   .user-badge ha-icon {
     --mdc-icon-size: 12px;