Fix svg viewer position

src/Components/Bar/Bar.tsx

@@ -11,6 +11,8 @@ interface IBarProps {
   ToggleTimeline: () => void
 }
 
+export const BAR_WIDTH = 64; // 4rem
+
 export const Bar: React.FC<IBarProps> = (props) => {
   return (
     <div className='fixed z-20 flex flex-col top-0 left-0 h-screen w-16 bg-slate-100'>

src/Components/SVG/SVG.tsx

@@ -3,6 +3,7 @@ import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
 import { ContainerModel } from '../../Interfaces/ContainerModel';
 import { Selector } from './Elements/Selector';
+import { BAR_WIDTH } from '../Bar/Bar';
 
 interface ISVGProps {
   width: number
@@ -12,8 +13,8 @@ interface ISVGProps {
 }
 
 interface ISVGState {
-  viewerWidth: number,
+  viewerWidth: number
-  viewerHeight: number,
+  viewerHeight: number
 }
 
 export class SVG extends React.PureComponent<ISVGProps> {
@@ -23,14 +24,14 @@ export class SVG extends React.PureComponent<ISVGProps> {
   constructor(props: ISVGProps) {
     super(props);
     this.state = {
-      viewerWidth: window.innerWidth,
+      viewerWidth: window.innerWidth - BAR_WIDTH,
       viewerHeight: window.innerHeight
     };
   }
 
   resizeViewBox(): void {
     this.setState({
-      viewerWidth: window.innerWidth,
+      viewerWidth: window.innerWidth - BAR_WIDTH,
       viewerHeight: window.innerHeight
     });
   }
@@ -60,7 +61,7 @@ export class SVG extends React.PureComponent<ISVGProps> {
     }
 
     return (
-      <div id={SVG.ID}>
+      <div id={SVG.ID} className='ml-16'>
         <UncontrolledReactSVGPanZoom
           width={this.state.viewerWidth}
           height={this.state.viewerHeight}
@@ -69,7 +70,7 @@ export class SVG extends React.PureComponent<ISVGProps> {
           miniatureProps={{
             position: 'left',
             background: '#616264',
-            width: window.innerWidth - 12,
+            width: window.innerWidth - 12 - BAR_WIDTH,
             height: 120
           }}
         >