Citations modal grows up

Why Care?

If you write articles that get their substance from search-augmented research — Perplexity drafts, multi-source explainers, anything where the references are the work — the moment you actually need to look at your citations is when you're auditing a draft. You want to see, at a glance, every citation in the file: how many times each one appears, where it lives, what it points at, and whether it's still the messy numeric form or the durable hex form Cite-Wide eventually converts it to.

Until today, that overview wasn't really an overview. The modal was tall, narrow, and showed one wrapped row per citation group. Twenty citations meant a long scroll. The "Convert to Hex" button drifted to a strange indented position because of a stray margin-left: 10rem. The line numbers and source URLs were buried inside a click-to-expand affordance most users never discovered.

This entry documents the rework: the modal is now wide enough to use the screen you actually have, and each citation surfaces the information you wanted in the first place — without expanding anything.

What's New?

• The modal is wide and stays wide. Width and max-width now apply to modalEl, not contentEl — so they actually take effect. 90vw, capped at 1100px, max-height 88vh.

• Citation cards in a responsive grid instead of a vertical stack. auto-fill, minmax(320px, 1fr): three columns on a maximized window, two on a half-screen, one on a narrow side-pane. No JavaScript layout math.

• Each card surfaces, by default:

  • The citation number as a monospace badge ([3], [^a3f9c2])

  • A pill stating numeric vs. hex format and inline-instance count

  • The reference text preview (first ~220 chars) when the file has a reference line

  • The source URL, rendered as host/path (truncated), opening in a new tab

  • Line-number chips — clickable tiles like L42 L57 L83 that jump straight to that line, with the line content as a tooltip on hover

• Header pills above the grid summarize the document at a glance: total groups, total instances, numeric count, hex count.

• Convert / Save actions live on each card, no expansion needed. "Jump to first" is a secondary action when you just want to navigate.

• Color-coded accent stripe on each card's left edge: purple for numeric (still-to-convert), success-green for hex (already canonical).

The arc

The trigger was a screenshot. Twenty citations, eight columns wide of empty whitespace on a 1440px screen, every card identical, the convert button parked weirdly far to the right. The modal had been widened — sort of — by some inline-style hacks reaching out to closest('.modal-container') and pushing width: 95vw onto it at runtime. It worked, but the inner layout still treated the modal like a 600px column.

The fix had been documented months earlier in a sibling repo. Perplexed has a context-v note titled Widen-Modals-in-Obsidian-using-CSS that explains the actual mechanic: Obsidian's Modal class exposes two DOM elements — modalEl (the outer popup) and contentEl (the inner slot) — and the convention copied across dozens of community plugins is to attach your styling class to contentEl. Width rules on contentEl only constrain the inner area; the outer popup keeps Obsidian's narrow defaults. Attach the class to modalEl instead, and width rules do what you'd expect.

// Before — class lands on the inner slot, width rules can't widen the popup.
contentEl.addClass('cite-wide-modal');

// After — class lands on the outer popup; width: 90vw works.
modalEl.addClass('cite-wide-modal');

With width solved, the layout question opened up: what should the user actually see on a 1100px-wide modal? The previous design had assumed narrow real estate and front-loaded a click-to-expand interaction to compensate. Once that constraint was gone, all the information that was previously hidden — line numbers, reference preview, source link — could come forward by default. The grid took care of density; chips took care of navigation.

┌──────────────────────────────────────────────────────────────────────────┐
│ Citations in Document                          [Convert All] [Save Hex] │
│ ⬢ 8 citations  ⬢ 40 instances  ⬢ 5 numeric  ⬢ 3 hex                     │
├──────────────────────────────────────────────────────────────────────────┤
│ ┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐        │
│ │ [3]  9 inline    │  │ [4]  6 inline    │  │ [^a3f9]  3 inline│        │
│ │ "Element Logic — │  │ "Buske — AI      │  │ "MIT Sloan — AI  │        │
│ │  the true role…" │  │  Logistics def…" │  │  in logistics…"  │        │
│ │ elementlogic.net │  │ buske.com/what-… │  │ mitsloan.mit.edu │        │
│ │ L42 L57 L83 L91  │  │ L65 L88 L102     │  │ L33 L70          │        │
│ │ [Convert to Hex] │  │ [Convert to Hex] │  │ [Save to Cit…]   │        │
│ └──────────────────┘  └──────────────────┘  └──────────────────┘        │
│                                  …                                       │
├──────────────────────────────────────────────────────────────────────────┤
│                                                                  [Close] │
└──────────────────────────────────────────────────────────────────────────┘

Files Touched

• src/modals/CitationModal.ts — full rewrite of onOpen() and renderCitationGroup(). Removed the inline-style fallback that targeted .modal-container. Added helpers for URL shortening and text truncation. Card layout supersedes the prior expandable group rows.

• src/styles/citations.css — full rewrite. The bundle is now ~270 lines of structured CSS instead of one minified line; sections are commented so the next person doesn't have to reverse-engineer intent. Includes a @media (max-width: 720px) collapse to single column for narrow Obsidian sidepanes.

Reference

The widening mechanic — the actual technical fix — is documented in full at the perplexed repo:

perplexed/context-v/issues/Widen-Modals-in-Obsidian-using-CSS.md

It's worth reading once if you're touching any other Cite-Wide modal. We have at least three more (PasteLlmContentModal, DedupeByUrlModal, LlmCitationsModal) that still use the old contentEl-attaches-the-class pattern and would benefit from the same lift.