Dashboard polish

frontend/src/components/DashboardCards.vue

@@ -29,7 +29,15 @@
         </li>
       </ul>
 
-      <p v-if="overflowCount(card)" class="dc-more">
+      <!-- The overflow line goes somewhere. Telling someone 35 more PCs are
+           quiet and leaving them to find the list is worse than not saying it.
+           A card without a viewall still says the count, because the number
+           itself is information. -->
+      <router-link v-if="overflowCount(card) && card.viewall"
+                   :to="card.viewall" class="dc-more dc-more-link">
+        and {{ overflowCount(card) }} more
+      </router-link>
+      <p v-else-if="overflowCount(card)" class="dc-more">
         and {{ overflowCount(card) }} more
       </p>
     </section>
@@ -103,6 +111,13 @@ defineExpose({ load })
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 0.85rem 1rem 0.9rem;
+  /* Nothing escapes the card. A printer row carrying three cartridge readings
+     plus a location was pushing past the border: a flex child will not shrink
+     below its content width unless told to, so text-overflow never engaged and
+     the row simply overflowed. min-width:0 below is what actually enables the
+     ellipsis; this is the backstop. */
+  overflow: hidden;
+  min-width: 0;
 }
 
 /* Severity is a small dot beside the title, not a coloured card or a thick
@@ -156,7 +171,8 @@ defineExpose({ load })
   font-weight: 600;
   color: var(--link);
   text-decoration: none;
-  flex: none;
+  flex: 0 1 auto;
+  min-width: 0;
   max-width: 45%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -166,6 +182,8 @@ defineExpose({ load })
 .dc-row-nolink { color: var(--text); }
 .dc-row-detail {
   color: var(--text);
+  flex: 1 1 auto;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -179,11 +197,19 @@ defineExpose({ load })
   color: var(--text-light);
   font-size: 0.8rem;
   white-space: nowrap;
-  flex: none;
+  /* Shrinks and truncates before the title or detail do: it is the least
+     important part of the line, and it was the part running off the edge. */
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .dc-more {
+  display: block;
   margin: 0.5rem 0 0;
   font-size: 0.8rem;
   color: var(--text-light);
 }
+.dc-more-link { color: var(--link); text-decoration: none; }
+.dc-more-link:hover { text-decoration: underline; }
 </style>