Small UI fixes (#842)

src/components/Tune/Dialog.tsx

@@ -159,21 +159,6 @@ const Dialog = ({
     </div>;
   }, [tune?.constants]);
 
-  const calculateSpan = (type: PanelTypes, dialogsCount: number) => {
-    let xxl = 24;
-    const xl = 24;
-
-    if (dialogsCount > 1 && type === PanelTypes.FIELDS) {
-      xxl = 12;
-    }
-
-    return {
-      span: 24,
-      xxl,
-      xl,
-    };
-  };
-
   const resolvedDialogs: DialogsAndCurves = {};
 
   const resolveDialogs = (source: DialogsType, dialogName: string) => {
@@ -270,7 +255,7 @@ const Dialog = ({
     }
 
     return (
-      <Col key={panel.name} {...calculateSpan(panel.type as PanelTypes, panels.length)}>
+      <Col key={panel.name} span={24}>
         <Divider>{panel.title}</Divider>
         {(panel.fields).map((field: FieldType) => {
           const constant = findConstantOnPage(field.name);

src/css/App.less

@@ -45,14 +45,14 @@ html, body {
 }
 
 .app-sidebar {
-  height: calc(95vh - @layout-header-height - @layout-footer-height);
+  height: calc(100vh - @layout-header-height - @layout-footer-height);
   position: fixed;
   left: 0;
   user-select: none;
 }
 
 .app-content {
-  height: calc(95vh - @layout-header-height - @layout-footer-height);
+  height: calc(100vh - @layout-header-height - @layout-footer-height);
   overflow: auto;
 }
 
@@ -85,6 +85,16 @@ html, body {
   user-select: none;
 }
 
+.logs-container {
+  width: '100%';
+  text-align: center;
+  margin-top: 5px;
+}
+
+.logs-progress {
+  margin-top: 30px;
+}
+
 .table {
   margin: 20px;
 

src/pages/Diagnose.tsx

@@ -92,7 +92,7 @@ const Diagnose = ({
 
   const calculateCanvasSize = useCallback(() => {
     setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
-    setCanvasHeight(Math.round(window.innerHeight - 200));
+    setCanvasHeight(Math.round(window.innerHeight - 115));
   }, []);
   const siderProps = {
     width: sidebarWidth,
@@ -259,7 +259,7 @@ const Diagnose = ({
           />
         }
       </Sider>
-      <Layout style={{ width: '100%', textAlign: 'center', marginTop: 50 }}>
+      <Layout className="logs-container">
         <Content>
           <div ref={contentRef} style={{ width: '100%', marginRight: margin }}>
             {loadedToothLogs.type
@@ -275,6 +275,7 @@ const Diagnose = ({
                   type="circle"
                   percent={progress}
                   width={170}
+                  className="logs-progress"
                 />
                 <Divider />
                 <Steps current={step} direction={lg ? 'horizontal' : 'vertical'}>

src/pages/Logs.tsx

@@ -114,12 +114,12 @@ const Logs = ({
     setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
 
     if (window.innerHeight > minCanvasHeightInner) {
-      setCanvasHeight(Math.round((window.innerHeight - 280) / 2));
+      setCanvasHeight(Math.round((window.innerHeight - 170) / 2));
       setShowSingleGraph(false);
     } else {
       // not enough space to put 2 graphs
+      setCanvasHeight(Math.round(window.innerHeight - 115));
       setShowSingleGraph(true);
-      setCanvasHeight((minCanvasHeightInner - 140) / 2);
     }
   }, []);
 
@@ -358,7 +358,7 @@ const Logs = ({
           />
         }
       </Sider>
-      <Layout style={{ width: '100%', textAlign: 'center', marginTop: 50 }}>
+      <Layout className="logs-container">
         <Content>
           <div ref={contentRef} style={{ width: '100%', marginRight: margin }}>
             {logs || !!(loadedLogs.logs || []).length
@@ -382,6 +382,7 @@ const Logs = ({
                   percent={progress}
                   status={(fetchError || parseError) && 'exception'}
                   width={170}
+                  className="logs-progress"
                 />
                 <Divider />
                 <Steps current={step} direction={lg ? 'horizontal' : 'vertical'}>