Flex Box

src/vs/editor/contrib/find/browser/findWidget.css

@@ -93,6 +93,10 @@
 	height: 25px;
 }
 
+.monaco-editor .find-widget > .find-part .monaco-inputbox > .wrapper > .input {
+	width: 100% !important;
+	padding-right: 66px;
+}
 .monaco-editor .find-widget > .find-part .monaco-inputbox > .wrapper > .input,
 .monaco-editor .find-widget > .replace-part .monaco-inputbox > .wrapper > .input {
 	padding-top: 2px;
@@ -106,7 +110,9 @@
 }
 
 .monaco-editor .find-widget .matchesCount {
-	display: inline-block;
+	display: flex;
+	display: -webkit-flex;
+	flex: initial;
 	margin: 0 1px 0 3px;
 	padding: 2px 2px 0 2px;
 	height: 25px;
@@ -120,8 +126,9 @@
 	min-width: 20px;
 	width: 20px;
 	height: 20px;
-	display: inline-block;
-	vertical-align: middle;
+	display: flex;
+	display: -webkit-flex;
+	flex: initial;
 	margin-left: 3px;
 	background-position: center center;
 	background-repeat: no-repeat;
@@ -250,10 +257,10 @@
 }
 
 /* NARROW (SMALLER THAN REDUCED) */
-.monaco-editor .find-widget.narrow-find-widget > .find-part,
+/*.monaco-editor .find-widget.narrow-find-widget > .find-part,
 .monaco-editor .find-widget.narrow-find-widget > .replace-part {
 	width: 240px !important;
-}
+}*/
 
 /* COLLAPSED (SMALLER THAN NARROW) */
 .monaco-editor .find-widget.collapsed-find-widget .button.previous,
@@ -263,7 +270,11 @@
 .monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-findInput .controls {
 	display:none;
 }
-.monaco-editor .find-widget.collapsed-find-widget > .find-part,
+
+.monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-inputbox > .wrapper > .input {
+	padding-right: 0px;
+}
+/*.monaco-editor .find-widget.collapsed-find-widget > .find-part,
 .monaco-editor .find-widget.collapsed-find-widget > .replace-part {
 	max-width: 94px !important;
 }
@@ -271,7 +282,7 @@
 .monaco-editor .find-widget.collapsed-find-widget > .replace-part .replace-input,
 .monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-inputbox > .wrapper > .input {
 	max-width: 71px !important;
-}
+}*/
 
 .monaco-editor .findMatch {
 	-webkit-animation-duration: 0;
@@ -286,7 +297,7 @@
 
 .monaco-editor .find-widget .monaco-sash {
 	background: grey;
-    margin-left: -4px;
+	margin-left: -4px;
 }
 
 .monaco-editor.hc-black .find-widget .previous,

src/vs/editor/contrib/find/browser/findWidget.ts

@@ -50,7 +50,6 @@ const NLS_MATCHES_LOCATION = nls.localize('label.matchesLocation', "{0} of {1}")
 const NLS_NO_RESULTS = nls.localize('label.noResults', "No Results");
 
 let MAX_MATCHES_COUNT_WIDTH = 69;
-const WIDGET_FIXED_WIDTH = 411 - 69;
 
 export class FindWidgetViewZone implements IViewZone {
 
@@ -131,7 +130,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
 		this._register(this._state.addChangeListener((e) => this._onStateChanged(e)));
 
 		this._buildDomNode();
-		this._resizeSash = new Sash(this._domNode, this, { orientation: 0});
+		this._resizeSash = new Sash(this._domNode, this, { orientation: 0 });
 		let data: { startX: number; };
 		let originalWidth = 411;
 		this._register(this._resizeSash.addListener('start', (e: ISashEvent) => {
@@ -147,8 +146,24 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
 
 		this._register(this._resizeSash.addListener('change', (evt: ISashEvent) => {
 			if (data) {
-				this._domNode.style.width = `${originalWidth + data.startX - evt.currentX}px`;
-				this._findInput.setWidth(FindWidget.FIND_INPUT_AREA_WIDTH + Math.max(0, data.startX - evt.currentX));
+				let reducedFindWidget = false;
+				let narrowFindWidget = false;
+				let collapsedFindWidget = false;
+				let width = originalWidth + data.startX - evt.currentX;
+				if (width < 411) {
+					reducedFindWidget = true;
+			}
+				if (width < 411 - 69) {
+					narrowFindWidget = true;
+				}
+				if (width < 265) {
+					collapsedFindWidget = true;
+				}
+				dom.toggleClass(this._domNode, 'collapsed-find-widget', collapsedFindWidget);
+				dom.toggleClass(this._domNode, 'narrow-find-widget', narrowFindWidget);
+				dom.toggleClass(this._domNode, 'reduced-find-widget', reducedFindWidget);
+				this._domNode.style.width = `${width}px`;
+				// this._findInput.setWidth(FindWidget.FIND_INPUT_AREA_WIDTH + Math.max(0, data.startX - evt.currentX));
 			}
 		}));
 		this._updateButtons();
@@ -170,8 +185,8 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
 				reducedFindWidget = true;
 			}
 			dom.toggleClass(this._domNode, 'collapsed-find-widget', collapsedFindWidget);
-			dom.toggleClass(this._domNode, 'reduced-find-widget', reducedFindWidget);
 			dom.toggleClass(this._domNode, 'narrow-find-widget', narrowFindWidget);
+			dom.toggleClass(this._domNode, 'reduced-find-widget', reducedFindWidget);
 			if (collapsedFindWidget) {
 				this._domNode.style.maxWidth = '111px';
 			} else if (narrowFindWidget) {