Show size and a draft indicator in snippet-library rows

src/app/components/SnippetLibrary.module.css

@@ -81,14 +81,9 @@
   cursor: pointer;
 }
 
-.nameRow {
-  position: relative;
-  display: flex;
-  align-items: center;
-  min-width: 0;
-}
-
 .name {
+  display: block;
+  max-width: 100%;
   font-size: 13px;
   font-weight: 500;
   white-space: nowrap;
@@ -96,14 +91,29 @@
   text-overflow: ellipsis;
 }
 
-/* Unpublished-draft indicator (spec §03D / §02 status). Floated into the row's
-   left padding gutter and positioned out of flow so the title's start never
-   shifts — dirty and clean rows stay aligned with each other and with the date. */
+/* Secondary metadata line (spec §02): status indicator · relative date · size. */
+.sub {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* Fixed-width leading slot for the status indicator. Always present (even when a
+   snippet is published and shows no dot) so the date never shifts and rows stay
+   aligned with one another. */
+.indicator {
+  flex: 0 0 auto;
+  width: 6px;
+  height: 6px;
+}
+
+/* Unpublished-draft indicator (spec §02 status; arch/10 §6 + council). The accent
+   hue — not a warning colour, since unpublished work is a normal state — and the
+   meaning rides on presence/absence + the accessible label, never colour alone. */
 .draftDot {
-  position: absolute;
-  left: calc(-1 * (var(--space-3) + var(--space-1)));
-  top: 50%;
-  transform: translateY(-50%);
+  /* display:block so the 6px box applies — an inline span with no text content
+     would ignore width/height and collapse to nothing. */
+  display: block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
@@ -111,8 +121,12 @@
 }
 
 .date {
+  min-width: 0;
   font-size: 11px;
   color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .delete {