[desk-tool] Tweak document pane layout

sanity-io · Oct 6, 2020 · 9155e22 · 9155e22
1 parent 55a7c67
commit 9155e22
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 29 deletions.
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.css b/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.css
@@ -29,6 +29,15 @@
   padding: var(--small-padding);
 }
 
+.changesSinceSelectContainer {
+  flex: 1;
+  min-width: 0;
+
+  @nest & > div {
+    display: inline-block;
+  }
+}
+
 .versionSelectContainer {
   padding: var(--extra-small-padding) var(--small-padding);
   padding-right: calc(var(--medium-padding) - var(--extra-small-padding) + 1px);
@@ -41,11 +50,6 @@
   }
 }
 
-.changesSinceSelectContainer {
-  flex: 1;
-  min-width: 0;
-}
-
 .changeAuthorsContainer {
   margin-left: auto;
 }

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.tsx
@@ -88,25 +88,27 @@ export function ChangesPanel({
         </div>
 
         <div className={styles.versionSelectContainer}>
-          <div className={styles.changesSinceSelectContainer} ref={changesSinceSelectRef}>
-            <Button
-              kind="simple"
-              onMouseUp={ignoreClickOutside}
-              onClick={onTimelineOpen}
-              padding="small"
-              selected={isTimelineOpen && timelineMode === 'since'}
-              size="small"
-            >
-              {/* eslint-disable-next-line no-nested-ternary */}
-              {menuOpen ? (
-                <>Review changes since</>
-              ) : since ? (
-                <SinceText since={since} />
-              ) : (
-                <>Since unknown version</>
-              )}{' '}
-              &darr;
-            </Button>
+          <div className={styles.changesSinceSelectContainer}>
+            <div ref={changesSinceSelectRef}>
+              <Button
+                kind="simple"
+                onMouseUp={ignoreClickOutside}
+                onClick={onTimelineOpen}
+                padding="small"
+                selected={isTimelineOpen && timelineMode === 'since'}
+                size="small"
+              >
+                {/* eslint-disable-next-line no-nested-ternary */}
+                {menuOpen ? (
+                  <>Review changes since</>
+                ) : since ? (
+                  <SinceText since={since} />
+                ) : (
+                  <>Since unknown version</>
+                )}{' '}
+                &darr;
+              </Button>
+            </div>
           </div>
 
           {changeAnnotations.length > 0 && (

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPane.css b/packages/@sanity/desk-tool/src/panes/documentPane/documentPane.css
@@ -72,12 +72,13 @@
 
 .documentContainer {
   flex: 3;
-  min-width: 0;
+  min-width: 334px;
   position: relative;
 }
 
 .changesContainer {
   flex: 2;
-  min-width: 0;
-  border-left: 1px solid var(--hairline-color);
+  min-width: 334px;
+  max-width: 480px;
+  border-left: 1px dashed var(--hairline-color);
 }
diff --git a/packages/@sanity/desk-tool/src/tool/DeskToolPanes.js b/packages/@sanity/desk-tool/src/tool/DeskToolPanes.js
@@ -23,11 +23,11 @@ import styles from './DeskToolPanes.css'
 const COLLAPSED_WIDTH = 49
 
 function getPaneMinSize(pane) {
-  return pane.type === 'document' ? 500 : 320
+  return pane.type === 'document' ? 668 : 320
 }
 
 function getPaneDefaultSize(pane) {
-  return pane.type === 'document' ? 672 : 350
+  return pane.type === 'document' ? 668 : 350
 }
 
 function getWaitMessages(path) {