@nyaruka/temba-components 0.168.0 → 0.168.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.168.0",
+  "version": "0.168.1",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/list/ContactList.ts

@@ -79,6 +79,8 @@ export class ContactList extends ContentList<Contact> {
         labelsEndpoint: '/api/v2/groups.json?manual_only=1',
         labelsKey: 'groups'
       },
+      // Archive trails the reversible actions; Delete, when offered,
+      // always goes last.
       { key: 'archive', label: 'Archive', icon: Icon.archive },
       { key: 'delete', label: 'Delete', icon: Icon.delete, destructive: true }
     ];

package/src/list/ContentList.ts

@@ -214,7 +214,9 @@ export class ContentList<T = any> extends RapidElement {
          the select-all checkbox — rather than replacing the page header.
          Positioned in the table-frame (not the scrolling table) so it
          stays put horizontally, with an opaque header-tint background to
-         hide the labels underneath, above the sticky header (z 2/3). */
+         hide the labels underneath, above every header layer — pinned
+         header cells reach z 5 (see tr.header th.pinned), so the bar
+         sits at 6 to cover them too. */
       .bulk-bar {
         position: absolute;
         top: 0;
@@ -225,7 +227,7 @@ export class ContentList<T = any> extends RapidElement {
         left: var(--cl-firstcol-left, 44px);
         right: var(--cl-scrollbar-w, 0px);
         height: var(--cl-header-height, 36px);
-        z-index: 4;
+        z-index: 6;
         display: flex;
         align-items: center;
         gap: 4px;
@@ -567,8 +569,10 @@ export class ContentList<T = any> extends RapidElement {
 
       /* The header row sticks to the top of the scroll frame so the
          column labels stay put while the rows scroll under them.
-         z-index 2 lifts it above the body; a pinned header cell
-         needs 3 to also clear the body's pinned column (z-index 1). */
+         z-index 2 lifts it above the body; a pinned header cell needs
+         more to also clear the body's pinned column (z-index 1) and the
+         resize-handle layers (z 4) — but must stay under the bulk-action
+         bar (z 6), which overlays the whole header row on selection. */
       tr.header th {
         height: 36px;
         vertical-align: middle;

package/src/list/MsgList.ts

@@ -118,11 +118,13 @@ export class MsgList extends ContentList<Msg> {
         resizable: true
       },
       { key: 'text', label: 'Message', grow: true },
+      // Sent is deliberately not resizable: it's the last column, so its
+      // only possible handle would sit on the table's outer edge (Message
+      // is the grow column and owns the boundary between them).
       {
         key: 'created_on',
         label: 'Sent',
-        align: 'right',
-        resizable: true
+        align: 'right'
       }
     ];
     this.bulkActions = [
@@ -132,6 +134,8 @@ export class MsgList extends ContentList<Msg> {
         icon: Icon.label,
         labelsEndpoint: '/api/v2/labels.json'
       },
+      // Archive trails the reversible actions; Delete, when offered,
+      // always goes last.
       { key: 'archive', label: 'Archive', icon: Icon.archive },
       { key: 'delete', label: 'Delete', icon: Icon.delete, destructive: true }
     ];