[GH-ISSUE #630] Potential border issue for <box> in solidJS #939

New issue

Open

opened 2026-03-14 09:05:44 +03:00 by kerem · 3 comments

kerem commented

2026-03-14 09:05:44 +03:00

Owner

Originally created by @viralcodex on GitHub (Feb 5, 2026).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/630

Originally assigned to: @Adictya on GitHub.

Hi team, I found this potential issue where borders are not working as expected in the TUI
Showing here the issue and the code for the component in SolidJS.

export function ToolsMenu(props: {
  selectedTool: () => string | null;
  selectTool: (toolName: string) => void;
}) {
  const { selectedTool, selectTool } = props;
  const terminalDimensions = useTerminalDimensions();
  const isCompact = () => terminalDimensions().width < 95;

  return (
    <box alignItems="center" justifyContent="center" flexDirection="column">
      <box
        alignItems="center"
        justifyContent="center"
        flexDirection={isCompact() ? "column" : "row"}
        columnGap={3}
        rowGap={3}
      >
        {toolsMenu.map((tool) => (
          <box
            flexDirection="column"
            paddingLeft={3}
            paddingRight={3}
            paddingTop={1}
            onMouseDown={() => selectTool(tool.command)}
            width={isCompact() ? "100%" : "auto"}
            backgroundColor="#3f5365"
            border={["bottom"]}
            borderColor={"#c10000"}
            borderStyle="heavy"
          >
            <text
              fg={selectedTool() === tool.command ? "cyan" : "yellow"}
              attributes={
                selectedTool() === tool.command
                  ? TextAttributes.BOLD
                  : undefined
              }
            >
              {tool.name}
            </text>
          </box>
        ))}
      </box>
    </box>
  );

Would love to know if I am doing something wrong or there is a genuine bug?

Platform: MacOS 26
Terminal: zsh
OpenTUI version:

"@opentui/core": "^0.1.74",
"@opentui/solid": "^0.1.74",

Thanks

Originally created by @viralcodex on GitHub (Feb 5, 2026). Original GitHub issue: https://github.com/anomalyco/opentui/issues/630 Originally assigned to: @Adictya on GitHub. Hi team, I found this potential issue where borders are not working as expected in the TUI Showing here the issue and the code for the component in **SolidJS**. <img width="321" height="91" alt="Image" src="https://github.com/user-attachments/assets/cfc677b6-2835-4bc4-9f1c-93c1438bc3f6" /> ```typescript export function ToolsMenu(props: { selectedTool: () => string | null; selectTool: (toolName: string) => void; }) { const { selectedTool, selectTool } = props; const terminalDimensions = useTerminalDimensions(); const isCompact = () => terminalDimensions().width < 95; return ( <box alignItems="center" justifyContent="center" flexDirection="column"> <box alignItems="center" justifyContent="center" flexDirection={isCompact() ? "column" : "row"} columnGap={3} rowGap={3} > {toolsMenu.map((tool) => ( <box flexDirection="column" paddingLeft={3} paddingRight={3} paddingTop={1} onMouseDown={() => selectTool(tool.command)} width={isCompact() ? "100%" : "auto"} backgroundColor="#3f5365" border={["bottom"]} borderColor={"#c10000"} borderStyle="heavy" > <text fg={selectedTool() === tool.command ? "cyan" : "yellow"} attributes={ selectedTool() === tool.command ? TextAttributes.BOLD : undefined } > {tool.name} </text> </box> ))} </box> </box> ); ``` Would love to know if I am doing something wrong or there is a genuine bug? Platform: MacOS 26 Terminal: zsh OpenTUI version: ```json "@opentui/core": "^0.1.74", "@opentui/solid": "^0.1.74", ```` Thanks

kerem added the

feature

label

2026-03-14 09:05:44 +03:00

kerem commented

2026-03-14 09:05:55 +03:00

Author

Owner

@Adictya commented on GitHub (Feb 10, 2026):

Hey, this is expected behavior. If you want the border to appear outside the background color area, wrap your current box in another and apply the border there

          <box border={["bottom"]} borderColor={"#c10000"} borderStyle="rounded">
            <box
              flexDirection="column"
              paddingLeft={3}
              paddingRight={3}
              paddingTop={1}
              paddingBottom={1}
              width={isCompact() ? "100%" : "auto"}
              backgroundColor="#3f5365"
            >
              <text>{tool}</text>
            </box>
          </box>

@Adictya commented on GitHub (Feb 10, 2026): Hey, this is expected behavior. If you want the border to appear outside the background color area, wrap your current box in another and apply the border there <img width="543" height="107" alt="Image" src="https://github.com/user-attachments/assets/4c70964d-7c32-4503-9d89-ffbbac89b7b4" /> ```tsx <box border={["bottom"]} borderColor={"#c10000"} borderStyle="rounded"> <box flexDirection="column" paddingLeft={3} paddingRight={3} paddingTop={1} paddingBottom={1} width={isCompact() ? "100%" : "auto"} backgroundColor="#3f5365" > <text>{tool}</text> </box> </box> ```

kerem commented

2026-03-14 09:06:00 +03:00

Author

Owner

@viralcodex commented on GitHub (Feb 10, 2026):

What about just on the edge of the box? I have to either use other unicode chars that are like underscore to achieve just that. Shouldn't this be by default?

@viralcodex commented on GitHub (Feb 10, 2026): What about just on the edge of the box? I have to either use other unicode chars that are like underscore to achieve just that. Shouldn't this be by default?

kerem commented

2026-03-14 09:06:05 +03:00

Author

Owner

@Adictya commented on GitHub (Feb 11, 2026):

Yeah, we could have a way to pass-through custom border chars for boxes.

@Adictya commented on GitHub (Feb 11, 2026): Yeah, we could have a way to pass-through custom border chars for boxes.