Fix css

src/Components/Bar/Bar.tsx

@@ -15,7 +15,7 @@ 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'>
+    <div className='fixed z-20 flex flex-col top-0 left-0 h-full w-16 bg-slate-100'>
       <BarIcon
         isActive={props.isSidebarOpen}
         title='Components'

src/Components/History/History.tsx

@@ -39,7 +39,7 @@ export const History: React.FC<IHistoryProps> = (props: IHistoryProps) => {
   };
 
   return (
-    <div className={`fixed flex flex-col bg-slate-300 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
+    <div className={`fixed flex flex-col bg-slate-300 text-white transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
       <div className='bg-slate-600 font-bold sidebar-title'>
           Timeline
       </div>

src/Components/SVG/SVG.tsx

@@ -30,7 +30,7 @@ function resizeViewBox(
 
 export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
   const [viewer, setViewer] = React.useState<Viewer>({
-    viewerWidth: window.innerWidth,
+    viewerWidth: window.innerWidth - BAR_WIDTH,
     viewerHeight: window.innerHeight
   });
 

src/Components/Sidebar/Sidebar.tsx

@@ -30,7 +30,7 @@ export const Sidebar: React.FC<ISidebarProps> = (props: ISidebarProps) => {
   const isOpenClasses = props.isOpen ? 'left-16' : '-left-64';
   return (
     <div className={`fixed z-10 bg-slate-200
-      text-gray-700 transition-all h-screen w-64
+      text-gray-700 transition-all h-full w-64
       overflow-y-auto ${isOpenClasses}`}>
       <div className='bg-slate-100 sidebar-title'>
           Components