# Claude Code kept hardcoding w-[232px] on my sidebar links until I started feeding it the parent's flex rules

> Source: <https://dev.to/picolabs/claude-code-kept-hardcoding-w-232px-on-my-sidebar-links-until-i-started-feeding-it-the-parents-l19>
> Published: 2026-10-29 13:34:51+00:00

If you paste a screenshot of a sidebar into Claude Code or Cursor and ask for the same nav item, you usually get `w-[232px]` and a fresh `flex` wrapper. The screenshot shows a 232px wide link. It doesn't show that the link fills a `flex-col` nav with `align-items: stretch`, so the model copies the pixel width and the layout stops flexing.

Copying computed styles out of DevTools has the opposite problem. You get a few hundred properties for the element, most of them browser defaults, and nothing at all about the container it sits in.

What works better is pasting the parent's layout explicitly, plus the element's rendered box and only its non-default CSS. Here's that same nav link formatted as a prompt block:

```
### UI Element: a.nav-item.is-active
- Selector: aside.sidebar > nav > a.nav-item.is-active
- Box: 232x36 at (12, 208)
- Parent nav: display: flex; flex-direction: column; align-items: stretch; gap: 2px
- Children: svg.icon, span.label, span.badge
- Text: "Billing and invoices 3"

Tailwind v4: flex flex-row items-center gap-2 px-3 w-full h-9 text-sm font-medium leading-5 text-[#f4f4f5] bg-[#27272a] rounded-md

Computed CSS (non-default):
display: flex; flex-direction: row; align-items: center; gap: 8px;
padding: 0px 12px; width: 100%; height: 36px; font-size: 14px;
font-weight: 500; line-height: 20px; color: rgb(244, 244, 245);
background-color: rgb(39, 39, 42); border-radius: 6px;

Fix / Refactor this element: keep the parent layout constraints, use the Tailwind v4 classes above, and apply:
```

The width comes out as `w-full` because the link's width matches the nav's content box. With the parent's flex column spelled out, the model has a reason to keep it instead of adding a wrapper.

I wrapped this into a tiny 356-line Manifest V3 Chrome extension (`activeTab` only, no backend, 100% local in-browser execution): hit "Pick Element on Page", click an element, and it copies that block.

Site: [https://picolabs.app](https://picolabs.app)

Chrome Web Store (includes 5 free captures): [https://chromewebstore.google.com/detail/iokjpoihcpmmdfajnjmlghcclgdlmpgi](https://chromewebstore.google.com/detail/iokjpoihcpmmdfajnjmlghcclgdlmpgi)