- Replace English wrapper text in error alerts with direct error.message
- Use existing translation keys where available (pleaseEnterTranslateText, pleaseSelectFile)
- Remove unnecessary alerts for modal failures and operation errors
- All error messages now passed through verbatim without English text
- Add CSS rules to reset all padding and margin for h1-h6 inside our modals
- Prevents blog site heading styles like 'padding-top: 30px' from breaking modal layouts
- Applied to all three modals: uncloseai-embedded-modal, tts-modal, translate-modal
- Override --pico-modal-overlay-backdrop-filter and --pico-modal-overlay-background-color
- Set both variables to none/transparent for dialog#tts-modal and dialog#translate-modal
- Prevents upstream PicoCSS from applying default modal backdrop effects
- Add deleteMessage, copyRawMarkdown, copyHTML translation keys to all 19 language files
- Update all chat bubble button tooltips to use translation functions
- Provides proper localization for Delete message, Copy raw (Markdown), and Copy HTML buttons
- Fix multiple download button creation by using correct selector
- Add download buttons to historical messages during creation
- Ensure download buttons appear next to play buttons consistently
- Show/hide download buttons instead of creating them dynamically
- Add downloadChatAudio translation key to all 19 language files
- Update chat bubble download buttons to use correct translation
- Fix download button duplication by creating buttons initially
- Position download buttons next to play buttons in chat bubbles
- Adjust action toolbelt spacing to 24px for better layout
- Convert read page button to use tooltips for status updates
- Add download button that appears after audio generation
- Keep download button persistent after audio ends for continued access
- Remove DOM status container creation, use tooltips instead
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update all readPageWithHermes calls to pass button parameter
- Remove CSS styling for page reader status DOM element
- Ensure all Read Page buttons use tooltips instead of separate status div
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace DOM status element with tooltip functionality in page-reader.js
- Add translation keys for read page status messages to all 18 languages
- Update page-reader.js to use button tooltips instead of separate status div
- Fix TTS download button duplication guard with consistent CSS classes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Set chat area padding to 0px
- Remove light mode specific copy button styling for consistency
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove copy button background, add light mode styling with white bg
- Ensure modal title stays white across themes
- Set chat box to off-white (#f8f9fa) for light mode, dark (#1a1a1a) for dark mode
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add light mode specific styling for copy code button (white bg, dark text)
- Ensure modal title stays white in both builtin and pico CSS versions
- Prevent PicoCSS from overriding title color in light mode
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add font-size: 14px to .user-message and .ai-message classes
- Prevents inheritance of 18px font from emoji-only styles
- Ensures chat bubbles maintain proper 14px text size
- Applied to both builtin and PicoCSS styles
- Reduce z-index from 10 to 5 for copy code buttons
- Prevents buttons from appearing on top of settings panel
- Settings panel has z-index 10 and should stay on top when open
- Applied to both builtin and PicoCSS styles
- Move copy code button from bottom-left to bottom-right of code blocks
- Increase main modal width from 70vw to 80vw
- Increase max-width from 800px to 1000px
- Prevents horizontal scrolling in chat area
- Applied to both builtin and PicoCSS override styles
- Change border-radius from 20px to 6px for square corners
- Make emoji-only buttons fixed 36x36px squares
- Use grid layout with place-content: center for emoji centering
- Matches the style of emoji buttons used in chat messages
- Reduced padding to 8px for consistent square appearance
- Change fullPageRaw button from text to emoji + tooltip format
- Use 📝 emoji for markdown conversion functionality
- Follows same pattern as other action buttons
- Remove smart translate button functionality (non-working)
- Convert all action buttons to emoji + tooltip format:
📖 Read Page, 🔊 TTS Anything, 🌐 Translate, 📋 Copy Raw, 📄 Copy HTML
- Add emoji-only CSS class with 18px font size for emojis
- Add backdrop removal for TTS and translate modals in builtin CSS
- Update button creation to use title attribute for tooltips
- Reduce padding for emoji-only buttons (8px 12px vs 8px 16px)
- Remove overflow hidden and text-overflow ellipsis from buttons
- Change grid-auto-columns from minmax(0, max-content) to max-content
- Allow buttons to stretch to accommodate full text without truncation
- Keep white-space: nowrap to prevent text wrapping
- Lower settings panel by 15px more (80px to 95px top offset)
- Use place-content instead of place-items for proper grid centering
- Keep all layouts using CSS Grid as requested
- Fix gear and close button centering in both CSS files
- Add ::backdrop overrides for all dialog modals
- Set backdrop-filter to none and background-color to transparent
- Applied to uncloseai-embedded-modal, translate-modal, and tts-modal
- Removes the blurry backdrop effect from PicoCSS theme
- Increase settings panel top offset from 60px to 80px to avoid header
- Remove max-height: 40vh restriction on settings panel
- Add overflow hidden and text-overflow ellipsis to buttons
- Change grid-auto-columns to minmax(0, max-content) for proper sizing
- Ensure buttons don't expand beyond their content width
- Use grid-auto-flow: column for horizontal button layouts
- Fix controls and message actions to display horizontally
- Add theme-aware background colors for settings panel
- Move settings panel top position to avoid covering header
- Ensure all button text stays within button boundaries
- Convert modal container from flex column to grid with explicit rows
- Replace flex centering with grid place-items: center
- Convert header layouts from flex space-between to grid 1fr auto
- Transform input areas from flex to grid column layouts
- Update chat messages from flex column to grid single column
- Convert TTS controls, voice selection, and audio controls to grid
- Replace flex-wrap patterns with grid auto-fit minmax columns
- Remove all flex-shrink, flex-direction, and space-between properties
- Update align-self flex-start/end to justify-self start/end for grid
- Apply changes to both builtin and PicoCSS override stylesheets
This completes the systematic conversion from Flexbox to CSS Grid
layouts throughout the modal interface as requested.
- Changed settings panel from flex to CSS Grid layout
- When open, settings panel covers the entire modal with absolute positioning
- Uses grid-template-columns: 1fr with 20px gap and align-content: start
- Added background color and z-index for proper overlay behavior
- Updated both PicoCSS and built-in CSS versions
- Increased font-size from 13px to 18px for .uncloseai-btn-control (toolbelt buttons)
- Moved code copy button to bottom-left and increased size to 18px
- Increased background opacity from 0.7 to 0.9 for code copy button
- Changed message backgrounds from solid colors to 95% opacity for better visibility
- Updated both PicoCSS and built-in CSS versions
- Updated .uncloseai-btn-small font-size from 12px to 18px in both CSS files
- Makes emoji icons more visible and appropriately sized
- Improves button usability and visual hierarchy
- Increased width from 110px to 120px to accommodate 'uncloseai.' text
- Added white-space: nowrap to prevent any text wrapping
- Updated both PicoCSS and built-in CSS versions
- Wait for CSS to load via onload event before creating button
- Prevents button appearing unstyled on initial page load
- Fallback to direct modal opening if toggleUncloseaiEmbeddedModal not available
- Refactored button creation into separate function for better flow control
- Added 100ms delay when CSS needs to be loaded for floating button
- This ensures CSS rules are parsed before button is displayed
- Fixes issue where button appeared unstyled in top-left corner
- Moved 115+ inline styles from uncloseai-embed-modal.js to CSS classes
- Cleaned all inline styles from page-reader.js, widget-library.js, chat.js, models.js, file-upload.js
- Added CSS custom properties for theming support
- Created reusable CSS classes for buttons, containers, and UI elements
- Only retained legitimate dynamic styles (height calculations, position adjustments)
- Improved consistency with PicoCSS overrides
