Patch: fix overlapping livetiming control text on small screens

[konrad2002]

Summary by CodeRabbit

Release Notes

• Style
  • Enhanced mobile responsiveness for live timing controls with optimized layout constraints on small screens (max-width: 600px).

[coderabbitai]

📝 Walkthrough

Walkthrough

The livetiming-controls component's SCSS stylesheet is updated with a mobile-specific host height constraint. Within the max-width: 600px media query, a :host rule sets height: 66px, establishing a fixed vertical dimension for the component on small screens.

Changes

Mobile Host Height Constraint

Layer / File(s)	Summary
Mobile Styling src/app/content/live/components/livetiming/livetiming-controls/livetiming-controls.component.scss	Adds :host { height: 66px; } rule within the @media (max-width: 600px) block to constrain component height on mobile devices.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 Six-six pixels tall, a mobile delight,
The host now stands just the right height!
On screens both wee and wide,
Our timing controls fit with pride. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main fix: addressing overlapping text in livetiming controls on small screens by adding a height constraint, which matches the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch develop

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Review rate limit: 0/1 reviews remaining, refill in 60 minutes.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/app/content/live/components/livetiming/livetiming-controls/livetiming-controls.component.scss (1)

11-13: ⚡ Quick win

Prefer min-height over fixed height to avoid clipping on mobile.

A hard height: 66px can reintroduce text overlap/cropping with longer localized strings or larger accessibility font sizes. Use min-height so the control can grow when needed.

Proposed fix

 `@media` only screen and (max-width: 600px) {
     :host {
-        height: 66px;
+        min-height: 66px;
     }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/app/content/live/components/livetiming/livetiming-controls/livetiming-controls.component.scss`
around lines 11 - 13, Replace the fixed height on the component host with a
minimum height so the control can expand for longer localized strings or larger
accessibility font sizes; in livestiming-controls.component.scss update the
:host rule (currently using height: 66px) to use min-height: 66px instead so
content won't be clipped while preserving the intended baseline height.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@src/app/content/live/components/livetiming/livetiming-controls/livetiming-controls.component.scss`:
- Around line 11-13: Replace the fixed height on the component host with a
minimum height so the control can expand for longer localized strings or larger
accessibility font sizes; in livestiming-controls.component.scss update the
:host rule (currently using height: 66px) to use min-height: 66px instead so
content won't be clipped while preserving the intended baseline height.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8edabb9b-0924-499a-b567-dac4419313b3

📥 Commits

Reviewing files that changed from the base of the PR and between 267d077 and 155cca8.

📒 Files selected for processing (1)

• src/app/content/live/components/livetiming/livetiming-controls/livetiming-controls.component.scss