feat: improve mobile UX and adaptive text sizing

- add adaptive handle text sizing that scales down for long handles
- improve mobile radial layout with better circle sizing and radius calculations
- add text overflow handling with ellipsis for app labels
- add "You" label below identity circle
- make port configurable via PORT environment variable
- speed up resize updates (100ms -> 50ms debounce)
- add conditional label hiding for mobile with 20+ apps

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

README.md

···
 ```
 
 then visit http://localhost:8080 and sign in with any atproto handle.
+
+to use a different port:
+```bash
+PORT=3000 cargo run
+```

src/main.rs

···
     // Create the firehose manager (connections created lazily per-DID)
     let firehose_manager = firehose::create_firehose_manager();
 
-    println!("starting server at http://localhost:8080");
+    // Get port from environment variable, default to 8080
+    let port = std::env::var("PORT")
+        .unwrap_or_else(|_| "8080".to_string())
+        .parse::<u16>()
+        .expect("PORT must be a valid number");
+
+    println!("starting server at http://localhost:{}", port);
 
     HttpServer::new(move || {
         App::new()
···
             .service(routes::favicon)
             .service(Files::new("/static", "./static"))
     })
-    .bind(("0.0.0.0", 8080))?
+    .bind(("0.0.0.0", port))?
     .run()
     .await
 }

src/templates.rs

···
         }}
 
         .app-name {{
-            font-size: clamp(0.6rem, 1.2vmin, 0.7rem);
+            font-size: clamp(0.55rem, 1.2vmin, 0.7rem);
             color: var(--text);
             text-align: center;
-            max-width: clamp(80px, 15vmin, 120px);
+            max-width: clamp(70px, 15vmin, 120px);
             text-decoration: none;
             display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }}
+
+        @media (max-width: 768px) {{
+            .app-name {{
+                font-size: clamp(0.5rem, 1vmin, 0.6rem);
+                max-width: clamp(60px, 12vmin, 100px);
+            }}
+
+            /* Hide labels when there are too many apps on mobile */
+            .field.many-apps .app-name {{
+                display: none;
+            }}
         }}
 
         .app-name:hover {{
···
         <div class="identity">
             <div class="identity-label">@</div>
             <div class="identity-value" id="handle">loading...</div>
-            <div class="identity-pds-label">Your PDS</div>
+            <div class="identity-pds-label">You</div>
         </div>
         <div id="field" class="loading">loading...</div>
     </div>

static/app.js

···
 let globalHandle = null;
 let globalApps = null; // Store apps for repositioning on resize
 
+// Adaptive handle text sizing
+function adaptHandleTextSize(handleEl) {
+    const identity = handleEl.closest('.identity');
+    if (!identity) return;
+
+    // Get identity circle size
+    const maxWidth = identity.offsetWidth * 0.85; // 85% of circle width for padding
+
+    // Start with the CSS-defined font size and scale down if needed
+    const computedStyle = window.getComputedStyle(handleEl);
+    const maxFontSize = parseFloat(computedStyle.fontSize);
+    let fontSize = maxFontSize;
+
+    // Create temporary element to measure text width
+    const measure = document.createElement('span');
+    measure.style.visibility = 'hidden';
+    measure.style.position = 'absolute';
+    measure.style.whiteSpace = 'nowrap';
+    measure.style.fontFamily = computedStyle.fontFamily;
+    measure.textContent = handleEl.textContent;
+    document.body.appendChild(measure);
+
+    // Reduce font size until text fits
+    while (fontSize > 8) { // minimum 8px
+        measure.style.fontSize = fontSize + 'px';
+        if (measure.offsetWidth <= maxWidth) break;
+        fontSize -= 0.5;
+    }
+
+    document.body.removeChild(measure);
+    handleEl.style.fontSize = fontSize + 'px';
+}
+
 // Fetch app avatar from server
 async function fetchAppAvatar(namespace) {
     try {
···
         globalPds = initData.pds;
         globalHandle = initData.handle;
 
-        // Update identity display with handle
-        document.getElementById('handle').textContent = initData.handle;
+        // Update identity display with handle and adapt text size
+        const handleEl = document.getElementById('handle');
+        handleEl.textContent = initData.handle;
+        adaptHandleTextSize(handleEl);
 
         // Display user's avatar if available
         if (initData.avatar) {
···
         field.classList.remove('loading');
 
         const appNames = Object.keys(apps).sort();
-        // Responsive radius: use viewport-relative sizing with min/max bounds
+        const appCount = appNames.length;
+
+        // Hide labels on mobile when there are too many apps
+        const isMobileView = window.innerWidth < 768;
+        if (isMobileView && appCount > 20) {
+            field.classList.add('many-apps');
+        } else {
+            field.classList.remove('many-apps');
+        }
+
+        // Calculate circle size and radius based on viewport and app count
         const vmin = Math.min(window.innerWidth, window.innerHeight);
-        const radius = Math.max(vmin * 0.35, 150); // 35% of smallest dimension, min 150px
+        const isMobile = window.innerWidth < 768;
+
+        let circleSize;
+        let radius;
+
+        if (isMobile) {
+            // Mobile: more aggressive scaling for many apps
+            if (appCount <= 5) {
+                circleSize = Math.min(60, vmin * 0.08);
+                radius = vmin * 0.38;
+            } else if (appCount <= 10) {
+                circleSize = Math.min(50, vmin * 0.07);
+                radius = vmin * 0.4;
+            } else if (appCount <= 20) {
+                circleSize = Math.min(40, vmin * 0.055);
+                radius = vmin * 0.42;
+            } else {
+                circleSize = Math.min(32, vmin * 0.045);
+                radius = vmin * 0.44;
+            }
+            circleSize = Math.max(circleSize, 28); // Smaller minimum on mobile
+            radius = Math.max(radius, 120);
+        } else {
+            // Desktop: original logic with slight tweaks
+            if (appCount <= 5) {
+                circleSize = Math.min(70, vmin * 0.1);
+            } else if (appCount <= 10) {
+                circleSize = Math.min(60, vmin * 0.09);
+            } else if (appCount <= 20) {
+                circleSize = Math.min(50, vmin * 0.07);
+            } else {
+                circleSize = Math.min(40, vmin * 0.06);
+            }
+            circleSize = Math.max(circleSize, 35);
+            radius = Math.max(vmin * 0.35, 150);
+        }
+
         const centerX = window.innerWidth / 2;
         const centerY = window.innerHeight / 2;
 
+        // Store circle size for resize handler
+        globalApps._circleSize = circleSize;
+
         appNames.forEach((namespace, i) => {
             const angle = (i / appNames.length) * 2 * Math.PI - Math.PI / 2; // Start from top
-            const x = centerX + radius * Math.cos(angle) - 30;
-            const y = centerY + radius * Math.sin(angle) - 30;
+            const circleOffset = circleSize / 2;
+            const x = centerX + radius * Math.cos(angle) - circleOffset;
+            const y = centerY + radius * Math.sin(angle) - circleOffset;
 
             const div = document.createElement('div');
             div.className = 'app-view';
···
             const url = `https://${displayName}`;
 
             div.innerHTML = `
-                <div class="app-circle" data-namespace="${namespace}">${firstLetter}</div>
+                <div class="app-circle" data-namespace="${namespace}" style="width: ${circleSize}px; height: ${circleSize}px; font-size: ${circleSize * 0.4}px;">${firstLetter}</div>
                 <a href="${url}" target="_blank" rel="noopener noreferrer" class="app-name" data-url="${url}">${displayName} ↗</a>
             `;
 
