check_ui_responsive.py

#!/usr/bin/env python3
"""Read the Little Fig UI and check for mobile responsiveness."""
import subprocess, os

TOKEN = "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"
subprocess.run(["git", "clone", f"https://{TOKEN}@github.com/ticketguy/littlefig.git", "/app/littlefig"], check=True)

# Read the UI file
ui_path = "/app/littlefig/src/little_fig/web/static/index.html"
with open(ui_path, "r") as f:
    html = f.read()

print(f"UI file size: {len(html)} chars")
print(f"\n=== MOBILE RESPONSIVENESS CHECK ===\n")

# Check for viewport meta tag
if 'viewport' in html:
    print("✅ Has viewport meta tag")
else:
    print("❌ NO viewport meta tag — will NOT scale on mobile")

# Check for media queries
if '@media' in html:
    count = html.count('@media')
    print(f"✅ Has {count} media queries")
else:
    print("❌ NO media queries — won't adapt to screen size")

# Check for responsive units
if 'vw' in html or 'vh' in html or '%' in html:
    print("✅ Uses relative units (vw/vh/%)")
else:
    print("❌ No relative units")

# Check for flexbox/grid
if 'flex' in html:
    print(f"✅ Uses flexbox ({html.count('flex')} instances)")
else:
    print("❌ No flexbox")

if 'grid' in html:
    print(f"✅ Uses CSS grid ({html.count('grid')} instances)")
else:
    print("⚠️ No CSS grid")

# Check for fixed pixel widths that would break mobile
import re
fixed_widths = re.findall(r'width:\s*\d{4,}px', html)
if fixed_widths:
    print(f"❌ Has fixed large widths: {fixed_widths[:5]}")
else:
    print("✅ No large fixed pixel widths")

# Check overall structure
if 'max-width' in html:
    print("✅ Uses max-width constraints")

if 'overflow' in html:
    print("✅ Has overflow handling")

# Print the first 200 lines to see structure
print(f"\n=== FIRST 100 LINES OF UI ===\n")
lines = html.split('\n')
for line in lines[:100]:
    print(line)

print(f"\n\n=== LAST 50 LINES ===\n")
for line in lines[-50:]:
    print(line)

print(f"\n\nTotal lines: {len(lines)}")