Skip to content

Commit ee85b07

Browse files
committed
refactor: improve run viewer modal layout and token icon styling
Add responsive max-width and max-height constraints to run viewer modal (max-w-[2400px] base, lg:max-w-[2300px], 2xl:max-w-[2200px]) to prevent excessive modal scaling. Apply theme-aware text colors to token icon (text-zinc-600 dark:text-zinc-300) for proper visibility in light/dark modes.
1 parent 32ac21d commit ee85b07

1 file changed

Lines changed: 2 additions & 2 deletions

File tree

script.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1048,7 +1048,7 @@ function openRunViewer({
10481048
const overlay = document.createElement('div');
10491049
overlay.className = 'fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4';
10501050
overlay.innerHTML = `
1051-
<div class="relative w-full h-full bg-white dark:bg-zinc-800 rounded-lg shadow-2xl ring-1 ring-white/10 overflow-hidden flex flex-col">
1051+
<div class="relative w-full h-full max-w-[2400px] max-h-[90vh] bg-white dark:bg-zinc-800 rounded-lg shadow-2xl ring-1 ring-white/10 overflow-hidden flex flex-col lg:max-w-[2300px] 2xl:max-w-[2200px]">
10521052
<div class="flex items-center justify-between px-4 py-2 border-b border-zinc-200 dark:border-zinc-600">
10531053
<div class="text-sm text-zinc-600 dark:text-zinc-300 font-mono truncate" id="run-title"></div>
10541054
<div class="flex items-center gap-2">
@@ -1257,7 +1257,7 @@ async function loadAndRenderRequest(state) {
12571257

12581258
// Tokens icon from icons.svg
12591259
const tokensIcon =
1260-
`<svg class="w-3 h-3 inline-block"><use href="icons.svg#icon-tokens"></use></svg>`;
1260+
`<svg class="w-3 h-3 inline-block text-zinc-600 dark:text-zinc-300"><use href="icons.svg#icon-tokens"></use></svg>`;
12611261

12621262
let title = `${vendor}/${model}${seed}`;
12631263
if (runNumber !== null && totalRuns !== null) {

0 commit comments

Comments
 (0)