Make results header responsive
MODIFY
lib/project/results-pane.js
lib/project/results-pane.js
@@ -96,7 +96,6 @@ class ResultsPaneView {
style: {visibility: matchCount > 0 ? 'visible' : 'hidden'}
},
- $.div({className: 'btn-toolbar'},
this.searchContextLineCountBefore > 0 ?
$.div({className: 'btn-group'},
$.button(
@@ -153,7 +152,6 @@ class ResultsPaneView {
$.button({ref: 'collapseAll', className: 'btn'}, 'Collapse All'),
$.button({ref: 'expandAll', className: 'btn'}, 'Expand All')
)
- )
),
$.div({className: 'inline-block', style: showIf(this.isLoading)},

MODIFY
styles/find-and-replace.less
styles/find-and-replace.less
@@ -245,16 +245,26 @@ atom-workspace.find-visible {
.preview-header {
display: flex;
- padding: @component-padding/2 @component-padding/2 @component-padding/2 @component-padding;
+ flex-wrap: wrap;
+ padding: @component-padding/2;
align-items: center;
justify-content: space-between;
+ overflow: hidden;
font-weight: normal;
border-bottom: 1px solid @panel-heading-border-color;
background-color: @panel-heading-background-color;
}
+ .preview-count {
+ margin: @component-padding/2;
+ }
+
.preview-controls {
- flex-shrink: 0;
+ display: flex;
+ flex-wrap: wrap;
+ .btn-group {
+ margin: @component-padding/2;
+ }
}
.loading-spinner-tiny,

Make results header responsive