Skip to content

fix(ui): scope file viewer CSS so CSV/MD renderers don't affect app l… #1275

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dataCenter430 wants to merge 1 commit into
base: main
Choose a base branch
from
+44 −11
Open

fix(ui): scope file viewer CSS so CSV/MD renderers don't affect app l… #1275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Folder/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -610,7 +610,7 @@ export default function Folder({ data: _data }: { data?: Agent }) {
className={`min-h-0 flex-1 ${selectedFile?.type === 'html' && !isShowSourceCode ? 'overflow-hidden' : 'scrollbar overflow-y-auto'}`}
>
<div
className={`h-full ${selectedFile?.type === 'html' && !isShowSourceCode ? '' : 'p-6'}`}
className={`h-full ${selectedFile?.type === 'html' && !isShowSourceCode ? '' : 'p-6'} file-viewer-content`}
>
{selectedFile ? (
!loading ? (
Expand Down
33 changes: 23 additions & 10 deletions src/lib/htmlFontStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,21 @@
// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========

/**
* Consistent font style tag for HTML content rendering.
* Uses system fonts with !important to override inline styles.
* Scoped font style for HTML fragments rendered in the main document (e.g. CSV in FolderComponent).
* Uses a wrapper class so styles do not leak to the rest of the app (sidebar, file list, etc.).
*/
const SCOPED_FONT_STYLE = `<style data-eigent-fonts>
.eigent-file-content *, .eigent-file-content *::before, .eigent-file-content *::after {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
.eigent-file-content code, .eigent-file-content pre, .eigent-file-content kbd, .eigent-file-content samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
}
</style>`;

/**
* Unscoped font style for full HTML documents rendered in an iframe (e.g. HtmlRenderer).
* Safe there because the iframe has its own document.
*/
export const FONT_STYLE_TAG = `<style data-eigent-fonts>
*, *::before, *::after {
Expand All @@ -27,22 +40,22 @@ export const FONT_STYLE_TAG = `<style data-eigent-fonts>

/**
* Injects font styles into HTML content.
* Smart injection that handles different HTML structures:
* - Injects after <head> if present
* - Injects after <html> if no <head>
* - Prepends to content otherwise
* - For fragments (no head/html): uses scoped styles and a wrapper so the app layout is not affected.
* - For full documents (iframe): injects global-style tag; scope is the iframe document only.
*/
export function injectFontStyles(html: string): string {
// If HTML has <head>, inject after <head>
// If HTML has <head>, inject after <head> (full document, typically in iframe)
if (/<head[^>]*>/i.test(html)) {
return html.replace(/(<head[^>]*>)/i, `$1${FONT_STYLE_TAG}`);
}
// If HTML has <html>, inject after <html>
// If HTML has <html>, inject after <html> (full document, typically in iframe)
if (/<html[^>]*>/i.test(html)) {
return html.replace(/(<html[^>]*>)/i, `$1${FONT_STYLE_TAG}`);
}
// Otherwise prepend to content
return FONT_STYLE_TAG + html;
// Fragment (e.g. CSV table): scope to wrapper so styles don't affect sidebar/app
return (
SCOPED_FONT_STYLE + '<div class="eigent-file-content">' + html + '</div>'
);
}

/**
Expand Down
6 changes: 6 additions & 0 deletions src/style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -524,6 +524,12 @@ code {
opacity: 0.2;
}

/* Scoped file viewer: prevent file content CSS from affecting sidebar and app layout */
.file-viewer-content {
contain: layout style;
isolation: isolate;
}

/* Dark mode overrides for FolderComponent (CSV/table content) */
[data-theme='dark'] .folder-component-content {
color: var(--text-primary);
Expand Down
14 changes: 14 additions & 0 deletions src/style/markdown-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
/* Import GitHub markdown styles */
@import 'github-markdown-css/github-markdown.css';

/* Scope theme tokens to .markdown-body only so the library does not affect app layout/typography.
The library sets color-scheme and variables on [data-theme], which would leak to the whole app. */
[data-theme='dark'],
[data-theme='light'] {
color-scheme: unset;
}
[data-theme='dark'] .markdown-body {
color-scheme: dark;
}
[data-theme='light'] .markdown-body {
color-scheme: light;
}

/* Custom overrides for better integration */
.markdown-body {
box-sizing: border-box;
Expand Down