Blueprint: Spinner makes big circles

[pcdv]

Environment

• __Package version(s)__:

  "@blueprintjs/core": "3.4.0",
  "react": "16.4.2",
  "react-dom": "16.4.2",
  "react-scripts": "1.1.5",
  "react-transition-group": "2.4.0"

• __Browser and OS versions__:

Linux (Ubuntu 14.04) with Chrome and Firefox

Steps to reproduce

I was migrating from 2.3.1 to 3.4.0 and found the following problem:
https://codesandbox.io/s/zl83zv89ox

Actual behavior

Instead of spinning in place, the spinner moves in a big circle.

Expected behavior

Should behave as a normal spinner.

Possible solution

No idea.

[giladgray]

lol sad stuff! looks like display: inline-block will resolve it by ensuring the element shrinks to fit the spinner.

[pcdv]

Thanks I will try that

[rmn-nknv]

"display: inline-block;" is not always a sufficient solution
"display: flex;" for parent container fixed this for me as workaround

[pcdv]

FWIW I added the following in a custom CSS file and it did the trick for me

.bp3-spinner {
  display: inline-block;
}

Modifying the parent of every Spinner in a big app would be more complicated in my case. But I can imagine that the inline-block trick could fail in some situations (hope not).

[giladgray]

both flex and inline-block are functional solutions here. the only reason this bug shipped is because the example container (and loading buttons) uses flex so the spinner was correctly sized. i think i'm going to set inline-block on the spinner element by default because flex parents will trivially ignore that.