zzstoatzz.io
interactive intro to open social
at-me.zzstoatzz.io
fix: improve circle radius calculation for viewport bounds
Calculate max radius based on actual reserved UI areas:
- Header: 80px for POV indicator and filter buttons
- Footer: 120px for guestbook controls
- Sides: 60px for app labels
This properly fills available space while respecting UI elements.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+14
-2
+14
-2
src/view/filters.js
+14
-2
src/view/filters.js
···
232
232
const centerX = window.innerWidth / 2;
233
233
const centerY = window.innerHeight / 2;
234
234
235
-
// Cap radius so apps stay on screen (leave room for labels)
236
-
const maxRadius = Math.min(centerX, centerY) - circleSize - 60;
235
+
// Reserved areas for UI elements
236
+
const headerReserved = 80; // POV indicator, filter buttons
237
+
const footerReserved = 120; // Guestbook controls
238
+
const sideMargin = 60; // Room for app labels
239
+
240
+
// Calculate max radius based on available space from center
241
+
// Apps at top: centerY - radius - circleSize/2 >= headerReserved
242
+
// Apps at bottom: centerY + radius + circleSize/2 <= height - footerReserved
243
+
// Apps at sides: centerX - radius - circleSize/2 >= sideMargin
244
+
const maxTop = centerY - headerReserved - circleSize / 2;
245
+
const maxBottom = (window.innerHeight - footerReserved) - centerY - circleSize / 2;
246
+
const maxSide = centerX - sideMargin - circleSize / 2;
247
+
248
+
const maxRadius = Math.max(Math.min(maxTop, maxBottom, maxSide), 150);
237
249
radius = Math.min(radius, maxRadius);
238
250
239
251
// Position only visible apps evenly around the circle