From 581dd9551039140b3c6dac8697dc6e92bbf2a6cf Mon Sep 17 00:00:00 2001
From: Piotr Rogowski <piotr.rogowski0@gmail.com>
Date: Fri, 28 Oct 2022 23:00:02 +0200
Subject: [PATCH] Adjust logs width

---
 src/components/TriggerLogs/LogsPagination.tsx | 2 +-
 src/pages/Diagnose.tsx                        | 9 ++-------
 src/pages/Logs.tsx                            | 8 ++------
 3 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/components/TriggerLogs/LogsPagination.tsx b/src/components/TriggerLogs/LogsPagination.tsx
index 696a4c8..f306274 100644
--- a/src/components/TriggerLogs/LogsPagination.tsx
+++ b/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}
diff --git a/src/pages/Diagnose.tsx b/src/pages/Diagnose.tsx
index 2f76621..777080a 100644
--- a/src/pages/Diagnose.tsx
+++ b/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 />
diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx
index 63451fa..621f5bd 100644
--- a/src/pages/Logs.tsx
+++ b/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 />