diff --git a/src/app/globals.css b/src/app/globals.css
index 7379a0d..6fa8e7e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1988,6 +1988,29 @@ html {
min-width: 0;
}
+/* NSID cell. Wide screens: one truncating line joined by a dot
+ (app.bsky.feed.post). The dot lives on the tail's ::before so it only
+ appears inline — see the mobile override that stacks the two segments. */
+.lexicon-row-nsid {
+ min-width: 0;
+ font-family: var(--font-mono);
+ font-size: 0.8125rem;
+ color: var(--text-primary);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.lexicon-row-nsid .lexicon-nsid-tail::before {
+ content: '.';
+}
+
+/* Skeleton NSID: single bar on wide screens; the tail bar only appears on
+ mobile (see override) to mirror the two-line loaded layout. */
+.lexicon-nsid-tail-skel {
+ display: none;
+}
+
@media (max-width: 600px) {
.lexicon-row-grid {
grid-template-columns: 1.5rem minmax(0, 1fr) 3rem auto;
@@ -1995,6 +2018,41 @@ html {
padding: 0.625rem 0.75rem;
}
+ /* Stack the top-2-segment namespace over the remainder so the whole NSID
+ stays readable instead of truncating: app.bsky / feed.post. */
+ .lexicon-row-nsid {
+ display: flex;
+ flex-direction: column;
+ row-gap: 0.1rem;
+ white-space: normal;
+ line-height: 1.3;
+ }
+
+ .lexicon-row-nsid .lexicon-nsid-head,
+ .lexicon-row-nsid .lexicon-nsid-tail {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ /* No inline joining dot when the segments are stacked. */
+ .lexicon-row-nsid .lexicon-nsid-tail::before {
+ content: none;
+ }
+
+ /* Match the loaded two-line cell so the skeleton reserves the same
+ height and data landing doesn't shift the row. */
+ .lexicon-row-nsid-skel {
+ display: flex;
+ flex-direction: column;
+ row-gap: 0.35rem;
+ min-width: 0;
+ }
+
+ .lexicon-nsid-tail-skel {
+ display: block;
+ }
+
/* Shrink the chart to fill the narrower column. Height stays at the svg's
24px box (the viewBox scales the line down proportionally and centers
it) so loaded rows and the 24px skeleton block keep identical heights —
@@ -2986,4 +3044,11 @@ html {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.4rem;
}
+
+ /* The tiles get narrow in the 2-column grid; tighten the small-caps
+ label tracking so two-word labels (Audit changes) sit on one line
+ instead of wrapping mid-phrase. The icon already eats into the width. */
+ .account-stats-grid .explore-small-caps {
+ letter-spacing: 0.05em;
+ }
}
diff --git a/src/components/account/AccountStats.tsx b/src/components/account/AccountStats.tsx
index 7698ebd..a26ef90 100644
--- a/src/components/account/AccountStats.tsx
+++ b/src/components/account/AccountStats.tsx
@@ -148,10 +148,12 @@ export default function AccountStats({ did, handle, interactive = true }: Props)
if (!stats?.createdAt) return null;
try {
const d = new Date(stats.createdAt);
+ // Month + year only ("Aug 2023"). The tile is narrow in the 2-column
+ // mobile grid, and the relative age sublabel already carries the
+ // finer-grained "how long ago" — a full day-level date just wrapped.
return d.toLocaleDateString(undefined, {
year: 'numeric',
month: 'short',
- day: 'numeric',
});
} catch {
return null;
@@ -209,7 +211,7 @@ export default function AccountStats({ did, handle, interactive = true }: Props)
/>