Do not make the width of the button proportionnel to the width of the popup window

I want to make a button in a popup window as Script Lab as follows. Note that, in Script Lab, the width of the button is enough to hold the sentence in one line, even though the popup window is not very wide:

I almost use the same code as ScriptLab:

import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
... ...

    return (
      <div style={{ height: '100vh', display: 'flex', flexDirection: 'column'}}>
        <PrimaryButton
          style={{ margin: 'auto' }}
          text="Open link in new window"
          // tslint:disable-next-line: jsx-no-lambda
          onClick={() => {
            window.open(this.props.url);
          }}
        />
      </div>
    );

Here is my result, where the width of the button is proportionnel to the width of the popup window. As a consequence, the sentence needs to be displayed in 2 rows, which is not what I want.

Does anyone know how to amend the code to get the effect like Script Lab?

Edit 1: I have made a sandbox: https://codesandbox.io/s/relaxed-feather-i6jz6?file=/src/App.js

Now, the problem is, if we Open In New Window and open https://i6jz6.csb.app/ in a new browser tab several times, we may see a little adjustment of the font of the text in the button. Does anyone know how to avoid that?

Set a fixed width to the button.Setting a fixed width will make it unproportional to the width of the pop-up window. width:280px;

Second Option: If you use min-width, the button width will decrease to a point.

Third Option: If you use max-width, the button width will increase upto a point.

Fourth Option: You can also use '@media' queries to customize the width according to size of the screen.