Make drag up work again

ui/src/shared/components/ResizeContainer.tsx

@@ -130,7 +130,6 @@ class Resizer extends Component<Props, State> {
             minPixels={d.minPixels}
             orientation={orientation}
             activeHandleID={activeHandleID}
-            minPercent={this.minPercentY}
             onHandleStartDrag={this.handleStartDrag}
             maxPercent={this.maximumHeightPercent}
             render={this.props.divisions[i].render}
@@ -277,15 +276,29 @@ class Resizer extends Component<Props, State> {
   }
 
   private up = activePosition => () => {
-    const divisions = this.state.divisions.map((d, i) => {
-      const before = i === activePosition - 1
+    const divisions = this.state.divisions.map((d, i, divs) => {
+      const before = i < activePosition
       const current = i === activePosition
+      const after = i === activePosition + 1
+
+      if (before) {
+        const below = divs[i + 1]
+        const belowAtMinimum = below.size <= this.minPercentY(below.minPixels)
+
+        const aboveCurrent = i === activePosition - 1
+
+        if (belowAtMinimum || aboveCurrent) {
+          const size = d.size - this.percentChangeY
+          return {...d, size}
+        }
+      }
 
       if (current) {
         return {...d, size: d.size + this.percentChangeY}
-      } else if (before) {
-        const size = d.size - this.percentChangeY
-        return {...d, size}
+      }
+
+      if (after) {
+        return {...d}
       }
 
       return {...d}
@@ -325,7 +338,7 @@ class Resizer extends Component<Props, State> {
       return {...d}
     })
 
-    this.setState({divisions: this.enforceHundredTotal(divisions)})
+    this.setState({divisions})
   }
 
   private left = activePosition => () => {

ui/src/shared/components/ResizeDivision.tsx

@@ -22,7 +22,6 @@ interface Props {
   orientation: string
   render: () => ReactElement<any>
   onHandleStartDrag: OnHandleStartDrag
-  minPercent: (pixels: number) => number
   maxPercent: number
 }
 
@@ -69,24 +68,17 @@ class Division extends PureComponent<Props> {
     return this.props.onHandleStartDrag
   }
 
-  private get minPercent(): number {
-    const {minPercent, minPixels} = this.props
-
-    return minPercent(minPixels)
-  }
-
   private get style() {
-    const {orientation, size, maxPercent} = this.props
+    const {orientation, size, maxPercent, minPixels} = this.props
 
     const sizePercent = `${size * HUNDRED}%`
-    const min = `${this.minPercent * HUNDRED}%`
     const max = `${maxPercent * HUNDRED}%`
 
     if (orientation === HANDLE_VERTICAL) {
       return {
         top: '0',
         width: sizePercent,
-        minWidth: min,
+        minWidth: minPixels,
         maxWidth: max,
       }
     }
@@ -94,7 +86,7 @@ class Division extends PureComponent<Props> {
     return {
       left: '0',
       height: sizePercent,
-      minHeight: min,
+      minHeight: minPixels,
       maxHeight: max,
     }
   }