Centering issue

[AaronNGray]

Describe the bug
There is a problem with centering the react-zoom-pan-pinch image 'editor'.

To Reproduce
https://github.com/AaronNGray/react-zoom-pan-pinch-example

#root {
  position:relative;
  margin: 0 auto;
  min-height: 100%;
  width: 100%;
}
#wrapper {
  position:relative;
  width: 1470px;
  max-width: 1470px;
  min-height: 100%;
  border: 1px solid red;  
}
#header {
  position: relative;
  top: 0px;
  left: 0px;
  width: 1470px;
  height: 460px;
  overflow: hidden;
}

    <div id="wrapper">
      <div id="header">
        <TransformWrapper minScale={0.1} maxScale={16}>
          <TransformComponent wrapperStyle={{ maxHeight: "calc(100vh - 50px)" }}>
            <img src="Anthropocene.jpg" alt="test" />
          </TransformComponent>
        </TransformWrapper>
      </div>

generated code :-

<div id="wrapper">
  <div id="header">
    <div class="react-transform-wrapper transform-component-module_wrapper__SPB86 " style="width: 100%; max-height: calc(-50px + 100vh);">
      <div class="react-transform-component transform-component-module_content__FBWxo " style="transform: translate(0px, 0px) scale(1);">
        <img src="Anthropocene.jpg" alt="test">
      </div>
    </div>
  </div>
</div>

Given the following there is a width: fit-content; from transform-component-module_wrapper__SPB86

Expected behavior
Be able to center the #header in #wrapper.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Chrome
• Version 122.0.6261.129 (Official Build) (64-bit)

Additional context
As I say I think the width: fit-content; from transform-component-module_wrapper__SPB86 is the issue that is stopping the header from being centered.

[01e9]

Had similar issue with width: fit-content;

• styles.scss

  .wrapper {
      width: 100% !important;
  }

• index.tsx

  import styles from './styles.scss';
  
  <TransformWrapper centerOnInit>
      <TransformComponent wrapperClass={styles.wrapper}>
          <img ...

[0xanonymeow]

try

<TransformComponent
    wrapperStyle={{
        width: '100dvw',