From 5e59a3a28e78989b3f3b8941400fa4c4aae414c5 Mon Sep 17 00:00:00 2001
From: Yunfei He <i.heyunfei@gmail.com>
Date: Mon, 25 May 2026 22:40:55 +0800
Subject: [PATCH] fix: add explicit flexDirection="row" to align-self
 multi-text tests

Ink's Box defaults to flexDirection="row", so multiple <Text> children
lay out side-by-side. Vue-tui uses yoga's default (column). Rather than
changing the global default and breaking 20+ existing tests, add
explicit flexDirection="row" to the inner boxes in these two tests so
they match the intended layout behavior being verified.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../runtime-tests/integration/layout/flex-align-self.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-tests/integration/layout/flex-align-self.test.tsx b/packages/runtime-tests/integration/layout/flex-align-self.test.tsx
index ececf6b..1e0d802 100644
--- a/packages/runtime-tests/integration/layout/flex-align-self.test.tsx
+++ b/packages/runtime-tests/integration/layout/flex-align-self.test.tsx
@@ -21,7 +21,7 @@ test("row - align multiple text nodes to center", async () => {
   const { lastFrame } = await render(
     defineComponent(() => () => (
       <Box flexDirection="row" height={3}>
-        <Box alignSelf="center">
+        <Box alignSelf="center" flexDirection="row">
           <Text>A</Text>
           <Text>B</Text>
         </Box>
@@ -50,7 +50,7 @@ test("row - align multiple text nodes to bottom", async () => {
   const { lastFrame } = await render(
     defineComponent(() => () => (
       <Box flexDirection="row" height={3}>
-        <Box alignSelf="flex-end">
+        <Box alignSelf="flex-end" flexDirection="row">
           <Text>A</Text>
           <Text>B</Text>
         </Box>