proposal.md 3.65 KB

Proposal: Fix Login Window ttk.Frame Background Rendering on macOS

Overview

Change ID: fix-login-window-ttk-frame-background

Problem: The entire LoginWindow content (title, labels, input fields, login button) is invisible on macOS, while only the checkboxes at the bottom are visible. User analysis confirms input fields exist (cursor changes on hover) but are not visible.

Impact: Critical - the login window is completely unusable on macOS. Users cannot see any UI elements except checkboxes.

Root Cause Analysis

After reviewing screenshot evidence and code analysis:

Actual Root Cause

The LoginWindow.setup_styles() method (lines 120-139) does NOT configure the TFrame background color, while ImageGeneratorApp.setup_styles() does (line 447).

Evidence:

  1. Screenshot shows only checkboxes visible (which use tk.Checkbutton with bg='white')
  2. All other widgets (labels, entries, button) inside main_frame (a ttk.Frame) are invisible
  3. main_frame is created at line 144: ttk.Frame(self.root, padding=40)
  4. LoginWindow.setup_styles() sets self.root.configure(bg=bg_color) but does NOT set style.configure('TFrame', background=bg_color)
  5. On macOS with 'clam' theme, ttk.Frame without explicit background style may render as transparent or with system colors

Why checkboxes work:

  • Checkboxes use tk.Checkbutton (classic tkinter, not ttk) at lines 205-220
  • They have explicit bg='white' and activebackground='white'
  • Classic tk widgets don't depend on ttk theme configuration

Why ImageGeneratorApp works:

  • Line 447: style.configure('TFrame', background=bg_color)
  • All ttk.Frame widgets get explicit white background

Previous Fix Was Incomplete

The previous fix (adding bg/fg to Entry widgets) was based on incorrect assumption that only Entry widgets were invisible. The screenshot reveals the entire content area is invisible, indicating a ttk.Frame rendering issue.

Proposed Solution

Add ttk widget background configurations to LoginWindow.setup_styles() to match the pattern used in ImageGeneratorApp:

style.configure('TFrame', background=bg_color)
style.configure('TLabel', background=bg_color)

This ensures:

  1. The main_frame (ttk.Frame) renders with white background
  2. Any ttk.Label widgets (if used in future) have proper background
  3. Consistent styling approach with the main application
  4. Minimal code change - just 2 lines

Note: The Entry widget background colors we added in the previous fix should remain, as they provide explicit styling and visual consistency.

Alternative Approaches Considered

  1. Replace ttk.Frame with tk.Frame

    • Pros: Classic tk widgets always work
    • Cons: Breaks styling consistency; ttk provides better theme integration
    • Rejected: Style configuration is cleaner
  2. Use different theme instead of 'clam'

    • Pros: Might work better on macOS
    • Cons: Would affect entire app appearance; may break other styling
    • Rejected: Too broad impact
  3. Platform-specific code (if Darwin, use tk.Frame)

    • Pros: Targeted fix for macOS
    • Cons: Code complexity; maintenance burden
    • Rejected: Unnecessary when proper style config works

Dependencies

None - this is a self-contained styling fix in LoginWindow.setup_styles()

Risks

  • Minimal: Only adds explicit background color configuration
  • No breaking changes to functionality
  • Backwards compatible with Windows/Linux

Testing Strategy

  • Manual testing on macOS to verify all UI elements are visible
  • Verify checkboxes still work (should remain unchanged)
  • Test on Windows/Linux to ensure no visual regression
  • Verify input fields, labels, button, and title all render correctly