From 43fa9c3a9a17b9965e27bf6c21e5e7fba3a5ded3 Mon Sep 17 00:00:00 2001
From: Devin Foley <devin@devinfoley.com>
Date: Thu, 2 Apr 2026 23:47:00 -0700
Subject: [PATCH] fix(ui): make markdown editor monospace for agent instruction
 files (#2620)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Thinking Path

> - Paperclip orchestrates AI agents for zero-human companies
> - The UI includes an inline markdown editor (MDXEditor) for editing
agent instruction files like AGENTS.md
> - The editor should render in monospace to match how markdown/code
files look in a text editor
> - The `AgentDetail.tsx` component already passes `font-mono` via
Tailwind's `contentClassName`, but it wasn't taking effect
> - Two CSS rules in `index.css` set `font-family: inherit`, which
overrode the Tailwind utility due to specificity/source order
> - This PR removes those overrides so `font-mono` applies correctly
> - The benefit is the markdown editor now renders in monospace
(Menlo/SF Mono), matching user expectations for code/config files

## What Changed

- Removed `font-family: inherit` from `.paperclip-mdxeditor
[class*="_placeholder_"]` in `ui/src/index.css`
- Removed `font-family: inherit` from `.paperclip-mdxeditor-content` in
`ui/src/index.css`

## Verification

- Navigate to any agent's Instructions tab in the Paperclip UI
- Confirm the markdown editor content renders in a monospace font
(Menlo/SF Mono)
- Visually verified by user on a live dev server

## Risks

- Low risk. Only removes two CSS declarations. Non-monospace editors are
unaffected since `font-mono` is only applied to agent instruction files
via `contentClassName` in `AgentDetail.tsx`.

## Screenshots
Before:
<img width="934" height="1228" alt="Screenshot 2026-04-02 at 10 46
06 PM"
src="https://github.com/user-attachments/assets/5d84f913-cbea-4206-9d41-3f283209c009"
/>

After:
<img width="1068" height="1324" alt="PNG image"
src="https://github.com/user-attachments/assets/2040e812-d9ca-4b37-b73b-ce05cf52168c"
/>

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] If this change affects the UI, I have included before/after
screenshots
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>
---
 ui/src/index.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/src/index.css b/ui/src/index.css
index 12b1c966..f9452a9f 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -142,6 +142,11 @@
   label {
     touch-action: manipulation;
   }
+  /* Let font-mono (utilities layer) override for monospace editors */
+  .paperclip-mdxeditor [class*="_placeholder_"],
+  .paperclip-mdxeditor-content {
+    font-family: inherit;
+  }
 }
 
 @media (pointer: coarse) {
@@ -319,14 +324,12 @@
 }
 
 .paperclip-mdxeditor [class*="_placeholder_"] {
-  font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.5;
   color: var(--muted-foreground);
 }
 
 .paperclip-mdxeditor-content {
-  font-family: inherit;
   font-size: inherit;
   line-height: inherit;
   color: inherit;