Which means doing the equivalent of a cross-browser test. Butphilippines whatsapp number instead of Firefox, Chrome, Edge, Safari etc… it was Hyper, iTerm, Windows Terminal, Terminal.app, cmder, Command Prompt, Powershell, VS Code and more. And instead of normal and dark modes, we have color systems, multiple color support modes , and limited character sets . Luckily, libraries like chalk (called by ink) and figures have your back on at least some points of this challenge. The other problem is the different terminal sizes. If you're just building basic text on the CLI, you normally don't care about the user's terminal size.
In fact, ink can still handle text wrapping for you if your text to display is larger than the terminal size allows. But we were limited by building a UI that takes over your entire terminal. You can think of it as building a website where anything that doesn't fit in the browser window is hidden. Except in our case, it wasn't. Characters printed on top of each other, making the content unreadable. Since ink uses Yoga Layout to handle flex boxes, building responsive interfaces is pretty easy! Except there's no equivalent to options overflow: hidden or overflow: scroll.

Which means if our content doesn't fit, we have to hide it ourselves. We ended up building a collection of components that help us do this job, either based on the window size, or the component size. TypeScript Copy the code import React, { PropsWithChildren } from 'react'; import { Merge } from 'type-fest'; import { shouldRenderBasedOnBreakpoint, useResponsiveWindowSize, } from '../../hooks/useResize'; import { Breakpoint } from '../../utils/breakpoints'; export type RenderIfWindowSizeProps = Merge< Breakpoint, { fallback?: JSX.Element | null; } >; export function RenderIfWindowSize({ children, fallback = null, .