From 6044190ab1daa47d7f04466c23b09e651946cd0d Mon Sep 17 00:00:00 2001
From: dannyrb <danny.ri.brown@gmail.com>
Date: Thu, 14 May 2020 22:55:17 -0400
Subject: [PATCH] Fine tune grid spacing

---
 extensions/default/src/ViewerLayout/index.jsx |  12 +-
 .../components/ViewportPane/ViewportPane.jsx  |   2 +-
 platform/ui/src/views/Viewer/Viewer.mdx       | 201 +++++++++---------
 3 files changed, 107 insertions(+), 108 deletions(-)

diff --git a/extensions/default/src/ViewerLayout/index.jsx b/extensions/default/src/ViewerLayout/index.jsx
index e48610f8e..37f03ba51 100644
--- a/extensions/default/src/ViewerLayout/index.jsx
+++ b/extensions/default/src/ViewerLayout/index.jsx
@@ -57,23 +57,23 @@ function ViewerLayout({
         moreTools={primaryToolBarLayout.moreTools}
       />
       <div
-        className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
+        className="flex flex-row flex-no-wrap items-stretch overflow-hidden w-full"
         style={{ height: 'calc(100vh - 57px' }}
       >
+        {/* LEFT SIDEPANELS */}
         <SidePanel
           side="left"
           defaultComponentOpen={leftPanelComponents[0].name}
           childComponents={leftPanelComponents}
         />
-        <div className="flex flex-col flex-1 h-full pb-2">
+        {/* TOOLBAR + GRID */}
+        <div className="flex flex-col flex-1 h-full">
           <div className="flex flex-2 w-100 border-b border-transparent h-12">
             <Toolbar type="secondary" tools={secondaryToolBarLayout.tools} />
           </div>
-          <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
+          <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">
             <ViewportGrid />
-            {/*<ViewportGrid
-              rows={1}
-              cols={2}
+            {/*
               viewportContents={[
                 <Viewport
                   viewportIndex={0}
diff --git a/platform/ui/src/components/ViewportPane/ViewportPane.jsx b/platform/ui/src/components/ViewportPane/ViewportPane.jsx
index 18016db44..99f77b21a 100644
--- a/platform/ui/src/components/ViewportPane/ViewportPane.jsx
+++ b/platform/ui/src/components/ViewportPane/ViewportPane.jsx
@@ -35,7 +35,7 @@ function ViewportPane({ children, className, isActive, onDrop }) {
       className={classnames(
         'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden',
         {
-          'border-2 border-primary-light -m-px': isActive,
+          'border-2 border-primary-light m-0': isActive,
           'border border-secondary-light': !isActive,
         },
         className
diff --git a/platform/ui/src/views/Viewer/Viewer.mdx b/platform/ui/src/views/Viewer/Viewer.mdx
index 2fe84513d..33fd6dc19 100644
--- a/platform/ui/src/views/Viewer/Viewer.mdx
+++ b/platform/ui/src/views/Viewer/Viewer.mdx
@@ -53,113 +53,112 @@ import { tabs } from './studyBrowserMockData';
     };
     return (
       <DragAndDropProvider>
-        <div>
-          <Header />
-          <div
-            className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
-            style={{ height: 'calc(100vh - 57px' }}
-          >
-            <SidePanel
-              side="left"
-              defaultComponentOpen='studies'
-              childComponents={{
-                iconName: 'group-layers',
-                iconLabel: 'Studies',
-                label: 'Studies',
-                name: 'studies',
-                content: (
-                  <StudyBrowser tabs={tabs} />
-                )
-              }}
-            />
-            {/* TOOLBAR + GRID */}
-            <div className="flex flex-col flex-1 h-full pb-2">
-              <div className="flex flex-2 w-100 border-b border-transparent h-12">
-                <ViewportToolbar />
-              </div>
-              {/* VIEWPORT GRID CONTAINER */}
-              <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
-                <ViewportGrid numRows={1} numCols={2}>
-                  {[0, 1].map(viewportIndex => (
-                    <ViewportPane key={viewportIndex} className="m-1" isActive={false} onDrop={() => {}}>
-                      <Viewport
-                        viewportIndex={viewportIndex}
-                        onSeriesChange={(direction) => alert(`Series ${direction}`)}
-                        studyData={{
-                          label: 'A',
-                          isTracked: true,
-                          isLocked: false,
-                          studyDate: '07-Sep-2011',
-                          currentSeries: 1,
-                          seriesDescription:
-                            'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
-                          modality: 'CT',
-                          patientInformation: {
-                            patientName: 'Smith, Jane',
-                            patientSex: 'F',
-                            patientAge: '59',
-                            MRN: '10000001',
-                            thickness: '5.0mm',
-                            spacing: '1.25mm',
-                            scanner: 'Aquilion',
-                          },
-                        }}
-                      >
-                        <div className="flex justify-center items-center h-full">
-                          CONTENT
-                        </div>
-                      </Viewport>
-                    </ViewportPane>)
-                  )}
-                </ViewportGrid>
-              </div>
+        <Header />
+        <div
+          className="flex flex-row flex-no-wrap items-stretch overflow-hidden w-full"
+          style={{ height: 'calc(100vh - 57px' }}
+        >
+          {/* LEFT SIDEPANELS */}
+          <SidePanel
+            side="left"
+            defaultComponentOpen='studies'
+            childComponents={{
+              iconName: 'group-layers',
+              iconLabel: 'Studies',
+              label: 'Studies',
+              name: 'studies',
+              content: (
+                <StudyBrowser tabs={tabs} />
+              )
+            }}
+          />
+          {/* TOOLBAR + GRID */}
+          <div className="flex flex-col flex-1 h-full">
+            <div className="flex flex-2 w-100 border-b border-transparent h-12">
+              <ViewportToolbar />
             </div>
-            <SidePanel
-              side="right"
-              defaultComponentOpen="measurements"
-              childComponents={{
-                iconName: 'list-bullets',
-                iconLabel: 'Measure',
-                label: 'Measurements',
-                name: 'measurements',
-                content: (
-                  <MeasurementsPanel
-                    descriptionData={descriptionData}
-                    measurementTableData={measurementTableData}
-                    actionButtons={
-                      <React.Fragment>
-                        <ButtonGroup onClick={() => alert('Export')}>
-                          <Button
-                            className="text-white border-primary-main bg-black text-base py-2 px-2"
-                            size="initial"
-                            color="inherit"
-                          >
-                            Export
-                          </Button>
-                          <IconButton
-                            className="bg-black border-primary-main px-2 text-white px-2"
-                            color="inherit"
-                            size="initial"
-                          >
-                            <Icon name="arrow-down" />
-                          </IconButton>
-                        </ButtonGroup>
+            {/* VIEWPORT GRID CONTAINER */}
+            <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">
+              <ViewportGrid numRows={1} numCols={2}>
+                {[0, 1].map(viewportIndex => (
+                  <ViewportPane key={viewportIndex} className="m-1" isActive={false} onDrop={() => {}}>
+                    <Viewport
+                      viewportIndex={viewportIndex}
+                      onSeriesChange={(direction) => alert(`Series ${direction}`)}
+                      studyData={{
+                        label: 'A',
+                        isTracked: true,
+                        isLocked: false,
+                        studyDate: '07-Sep-2011',
+                        currentSeries: 1,
+                        seriesDescription:
+                          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+                        modality: 'CT',
+                        patientInformation: {
+                          patientName: 'Smith, Jane',
+                          patientSex: 'F',
+                          patientAge: '59',
+                          MRN: '10000001',
+                          thickness: '5.0mm',
+                          spacing: '1.25mm',
+                          scanner: 'Aquilion',
+                        },
+                      }}
+                    >
+                      <div className="flex justify-center items-center h-full">
+                        CONTENT
+                      </div>
+                    </Viewport>
+                  </ViewportPane>)
+                )}
+              </ViewportGrid>
+            </div>
+          </div>
+          <SidePanel
+            side="right"
+            defaultComponentOpen="measurements"
+            childComponents={{
+              iconName: 'list-bullets',
+              iconLabel: 'Measure',
+              label: 'Measurements',
+              name: 'measurements',
+              content: (
+                <MeasurementsPanel
+                  descriptionData={descriptionData}
+                  measurementTableData={measurementTableData}
+                  actionButtons={
+                    <React.Fragment>
+                      <ButtonGroup onClick={() => alert('Export')}>
                         <Button
-                          className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
-                          variant="outlined"
+                          className="text-white border-primary-main bg-black text-base py-2 px-2"
                           size="initial"
                           color="inherit"
-                          onClick={() => alert('Create Report')}
                         >
-                          Create Report
+                          Export
                         </Button>
-                      </React.Fragment>
-                    }
-                  />
-                )
-              }}
-            />
-          </div>
+                        <IconButton
+                          className="bg-black border-primary-main px-2 text-white px-2"
+                          color="inherit"
+                          size="initial"
+                        >
+                          <Icon name="arrow-down" />
+                        </IconButton>
+                      </ButtonGroup>
+                      <Button
+                        className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
+                        variant="outlined"
+                        size="initial"
+                        color="inherit"
+                        onClick={() => alert('Create Report')}
+                      >
+                        Create Report
+                      </Button>
+                    </React.Fragment>
+                  }
+                />
+              )
+            }}
+          />
         </div>
       </DragAndDropProvider>
     );