One small UI fix for Wispr Flow

One small UI fix for Wispr Flow

One small UI fix for Wispr Flow

A small fix to Wispr Flow's nav bar, and the math behind it

A small fix to Wispr Flow's nav bar, and the math behind it

ROLE

ROLE

Design Engineer

PLATFORM

PLATFORM

Web

TOOLS

TOOLS

Chrome Dev Tools

DURATION

DURATION

5 mins

Before & After

This is the nav bar UI bug, corrected with simple math in real time. The whole change is a single radius value. The hard part was never the fix, it was noticing it.

Current outer radius is 0.6rem

Currently the outer radius is 0.6rem

Correct outer radius = 0.75 + 0.5 = 1.25rem

Why does the current nav bar look off?

For nested corners to sit right, the outer radius should equal the inner radius plus the padding between them. Matching the formula is the entire fix.

Graphic by Pierluigi Giglio

How to actually fix it?

The nav container's border radius should be changed from 0.6rem → 0.75rem + 0.5rem + 2px in the codebase. The extra 2px is added to compensate for the border width.

This is the nav bar UI bug, corrected in real time. The whole change is a single radius value. The hard part was never the fix, it was noticing it.

Thank you for reading :)

Thank you for reading :)

I know this is a small fix, but I think details like this compound, and I wanted to make a real fix to a product I actually use and believe in.

— Written in Wispr Flow

Resume

About