Adjust logs width

src/components/TriggerLogs/LogsPagination.tsx

@@ -24,7 +24,7 @@ const LogsPagination = (props: LogsPaginationProps) => {
 
   return (
     <div style={{ position: 'relative' }}>
-      <div style={{ position: 'absolute', bottom: 3, right: 40, zIndex: 1 }}>
+      <div style={{ position: 'absolute', bottom: 3, right: 5, zIndex: 1 }}>
         <Pagination
           simple
           defaultPageSize={pageSize}

src/pages/Diagnose.tsx

@@ -53,10 +53,7 @@ const { Content } = Layout;
 const { Step } = Steps;
 
 const edgeUnknown = 'Unknown';
-
 const badgeStyle = { backgroundColor: Colors.TEXT };
-
-const margin = 30;
 const sidebarWidth = 250;
 
 const mapStateToProps = (state: AppState) => ({
@@ -91,7 +88,7 @@ const Diagnose = ({
   const navigate = useNavigate();
 
   const calculateCanvasSize = useCallback(() => {
-    setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
+    setCanvasWidth(contentRef.current?.clientWidth || 0);
     setCanvasHeight(Math.round(window.innerHeight - 115));
   }, []);
   const siderProps = {
@@ -261,7 +258,7 @@ const Diagnose = ({
       </Sider>
       <Layout className="logs-container">
         <Content>
-          <div ref={contentRef} style={{ width: '100%', marginRight: margin }}>
+          <div ref={contentRef}>
             {loadedToothLogs.type
               ?
               graphSection()
@@ -269,12 +266,10 @@ const Diagnose = ({
               <Space
                 direction="vertical"
                 size="large"
-                style={{ width: '80%', maxWidth: 1000 }}
               >
                 <Progress
                   type="circle"
                   percent={progress}
-                  width={170}
                   className="logs-progress"
                 />
                 <Divider />

src/pages/Logs.tsx

@@ -68,10 +68,8 @@ import { WorkerOutput } from '../workers/logParserWorker';
 const { Content } = Layout;
 const { Step } = Steps;
 const edgeUnknown = 'Unknown';
-const margin = 30;
 const sidebarWidth = 250;
 const minCanvasHeightInner = 500;
-
 const badgeStyle = { backgroundColor: Colors.TEXT };
 
 const mapStateToProps = (state: AppState) => ({
@@ -111,7 +109,7 @@ const Logs = ({
   const navigate = useNavigate();
 
   const calculateCanvasSize = useCallback(() => {
-    setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
+    setCanvasWidth(contentRef.current?.clientWidth || 0);
 
     if (window.innerHeight > minCanvasHeightInner) {
       setCanvasHeight(Math.round((window.innerHeight - 170) / 2));
@@ -359,7 +357,7 @@ const Logs = ({
       </Sider>
       <Layout className="logs-container">
         <Content>
-          <div ref={contentRef} style={{ width: '100%', marginRight: margin }}>
+          <div ref={contentRef}>
             {logs || !!(loadedLogs.logs || []).length
               ?
               <LogCanvas
@@ -374,13 +372,11 @@ const Logs = ({
               <Space
                 direction="vertical"
                 size="large"
-                style={{ width: '80%', maxWidth: 1000 }}
               >
                 <Progress
                   type="circle"
                   percent={progress}
                   status={(fetchError || parseError) && 'exception'}
-                  width={170}
                   className="logs-progress"
                 />
                 <Divider />