diff --git a/frontend/src/views/TVView.vue b/frontend/src/views/TVView.vue index 5f084b3..c2dd1be 100644 --- a/frontend/src/views/TVView.vue +++ b/frontend/src/views/TVView.vue @@ -126,7 +126,7 @@
-
+
-
+
📋 Rules & Expectations @@ -288,6 +288,22 @@ const currentSubjectOptions = computed(() => scheduleStore.currentBlock?.subject?.options || [] ) +const rulesScaleStyle = computed(() => { + const count = scheduleStore.rulesOverlayItems?.length || 0 + if (count <= 5) return {} + // Scale down: at 5 rules = 1.0, at 10 rules ≈ 0.65, capped at 0.5 + const scale = Math.max(0.5, 5 / count) + return { '--rules-scale': scale } +}) + +const blocksScaleStyle = computed(() => { + const count = scheduleStore.blocks?.length || 0 + if (count <= 6) return {} + // Scale down: at 6 blocks = 1.0, at 12 blocks ≈ 0.55, capped at 0.5 + const scale = Math.max(0.5, 6 / count) + return { '--blocks-scale': scale } +}) + function blockElapsed(block) { const currentId = scheduleStore.session?.current_block_id if (block.id === currentId && scheduleStore.blockStartedAt && !scheduleStore.isPaused) { @@ -531,11 +547,10 @@ onMounted(async () => { } .tv-schedule-list { - overflow-y: auto; + overflow: hidden; display: flex; flex-direction: column; - gap: 0.75rem; - max-height: 60vh; + gap: calc(0.75rem * var(--blocks-scale, 1)); } /* Expand timer to fill the column */ @@ -546,10 +561,10 @@ onMounted(async () => { .tv-timer-col :deep(.timer-time) { font-size: 5.5rem; } .tv-timer-col :deep(.timer-label) { font-size: 1.4rem; } -/* Make schedule block text larger for TV viewing */ -.tv-schedule-list :deep(.block-title) { font-size: 1.2rem; } -.tv-schedule-list :deep(.block-time) { font-size: 1rem; } -.tv-schedule-list :deep(.block-card) { padding: 0.85rem 1rem; } +/* Make schedule block text larger for TV viewing, scaling with block count */ +.tv-schedule-list :deep(.block-title) { font-size: calc(1.2rem * var(--blocks-scale, 1)); } +.tv-schedule-list :deep(.block-time) { font-size: calc(1rem * var(--blocks-scale, 1)); } +.tv-schedule-list :deep(.block-card) { padding: calc(0.85rem * var(--blocks-scale, 1)) calc(1rem * var(--blocks-scale, 1)); } .tv-ws-status { position: fixed; @@ -663,12 +678,12 @@ onMounted(async () => { padding: 3.5rem 4.5rem; max-width: 800px; width: 90%; - max-height: 85vh; - overflow-y: auto; + max-height: 90vh; + overflow: hidden; box-shadow: 0 0 80px rgba(16, 185, 129, 0.3); display: flex; flex-direction: column; - gap: 2rem; + gap: calc(2rem * var(--rules-scale, 1)); } .tv-rules-header { display: flex; @@ -676,9 +691,9 @@ onMounted(async () => { gap: 1rem; justify-content: center; } -.tv-rules-icon { font-size: 3rem; } +.tv-rules-icon { font-size: calc(3rem * var(--rules-scale, 1)); } .tv-rules-title { - font-size: 2.5rem; + font-size: calc(2.5rem * var(--rules-scale, 1)); font-weight: 800; color: #34d399; text-transform: uppercase; @@ -690,19 +705,19 @@ onMounted(async () => { margin: 0; display: flex; flex-direction: column; - gap: 1.25rem; + gap: calc(1.25rem * var(--rules-scale, 1)); counter-reset: rules-counter; } .tv-rules-item { counter-increment: rules-counter; display: flex; align-items: flex-start; - gap: 1.25rem; - font-size: 2rem; + gap: calc(1.25rem * var(--rules-scale, 1)); + font-size: calc(2rem * var(--rules-scale, 1)); font-weight: 500; color: #f1f5f9; line-height: 1.3; - padding-bottom: 1.25rem; + padding-bottom: calc(1.25rem * var(--rules-scale, 1)); border-bottom: 1px solid #1e293b; } .tv-rules-item:last-child { border-bottom: none; padding-bottom: 0; } @@ -711,12 +726,12 @@ onMounted(async () => { display: flex; align-items: center; justify-content: center; - min-width: 2.5rem; - height: 2.5rem; + min-width: calc(2.5rem * var(--rules-scale, 1)); + height: calc(2.5rem * var(--rules-scale, 1)); background: #064e3b; border: 2px solid #10b981; border-radius: 50%; - font-size: 1.2rem; + font-size: calc(1.2rem * var(--rules-scale, 1)); font-weight: 800; color: #34d399; flex-shrink: 0;