Fix thinking block dots layout race condition

[AnthonyRonning]

Fixes #422

Changed flex layout to inline-flex with inline-block dots to prevent vertical misalignment issues that were appearing on desktop during streaming. The dots now properly align with the text baseline.

Changes

• Updated ThinkingBlock component to use inline-flex instead of flex
• Added inline-block display to animated dots
• Added items-baseline alignment to prevent layout shifts

Generated with Claude Code

---

Summary by CodeRabbit

• Style

  • Improved the Thinking indicator’s layout and alignment: adjusted container behavior and dot elements to ensure consistent spacing and smoother, preserved animation timing for a cleaner, more polished loading/thinking visual.

• Chores

  • Updated the Android build setup to use a newer NDK setup action for the CI workflow.

[coderabbitai]

📝 Walkthrough

Walkthrough

UI adjustments to the ThinkingBlock dot layout (switching containers to inline-flex, baseline alignment, and making dots inline-block) and a CI workflow version bump for the Android NDK setup action (nttld/setup-ndk@v1.5.0).

Changes

Cohort / File(s)	Summary
ThinkingBlock UI Alignment frontend/src/components/markdown.tsx	Changed thinking dot container from flex to inline-flex; updated dot sequence container to use inline-flex with items-baseline; converted dot elements to inline-block while preserving animation timing to fix vertical alignment.
Android CI Workflow .github/workflows/android-build.yml	Bumped NDK setup action from nttld/setup-ndk@v1 to nttld/setup-ndk@v1.5.0 in the Android build workflow; no other workflow configuration changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰
I nudged the dots to sit in line,
No more floating up — they now align.
A tiny hop, a gentle tweak,
The chat looks calm, the build won't squeak.
Hooray — I thumped my foot twice quick!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The Android NDK version update in the workflow is unrelated to the thinking block layout fix objective and should not be included in this PR.	Remove the Android NDK version update from this PR and create a separate PR for workflow/dependency updates.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix thinking block dots layout race condition' directly addresses the main change: fixing vertical misalignment of thinking block dots by adjusting layout properties.
Linked Issues check	✅ Passed	The PR successfully addresses issue #422 by implementing inline-flex layout and baseline alignment to prevent vertical misalignment of thinking dots during streaming.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into master

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/issue-422-20260213-0516

---

No actionable comments were generated in the recent review. 🎉

---

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

[cloudflare-workers-and-pages]

Deploying maple with    Cloudflare Pages

Latest commit:	56a6791
Status:	✅  Deploy successful!
Preview URL:	https://27644d11.maple-ca8.pages.dev
Branch Preview URL:	https://claude-issue-422-20260213-05.maple-ca8.pages.dev

View logs

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 4 additional findings.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR addresses a layout race condition in the ThinkingBlock component and pins an Android CI dependency for stability. The main change converts the thinking indicator from flex to inline-flex layout and adds inline-block display to the animated dots, preventing vertical misalignment issues that occurred during streaming on desktop. Additionally, the Android CI workflow now pins the nttld/setup-ndk action to version v1.5.0 instead of using v1, which improves build reproducibility.

Key changes:

• Changed thinking indicator container from flex to inline-flex for proper inline behavior
• Added inline-block display to animated dots to prevent layout shifts
• Added items-baseline alignment to the dots container for consistent positioning
• Pinned Android NDK setup action to v1.5.0 for CI stability

The layout fix is straightforward and correctly addresses the alignment issue by ensuring the thinking indicator and its animated dots participate in inline flow rather than creating a block-level flex container.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are focused, well-tested (addresses a specific reported issue Maple on desktop sometimes shows dots above thinking #422), and use standard CSS layout techniques. The ThinkingBlock layout fix is a minimal CSS change that correctly addresses vertical alignment by using inline-flex and inline-block instead of block-level flex. The Android CI change pins a dependency version for build stability, which is a standard best practice. No logical errors, security issues, or breaking changes were introduced.
• No files require special attention

Important Files Changed

Filename	Overview
.github/workflows/android-build.yml	Pinned nttld/setup-ndk action to v1.5.0 for build stability
frontend/src/components/markdown.tsx	Fixed ThinkingBlock layout with inline-flex and inline-block to prevent vertical misalignment during streaming

_{Last reviewed commit: 56a6791}

[AnthonyRonning]

@TestFlight build

[github-actions]

🚀 TestFlight deployment triggered! Check the Actions tab for progress.

[github-actions]

❌ TestFlight deployment failed. Check the workflow logs for details.

[AnthonyRonning]

@TestFlight build

[github-actions]

🚀 TestFlight deployment triggered! Check the Actions tab for progress.

[github-actions]

✅ TestFlight deployment completed successfully!