···
             clearTimeout(resizeTimeout);
             resizeTimeout = setTimeout(() => {
                 repositionAppCircles();
-            }, 100); // Debounce resize events
+                // Re-adapt handle text size on resize
+                const handleEl = document.getElementById('handle');
+                if (handleEl) adaptHandleTextSize(handleEl);
+            }, 50); // Faster debounce for smoother updates
         });
     })
     .catch(e => {
···
     if (!globalApps) return;
 
     const appViews = document.querySelectorAll('.app-view');
-    const appNames = Object.keys(globalApps).sort();
+    const appNames = Object.keys(globalApps).filter(k => k !== '_circleSize').sort();
+    const appCount = appNames.length;
+
+    // Update label visibility on resize
+    const field = document.getElementById('field');
+    const isMobileView = window.innerWidth < 768;
+    if (isMobileView && appCount > 20) {
+        field.classList.add('many-apps');
+    } else {
+        field.classList.remove('many-apps');
+    }
 
+    // Recalculate circle size and radius based on viewport and app count
     const vmin = Math.min(window.innerWidth, window.innerHeight);
-    const radius = Math.max(vmin * 0.35, 150);
+    const isMobile = window.innerWidth < 768;
+
+    let circleSize;
+    let radius;
+
+    if (isMobile) {
+        // Mobile: more aggressive scaling for many apps
+        if (appCount <= 5) {
+            circleSize = Math.min(60, vmin * 0.08);
+            radius = vmin * 0.38;
+        } else if (appCount <= 10) {
+            circleSize = Math.min(50, vmin * 0.07);
+            radius = vmin * 0.4;
+        } else if (appCount <= 20) {
+            circleSize = Math.min(40, vmin * 0.055);
+            radius = vmin * 0.42;
+        } else {
+            circleSize = Math.min(32, vmin * 0.045);
+            radius = vmin * 0.44;
+        }
+        circleSize = Math.max(circleSize, 28);
+        radius = Math.max(radius, 120);
+    } else {
+        // Desktop: original logic with slight tweaks
+        if (appCount <= 5) {
+            circleSize = Math.min(70, vmin * 0.1);
+        } else if (appCount <= 10) {
+            circleSize = Math.min(60, vmin * 0.09);
+        } else if (appCount <= 20) {
+            circleSize = Math.min(50, vmin * 0.07);
+        } else {
+            circleSize = Math.min(40, vmin * 0.06);
+        }
+        circleSize = Math.max(circleSize, 35);
+        radius = Math.max(vmin * 0.35, 150);
+    }
+
+    // Update stored circle size
+    globalApps._circleSize = circleSize;
+
+    // Recalculate center
     const centerX = window.innerWidth / 2;
     const centerY = window.innerHeight / 2;
 
     appViews.forEach((div, i) => {
         const angle = (i / appNames.length) * 2 * Math.PI - Math.PI / 2;
-        const x = centerX + radius * Math.cos(angle) - 30;
-        const y = centerY + radius * Math.sin(angle) - 30;
+        const circleOffset = circleSize / 2;
+        const x = centerX + radius * Math.cos(angle) - circleOffset;
+        const y = centerY + radius * Math.sin(angle) - circleOffset;
 
         div.style.left = `${x}px`;
         div.style.top = `${y}px`;
+
+        // Update circle size
+        const circle = div.querySelector('.app-circle');
+        if (circle) {
+            circle.style.width = `${circleSize}px`;
+            circle.style.height = `${circleSize}px`;
+            circle.style.fontSize = `${circleSize * 0.4}px`;
+        }
     });
 }