@7365admin1/layer-common 3.2.2-staging.97 → 3.2.2-staging.98

package/assets/css/screens.css

@@ -343,6 +343,31 @@
 /* The card.                                                           */
 /* ------------------------------------------------------------------ */
 
+/**
+ * THE WIDE-TABLE BLOWOUT.
+ *
+ * The card sits in a `v-col`, i.e. a flex item, and a flex item's automatic
+ * minimum size is its content's minimum - so a table with 8 columns set a
+ * ~686px floor the column could not shrink below, and the PAGE scrolled
+ * sideways at 360 and 768 instead of the table doing it. `min-width: 0` lets
+ * it shrink; the table then scrolls INSIDE the card, which is how the design
+ * draws it - the row is deliberately not restacked into key/value blocks,
+ * because a column carries meaning by its position. Same decision as
+ * `.app-table-scroll` in `primitives.css`.
+ *
+ * It is on BOTH of this component's own flex boxes - its root `v-row` (which
+ * is itself an item of the CALLER's row) and the column holding the card -
+ * because the content's minimum walks all the way up the chain, and stopping
+ * it at the inner column alone left the page still scrolling sideways.
+ */
+.table-card__shrink {
+  min-width: 0;
+}
+
+.table-card .v-table__wrapper {
+  overflow-x: auto;
+}
+
 .table-card {
   font-family: var(--font-sans);
   background: var(--card);

package/components/PageHeader.vue

@@ -12,7 +12,10 @@
 -->
 <template>
   <div class="app-page-head">
-    <div>
+    <!-- A caller with actions but no page name (the shared table card, when the
+         screen has not given it a title) gets just the action group, at the
+         left, rather than an empty heading holding a line of blank space. -->
+    <div v-if="title || $slots.title || subtitle || $slots.subtitle">
       <h1 class="app-page-head__title">
         <slot name="title">{{ title }}</slot>
       </h1>

package/components/TableMain.vue

@@ -14,7 +14,7 @@
   passed its own `no-data` slot.
 -->
 <template>
-  <v-row no-gutters>
+  <v-row no-gutters class="table-card__shrink">
     <!--
       THE DESIGN'S PAGE TITLE (Phase 9).
 
@@ -29,57 +29,69 @@
       Placement only. No caller changes, no slot moves, no behaviour: a screen
       that passes no title renders exactly what it rendered before.
     -->
-    <v-col cols="12" v-if="title">
-      <PageHeader :title="title" />
-    </v-col>
+    <!--
+      The actions used to be drawn on a SECOND row underneath that heading,
+      which is not where the design puts them - the design's title row is the
+      page name on the left and the screen's actions on the right of the SAME
+      line, which is why every screen converted so far had to bypass this
+      component and draw its own `PageHeader` above it. They are on the title
+      row now, in `PageHeader`'s own `actions` slot.
 
-    <!-- Top Actions -->
-    <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
-      <v-row no-gutters>
-        <slot name="actions">
-          <v-col cols="12">
-            <v-row no-gutters class="ga-2 align-center table-card__actions">
-              <!--
-                The design's primary button: the accent fill that may carry a
-                white label (`--accent-strong`; white on `--accent` is 3.23:1),
-                40px, 10px radius, leading icon. Same click, same label.
-              -->
-              <v-btn
-                v-if="canCreate"
-                class="text-none table-card__primary"
-                variant="flat"
-                prepend-icon="mdi-plus"
-                @click="emits('create')"
-              >
-                {{ createLabel }}
-              </v-btn>
-              <v-text-field
-                v-if="canSearch"
-                v-model="searchInput"
-                density="compact"
-                placeholder="Search"
-                clearable
-                max-width="300"
-                append-inner-icon="mdi-magnify"
-                hide-details
-                class="table-card__search"
-              />
-              <!-- Ghost/secondary, as the design specifies for Scan QR Code. -->
-              <v-btn
-                v-if="canScanVisitorQRCode"
-                text="Scan QR Code"
-                class="text-none ml-2 table-card__ghost"
-                variant="outlined"
-                @click="emits('scan')"
-              />
-            </v-row>
-          </v-col>
-        </slot>
-      </v-row>
+      Same buttons, same slot name, same content, same events - one row instead
+      of two. A screen with no title still gets its actions at the left, where
+      they have always been, because the title block is not drawn at all.
+    -->
+    <v-col cols="12" v-if="title || canCreate || $slots.actions">
+      <PageHeader :title="title">
+        <template v-if="canCreate || $slots.actions" #actions>
+          <slot name="actions">
+            <!--
+              The design's primary button: the accent fill that may carry a
+              white label (`--accent-strong`; white on `--accent` is 3.23:1),
+              40px, 10px radius, leading icon. Same click, same label.
+            -->
+            <v-btn
+              v-if="canCreate"
+              class="text-none table-card__primary"
+              variant="flat"
+              prepend-icon="mdi-plus"
+              @click="emits('create')"
+            >
+              {{ createLabel }}
+            </v-btn>
+            <v-text-field
+              v-if="canSearch"
+              v-model="searchInput"
+              density="compact"
+              placeholder="Search"
+              clearable
+              max-width="300"
+              append-inner-icon="mdi-magnify"
+              hide-details
+              class="table-card__search"
+            />
+            <!-- Ghost/secondary, as the design specifies for Scan QR Code. -->
+            <v-btn
+              v-if="canScanVisitorQRCode"
+              text="Scan QR Code"
+              class="text-none table-card__ghost"
+              variant="outlined"
+              @click="emits('scan')"
+            />
+          </slot>
+        </template>
+      </PageHeader>
     </v-col>
 
     <!-- Table Card -->
-    <v-col cols="12">
+    <!--
+      `table-card__shrink` is the fix for the wide-table blowout: this column is a
+      flex item, and a flex item's automatic minimum size is its CONTENT's, so
+      a table with enough columns set a floor the column would not shrink below
+      and the whole page scrolled sideways at 360 and 768. The table scrolls
+      inside the card instead - see `.table-card__shrink` in `screens.css`.
+    -->
+    <v-col cols="12" class="table-card__shrink">
       <!--
         THE DESIGN'S CARD AND ITS IN-CARD TOP ROW (Phase 9).
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.97",
+  "version": "3.2.2-staging.98",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {