@7365admin1/layer-common 4.82.1-staging.476 → 4.82.1-staging.478

package/assets/css/primitives.css

@@ -1176,6 +1176,33 @@ select option {
   }
 }
 
+/* Phones: tables restack into one card per row (Vuetify mobile mode, set in
+   plugins/vuetify.ts), so the 720px grid floor above must not apply. */
+@media (max-width: 599.98px) {
+  .app-table-scroll > * {
+    min-width: 0;
+  }
+
+  .v-data-table__tr--mobile {
+    border-bottom: 1px solid var(--border);
+  }
+
+  .v-data-table__tr--mobile > td {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    column-gap: 12px;
+  }
+
+  .v-data-table__td-title {
+    color: var(--muted);
+    font-size: 12px;
+  }
+
+  .v-data-table__td-value {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+}
+
 /* ------------------------------------------------------------------ */
 /* Field label (`components/InputLabel.vue`, 125 caller files).        */
 /*                                                                     */

package/components/MemberServiceProviders.vue

@@ -22,21 +22,10 @@
       </template>
     </PageHeader>
 
-    <!-- One chip per provider company; a click filters to that company. -->
-    <div v-if="companies.length" class="sp-chips mb-3" data-test="sp-members-companies">
-      <button
-        v-for="c in companies"
-        :key="c.orgId"
-        type="button"
-        class="sp-chip"
-        :class="{ 'sp-chip--active': company === c.orgId }"
-        :aria-pressed="company === c.orgId"
-        @click="company = company === c.orgId ? '' : c.orgId"
-      >
-        <span class="sp-chip__name">{{ companyChipText(c.name, c.people) }}</span>
-        <span class="sp-chip__type">{{ c.typeLabel }}<template v-if="c.invitedVia"> · via {{ c.invitedVia }}</template></span>
-      </button>
-    </div>
+    <!-- Who is on the list at a glance; pick one company with the Company filter. -->
+    <p v-if="companies.length" class="sp-summary mb-3" data-test="sp-members-summary">
+      {{ summaryText }}
+    </p>
 
     <AppCard class="table-card">
       <CardToolbar :count="countText">
@@ -75,6 +64,25 @@
             aria-label="Service"
             data-test="sp-members-type"
           />
+          <v-autocomplete
+            v-model="company"
+            :items="companyItems"
+            item-title="title"
+            item-value="value"
+            density="compact"
+            variant="outlined"
+            hide-details
+            clearable
+            placeholder="All companies"
+            no-data-text="No company for this service"
+            class="sp-company-filter"
+            aria-label="Company"
+            data-test="sp-members-company"
+          >
+            <template #item="{ props: itemProps, item }">
+              <v-list-item v-bind="itemProps" :subtitle="item.raw.subtitle" />
+            </template>
+          </v-autocomplete>
           <AppButton
             variant="icon"
             icon="mdi-refresh"
@@ -151,10 +159,11 @@ import type {
   TSiteProviderMember,
 } from "../composables/useServiceProvider";
 import {
-  companyChipText,
+  companyFilterItems,
   concernMailto,
   filterProviderMembers,
   providerMembersEmptyText,
+  providerSummaryText,
   serviceTypeOptions,
 } from "../utils/site-provider-members";
 import { spDay } from "../utils/sp-inviter-row";
@@ -189,7 +198,7 @@ const loading = ref(false);
 const exporting = ref(false);
 const search = ref("");
 const type = ref("");
-const company = ref("");
+const company = ref<string | null>("");
 const snackbar = ref(false);
 const message = ref("");
 
@@ -209,9 +218,18 @@ const typeItems = computed(() => [
   ...serviceTypeOptions(items.value),
 ]);
 
+const companyItems = computed(() => companyFilterItems(companies.value, type.value));
+const summaryText = computed(() => providerSummaryText(companies.value));
+// A company of another service cannot match; drop it when the service changes.
+watch(type, () => {
+  if (company.value && !companyItems.value.some((c) => c.value === company.value)) {
+    company.value = "";
+  }
+});
+
 const filters = computed(() => ({
   type: type.value,
-  company: company.value,
+  company: company.value || "",
   search: search.value,
 }));
 
@@ -294,41 +312,21 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.sp-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.sp-chip {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 8px 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--r-inner);
-  background: var(--card);
-  color: var(--text);
-  text-align: left;
-  cursor: pointer;
-}
-
-.sp-chip--active {
-  border-color: var(--accent-strong);
-  box-shadow: inset 0 0 0 1px var(--accent-strong);
-}
-
-.sp-chip__name {
-  font-weight: 600;
+.sp-summary {
   font-size: 14px;
+  color: var(--muted);
 }
 
-.sp-chip__type,
 .sp-sub {
   font-size: 12px;
   color: var(--muted);
 }
 
+.sp-company-filter {
+  min-width: 220px;
+  max-width: 300px;
+}
+
 .sp-type-filter {
   min-width: 170px;
   max-width: 220px;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.82.1-staging.476",
+  "version": "4.82.1-staging.478",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/plugins/vuetify.ts

@@ -114,6 +114,12 @@ export default defineNuxtPlugin((app) => {
 
   const vuetify = createVuetify({
     defaults: {
+      // Phones (owner 2026-10-02, "most pages are not mobile responsive"): below
+      // 600px every data table shows each row as a stacked card (label: value)
+      // instead of a wide grid scrolled sideways. Tablets and desktop unchanged.
+      VDataTable: { mobileBreakpoint: "sm" },
+      VDataTableServer: { mobileBreakpoint: "sm" },
+      VDataTableVirtual: { mobileBreakpoint: "sm" },
       VTextField: {
         variant: "outlined",
         density: "comfortable",

package/utils/site-provider-members.ts

@@ -43,6 +43,43 @@ export function companyChipText(name: string, people: number): string {
   return `${name || "Unnamed company"} · ${people} ${people === 1 ? "person" : "people"}`;
 }
 
+/**
+ * The Company filter (owner 2026-10-02: a proper filter instead of a row of
+ * company chips): one entry per company, narrowed to the chosen service,
+ * named with its service, head count and who brought it in.
+ */
+export function companyFilterItems(
+  companies: Array<{ orgId: string; name?: string; type?: string; typeLabel?: string; people: number; invitedVia?: string }>,
+  type = "",
+): Array<{ title: string; value: string; subtitle: string }> {
+  return companies
+    .filter((c) => !type || c.type === type)
+    .map((c) => ({
+      title: c.name || "Unnamed company",
+      value: c.orgId,
+      subtitle: [
+        c.typeLabel || c.type || "",
+        `${c.people} ${c.people === 1 ? "person" : "people"}`,
+        c.invitedVia ? `via ${c.invitedVia}` : "",
+      ]
+        .filter(Boolean)
+        .join(" · "),
+    }));
+}
+
+/** "7 companies · 37 people · 1 company has not added anyone yet" */
+export function providerSummaryText(companies: Array<{ people: number }>): string {
+  const people = companies.reduce((n, c) => n + (c.people || 0), 0);
+  const idle = companies.filter((c) => !c.people).length;
+  return [
+    `${companies.length} ${companies.length === 1 ? "company" : "companies"}`,
+    `${people} ${people === 1 ? "person" : "people"}`,
+    idle ? `${idle} ${idle === 1 ? "company has" : "companies have"} not added anyone yet` : "",
+  ]
+    .filter(Boolean)
+    .join(" · ");
+}
+
 /** What an empty table says: nothing on site, nobody added yet, or the filters. */
 export function providerMembersEmptyText({
   companies,