fix: inconsistent graphs layout (#754)

* Fix: inconsistent graphs layout

* fix: rename slot ids in perceptor

* fix: forget to change anchor in index

src/pages/ContentScripts/features/perceptor-layout/view.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 
 const View = (): JSX.Element => {
-  return <></>;
+  return (
+    <>
+      <div id="hypercrx-perceptor-slot-repo-activity-racing-bar" />
+      <div id="hypercrx-perceptor-slot-repo-networks" />
+    </>
+  );
 };
 
 export default View;

src/pages/ContentScripts/features/repo-activity-racing-bar/index.tsx

@@ -38,7 +38,7 @@ const init = async (): Promise<void> => {
   const container = document.createElement('div');
   container.id = featureId;
   // append before render so that the container has computed width
-  $('#hypercrx-perceptor-layout').append(container);
+  $('#hypercrx-perceptor-slot-repo-activity-racing-bar').append(container);
   renderTo(container);
 };
 

src/pages/ContentScripts/features/repo-networks/index.tsx

@@ -43,7 +43,7 @@ const init = async (): Promise<void> => {
   const container = document.createElement('div');
   container.id = featureId;
   renderTo(container);
-  $('#hypercrx-perceptor-layout').append(container);
+  $('#hypercrx-perceptor-slot-repo-networks').append(container);
 };
 
 const restore = async () => {