Blank space on SharePoint development environment

Question

I am developing a webpart for SharePoint and I have an annoying issue with my development environment for sharepoint Online. I have a blank space on the right. How can I fix it ? It's an unusable space that I cant' remove which it's present even when I generate a new project. I can't add webpart on it. And some webpart seems to pass under it. I make my webpart using ReactJS and the Office UI Fabric.

I already tried to reinstall but I still have the same issue.

I use IE11.

Could you help me ?

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import styles from './Graph.module.scss';
import { IGraphProps } from './IGraphProps';
import { escape } from '@microsoft/sp-lodash-subset';


import {
  Image,
  IImageProps,
  ImageFit
} from 'office-ui-fabric-react/lib/Image';

export default class Graph extends React.Component<IGraphProps, {}> {
  public render() {
    const imageProps: IImageProps = {
      imageFit: ImageFit.contain
    };

    return (
      <div className={styles.testdiv}>
        <h1>Test d'image</h1>
        <Fabric>
          <Image {...imageProps as any} src="http://placehold.it/600x300" className={styles.test} alt="Example implementation of the property image fit using the contain value on an image wider than the frame." width={400} height={200} />
        </Fabric>
      </div>
    );
  }
}

I should have that :

And I have that :

The space for the webpart doesn't take the full page, but it should be.

Answer 1

This is default IE11 behaivor of workbench page. Edge, Chrome displays it in the corerct way. When you put webpart in the real page the width will changes automatically.

The issue that it is not allowed to use different page layouts in the workbench except the bilt-in. According to SPFx roadmap workbench 2.0 is comming soon, I hope they will extend the functionality of it.

As workaround you can use mobile/tablet view.