allows UI to resize below 1430px width

Author: petethepig

webapp/javascript/components/DateRangePicker.jsx

@@ -106,7 +106,7 @@ class DateRangePicker extends React.Component {
   render() {
     return <div className={this.state.opened ? "drp-container opened" : "drp-container"}>
       <OutsideClickHandler onOutsideClick={this.hideDropdown}>
-        <button className="drp-button btn" onClick={this.showDropdown}>
+        <button className="btn drp-button" onClick={this.showDropdown}>
           <FontAwesomeIcon icon={faClock} />
           <span>{this.humanReadableRange()}</span>
         </button>

webapp/javascript/components/DownloadButton.jsx

@@ -16,7 +16,7 @@ class RefreshButton extends React.Component {
 
   render() {
     return <div>
-      <button className="drp-button btn" onClick={this.download}>
+      <button className="btn" onClick={this.download}>
         &nbsp;
         <FontAwesomeIcon icon={faDownload} />
         &nbsp;

webapp/javascript/components/Header.jsx

@@ -46,7 +46,7 @@ class Header extends React.Component {
       </div> */}
       {/* <LabelsFilter /> */}
       <div className="navbar-space-filler"></div>
-      <div>
+      <div className="navbar-links">
         <span className="navbar-link"><FontAwesomeIcon icon={faFile} />&nbsp;<a target="_blank" href="https://pyroscope.io/docs">Docs</a></span>
         <span className="navbar-link"><SlackIcon/>&nbsp;<a target="_blank" href="https://pyroscope.io/slack">Slack</a></span>
         <span className="navbar-link"><FontAwesomeIcon icon={faGithub} />&nbsp;<a target="_blank" href="https://github.com/pyroscope-io/pyroscope">GitHub</a></span>
@@ -60,8 +60,6 @@ class Header extends React.Component {
       </div>
       &nbsp;
       <RefreshButton/>
-      {/* &nbsp; */}
-      {/* <ZoomOutButton/> */}
       &nbsp;
       <DateRangePicker />
     </div>

webapp/javascript/components/RefreshButton.jsx

@@ -16,10 +16,8 @@ class RefreshButton extends React.Component {
 
   render() {
     return <div>
-      <button className="drp-button btn" onClick={this.refresh}>
-        &nbsp;
+      <button className="btn refresh-btn" onClick={this.refresh}>
         <FontAwesomeIcon icon={faSyncAlt} />
-        &nbsp;
       </button>
     </div>
   }

webapp/javascript/components/ZoomOutButton.jsx

@@ -18,7 +18,7 @@ class ZoomOutButton extends React.Component {
 
   render() {
     return <div>
-      <button className="drp-button btn" onClick={this.zoomOut}>
+      <button className="btn" onClick={this.zoomOut}>
         &nbsp;
         <FontAwesomeIcon icon={faSearchMinus} />
         &nbsp;

webapp/sass/components/drp.scss renamed to webapp/sass/components/daterangepicker.scss

@@ -1,6 +1,11 @@
 @use "../variables" as *;
 @use "../mixins/outline" as *;
 
+.drp-button {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .drp-container {
   position: relative;

webapp/sass/components/labels.scss

@@ -4,7 +4,7 @@
 
 .labels {
   margin-left: 30px;
-  min-width: 400px;
+  min-width: 350px;
   visibility: none;
 
 
@@ -14,6 +14,10 @@
 
   select {
     margin-right: 10px;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .label {

webapp/sass/profile.scss

@@ -1,6 +1,6 @@
 @use "variables"as *;
 @use "mixins/outline"as *;
-@use "components/drp";
+@use "components/daterangepicker";
 @use "components/labels";
 
 @import '~sanitize.css';
@@ -80,6 +80,11 @@ tt {
 
 .btn {
   @include outline;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   // height: 30px;
   // line-height: 30px;
   border: 1px solid $btn-border-color;
@@ -150,7 +155,26 @@ input {
 }
 
 body {
-  min-width: 1430px;
+  // this is the width of GitHub README page. so we're targeting this width so that it looks good for demo gif
+  min-width: 838px;
+}
+
+// see previous comment about min-width
+@media only screen and (max-width: 1440px) {
+  .navbar-links {
+    display: none;
+  }
+}
+@media only screen and (max-width: 1024px) {
+  .logo::after {
+    content: '';
+  }
+  .labels {
+    margin-left: 5px;
+  }
+  .drp-button {
+    max-width: 375px;
+  }
 }
 
 // .timeline-wrapper {
@@ -257,3 +281,4 @@ html, body, #root, .pyroscope-app {
     display: block;
   }
 }
+