Mobile UX: Writing activity input bar is cramped with action buttons on mobile

[davidortinau]

Problem

The Writing activity page (Writing.razor lines 134-153) renders a text input + Translate button + Grade button in a single d-flex gap-2 row. On mobile, the two buttons (~130px combined) leave only ~205px for the text input on a ~343px content area. For typing Korean sentences, this is very narrow.

Affected Page(s)

• /writing

Expected Behavior

The text input should have maximum width on mobile. Action buttons should be compact or stacked.

Suggested Fix

Make both action buttons icon-only on mobile (using .btn-icon at 44x44px):

• Translate button: already icon-only, just remove extra padding
• Grade button: replace text with a send icon on mobile

File: src/SentenceStudio.UI/Pages/Writing.razor lines 134-153

Priority

Low -- Functional but cramped; input field narrower than ideal for sentence composition.

[github-actions]

🔄 Ralph — Auto-Triage

Assigned to: Jayne (Tester)
Reason: Matches testing/QA domain

Ralph auto-triaged this issue via the squad heartbeat. To reassign, swap the squad:* label.

[github-actions]

🔄 Ralph — Auto-Triage

Assigned to: Jayne (Tester)
Reason: Matches testing/QA domain

Ralph auto-triaged this issue via the squad heartbeat. To reassign, swap the squad:* label.

[github-actions]

🔄 Ralph — Auto-Triage

Assigned to: Jayne (Tester)
Reason: Matches testing/QA domain

Ralph auto-triaged this issue via the squad heartbeat. To reassign, swap the squad:* label.

[github-actions]

🔄 Ralph — Auto-Triage

Assigned to: Jayne (Tester)
Reason: Matches testing/QA domain

Ralph auto-triaged this issue via the squad heartbeat. To reassign, swap the squad:* label.

[github-actions]

🏗️ Squad Triage — Zoe (Lead)

Issue: #120 — Mobile UX: Writing activity input bar is cramped with action buttons on mobile
Assigned to: Jayne (Tester)
Reason: Issue relates to testing/quality work

@copilot evaluation: 🔴 Not suitable — issue involves work outside the coding agent's capability profile.

Team roster:

• Zoe (Lead) → label: squad:zoe
• Kaylee (Full-stack Dev) → label: squad:kaylee
• Wash (Backend Dev) → label: squad:wash
• River (AI/Prompt Engineer) → label: squad:river
• Jayne (Tester) → label: squad:jayne
• Ralph (Work Monitor) → label: squad:ralph
• @copilot (Coding Agent) → label: squad:copilot

To reassign, remove the current squad:* label and add the correct one.