From 98191a8479d01b6e5e3c6355b4e2f80c5fceddcb Mon Sep 17 00:00:00 2001
From: nstriedinger <nathan00@gmail.com>
Date: Fri, 8 May 2020 14:49:03 -0400
Subject: [PATCH 01/17] mess around with layout

---
 src/components/_fs-aside.scss                 |  8 -----
 src/components/_fs-container.scss             | 14 ++++++++
 src/components/_fs-main.scss                  |  8 -----
 .../federated-solr-faceted-search.js          |  6 ++--
 src/styles.css                                | 32 +++++++------------
 src/styles.scss                               |  1 +
 6 files changed, 30 insertions(+), 39 deletions(-)
 create mode 100644 src/components/_fs-container.scss

diff --git a/src/components/_fs-aside.scss b/src/components/_fs-aside.scss
index 504a563..f20a73d 100644
--- a/src/components/_fs-aside.scss
+++ b/src/components/_fs-aside.scss
@@ -6,15 +6,7 @@
  */
 
 .fs-aside {
-  width: 22.85714%;
-  float: left;
-  margin-right: -100%;
-  margin-left: 0;
-  clear: both;
-  margin-bottom: rhythm(1);
   background-color: $c-bg-gray;
-
   @include breakpoint($bp2) {
-    padding-top: rhythm(1);
   }
 }
diff --git a/src/components/_fs-container.scss b/src/components/_fs-container.scss
new file mode 100644
index 0000000..aacbf9d
--- /dev/null
+++ b/src/components/_fs-container.scss
@@ -0,0 +1,14 @@
+/**
+ * container.scss
+ * Define container styles.
+ *
+ * @copyright Copyright (c) 2017-2020 Palantir.net
+ */
+
+.fs-container {
+  @include breakpoint($bp2) {
+    display: grid;
+    grid-column-gap: 1em;
+    grid-template-columns: 33% 66%;
+  }
+}
diff --git a/src/components/_fs-main.scss b/src/components/_fs-main.scss
index d9bd1b1..d9940d8 100644
--- a/src/components/_fs-main.scss
+++ b/src/components/_fs-main.scss
@@ -6,14 +6,6 @@
  */
 
 .fs-main {
-  width: 74.28571%;
-  float: right;
-  margin-left: 0;
-  margin-right: 0;
-  clear: none;
-  margin-bottom: rhythm(1);
-
   @include breakpoint($bp2) {
-    padding-top: rhythm(1);
   }
 }
diff --git a/src/components/federated-solr-faceted-search.js b/src/components/federated-solr-faceted-search.js
index 19810c5..7ddd68a 100644
--- a/src/components/federated-solr-faceted-search.js
+++ b/src/components/federated-solr-faceted-search.js
@@ -100,8 +100,8 @@ class FederatedSolrFacetedSearch extends React.Component {
 
     return (
       <LiveAnnouncer>
-        <div className="fs-container">
-          <aside className="fs-aside">
+        <div className={`fs-container ${this.props.options.layoutAndClasses.containerClass}`} style={{ gridTemplateColumns: this.props.options.layoutAndClasses.layout }}>
+          <aside className={`fs-aside ${this.props.options.layoutAndClasses.asideClass}`}>
             <SearchFieldContainerComponent
               bootstrapCss={bootstrapCss}
               onNewSearch={this.resetFilters}
@@ -137,7 +137,7 @@ class FederatedSolrFacetedSearch extends React.Component {
               }
             </SearchFieldContainerComponent>
           </aside>
-          <div className="fs-main">
+          <div className={`fs-main ${this.props.options.layoutAndClasses.mainClass}`}>
             {pageTitle}
             <div className="fs-search-form" autoComplete="on">
               <FederatedTextSearch
diff --git a/src/styles.css b/src/styles.css
index 6c93237..198096a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -524,6 +524,18 @@
   .fs-search-accordion__title.js-fs-search-accordion-open:after {
     content: "–"; }
 
+/**
+ * container.scss
+ * Define container styles.
+ *
+ * @copyright Copyright (c) 2017-2020 Palantir.net
+ */
+@media (min-width: 900px) {
+  .fs-container {
+    display: grid;
+    grid-column-gap: 1em;
+    grid-template-columns: 33% 66%; } }
+
 /**
  * aside.scss
  * Define aside styles.
@@ -531,16 +543,7 @@
  * @copyright Copyright (c) 2017-2019 Palantir.net
  */
 .fs-aside {
-  width: 22.85714%;
-  float: left;
-  margin-right: -100%;
-  margin-left: 0;
-  clear: both;
-  margin-bottom: 1.46667em;
   background-color: #f6f6f6; }
-  @media (min-width: 900px) {
-    .fs-aside {
-      padding-top: 1.46667em; } }
 
 /**
  * aside.scss
@@ -548,17 +551,6 @@
  *
  * @copyright Copyright (c) 2017-2020 Palantir.net
  */
-.fs-main {
-  width: 74.28571%;
-  float: right;
-  margin-left: 0;
-  margin-right: 0;
-  clear: none;
-  margin-bottom: 1.46667em; }
-  @media (min-width: 900px) {
-    .fs-main {
-      padding-top: 1.46667em; } }
-
 /**
  * fs-search-results.scss
  * Define search results styles.
diff --git a/src/styles.scss b/src/styles.scss
index a7a9ff7..99019be 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -21,6 +21,7 @@
 @import "components/text-search/fs-search-form";
 @import "components/text-search/fs-autocomplete";
 @import "components/fs-search-filters";
+@import "components/fs-container";
 @import "components/fs-aside";
 @import "components/fs-main";
 @import "components/results/fs-search-results";

From 484dd7aac01ee155b5f03b87243ae4765c37198e Mon Sep 17 00:00:00 2001
From: biz123 <sprowl@palantir.net>
Date: Mon, 11 May 2020 06:57:44 -0700
Subject: [PATCH 02/17] adds ability to change column order on mobile and/or
 desktop

---
 src/components/_fs-aside.scss                 | 11 ++++++++++
 src/components/_fs-container.scss             |  2 ++
 .../federated-solr-faceted-search.js          |  2 +-
 src/styles.css                                | 20 ++++++++++++++-----
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/_fs-aside.scss b/src/components/_fs-aside.scss
index f20a73d..4ddfe90 100644
--- a/src/components/_fs-aside.scss
+++ b/src/components/_fs-aside.scss
@@ -10,3 +10,14 @@
   @include breakpoint($bp2) {
   }
 }
+
+.fs-aside__mobile-reverse {
+  order: 2;
+}
+
+// Layout option to move aside to right on desktop
+.fs-aside__desktop-reverse {
+  @include breakpoint($bp2) {
+    order: 6; // Should be higher than all mobile orders.
+  }
+}
diff --git a/src/components/_fs-container.scss b/src/components/_fs-container.scss
index aacbf9d..9274f77 100644
--- a/src/components/_fs-container.scss
+++ b/src/components/_fs-container.scss
@@ -6,6 +6,8 @@
  */
 
 .fs-container {
+  display: flex;
+  flex-direction: column;
   @include breakpoint($bp2) {
     display: grid;
     grid-column-gap: 1em;
diff --git a/src/components/federated-solr-faceted-search.js b/src/components/federated-solr-faceted-search.js
index 7ddd68a..67c099a 100644
--- a/src/components/federated-solr-faceted-search.js
+++ b/src/components/federated-solr-faceted-search.js
@@ -101,7 +101,7 @@ class FederatedSolrFacetedSearch extends React.Component {
     return (
       <LiveAnnouncer>
         <div className={`fs-container ${this.props.options.layoutAndClasses.containerClass}`} style={{ gridTemplateColumns: this.props.options.layoutAndClasses.layout }}>
-          <aside className={`fs-aside ${this.props.options.layoutAndClasses.asideClass}`}>
+          <aside className={`fs-aside ${this.props.options.layoutAndClasses.asideClass} ${this.props.options.layoutAndClasses.reverseDesktopColumns ? "fs-aside__desktop-reverse" : ""} ${this.props.options.layoutAndClasses.reverseMobileOrder ? "fs-aside__mobile-reverse" : ""}`}>
             <SearchFieldContainerComponent
               bootstrapCss={bootstrapCss}
               onNewSearch={this.resetFilters}
diff --git a/src/styles.css b/src/styles.css
index 198096a..b9ff4b7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -530,11 +530,14 @@
  *
  * @copyright Copyright (c) 2017-2020 Palantir.net
  */
-@media (min-width: 900px) {
-  .fs-container {
-    display: grid;
-    grid-column-gap: 1em;
-    grid-template-columns: 33% 66%; } }
+.fs-container {
+  display: flex;
+  flex-direction: column; }
+  @media (min-width: 900px) {
+    .fs-container {
+      display: grid;
+      grid-column-gap: 1em;
+      grid-template-columns: 33% 66%; } }
 
 /**
  * aside.scss
@@ -545,6 +548,13 @@
 .fs-aside {
   background-color: #f6f6f6; }
 
+.fs-aside__mobile-reverse {
+  order: 2; }
+
+@media (min-width: 900px) {
+  .fs-aside__desktop-reverse {
+    order: 6; } }
+
 /**
  * aside.scss
  * Define aside styles.

From 5e54afd17ca233b999b870b8f56bcbb542713956 Mon Sep 17 00:00:00 2001
From: nstriedinger <nathan00@gmail.com>
Date: Tue, 12 May 2020 11:10:34 -0400
Subject: [PATCH 03/17] add onresize

---
 src/components/search-field-container.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/search-field-container.js b/src/components/search-field-container.js
index 5fae763..ac06632 100644
--- a/src/components/search-field-container.js
+++ b/src/components/search-field-container.js
@@ -9,7 +9,7 @@ class FederatedSearchFieldContainer extends React.Component {
     super(props);
 
     // This will return the width of the viewport.
-    const intFrameWidth = window.innerWidth;
+    let intFrameWidth = window.innerWidth;
 
     this.state = {
       // Filters are visible for large / hidden for small screens by default.
@@ -17,6 +17,18 @@ class FederatedSearchFieldContainer extends React.Component {
     };
 
     this.handleClick = this.handleClick.bind(this);
+
+    window.addEventListener('resize', () => {
+      // Desktop height.
+      let height = 'auto';
+      // In mobile view, when resized, lets close things.
+      if (window.innerWidth < 900) {
+        height = 0;
+      }
+      this.setState({
+        expanded: height,
+      });
+    });
   }
 
   handleClick() {

From 8a1d512783744d0e476ce14dc306c77bfb912d7c Mon Sep 17 00:00:00 2001
From: nstriedinger <nathan00@gmail.com>
Date: Thu, 14 May 2020 09:56:41 -0400
Subject: [PATCH 04/17] use our breakpoint

---
 src/components/federated-solr-faceted-search.js | 1 +
 src/components/search-field-container.js        | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/federated-solr-faceted-search.js b/src/components/federated-solr-faceted-search.js
index 67c099a..3c1e483 100644
--- a/src/components/federated-solr-faceted-search.js
+++ b/src/components/federated-solr-faceted-search.js
@@ -106,6 +106,7 @@ class FederatedSolrFacetedSearch extends React.Component {
               bootstrapCss={bootstrapCss}
               onNewSearch={this.resetFilters}
               resultsCount={this.props.results.numFound}
+              options={this.props.options}
             >
               {/* Only render the visible facets / filters.
                   Note: their values may still be used in the query, if they were pre-set. */}
diff --git a/src/components/search-field-container.js b/src/components/search-field-container.js
index ac06632..d165923 100644
--- a/src/components/search-field-container.js
+++ b/src/components/search-field-container.js
@@ -11,9 +11,12 @@ class FederatedSearchFieldContainer extends React.Component {
     // This will return the width of the viewport.
     let intFrameWidth = window.innerWidth;
 
+    // Get our breakpoint option from env.
+    const breakpointDesktop = this.props.options.layoutAndClasses.breakpointDesktop || 900;
+
     this.state = {
       // Filters are visible for large / hidden for small screens by default.
-      expanded: intFrameWidth > 900,
+      expanded: intFrameWidth > breakpointDesktop,
     };
 
     this.handleClick = this.handleClick.bind(this);
@@ -22,7 +25,7 @@ class FederatedSearchFieldContainer extends React.Component {
       // Desktop height.
       let height = 'auto';
       // In mobile view, when resized, lets close things.
-      if (window.innerWidth < 900) {
+      if (window.innerWidth < breakpointDesktop) {
         height = 0;
       }
       this.setState({
@@ -78,6 +81,7 @@ class FederatedSearchFieldContainer extends React.Component {
 FederatedSearchFieldContainer.propTypes = {
   children: PropTypes.array,
   onNewSearch: PropTypes.func,
+  options: PropTypes.object,
 };
 
 export default FederatedSearchFieldContainer;

From 5b455206ec484643a00a434c41833778e21b0825 Mon Sep 17 00:00:00 2001
From: nstriedinger <nathan00@gmail.com>
Date: Thu, 14 May 2020 12:10:20 -0400
Subject: [PATCH 05/17] add some checks

---
 src/components/federated-solr-faceted-search.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/federated-solr-faceted-search.js b/src/components/federated-solr-faceted-search.js
index 3c1e483..ff5a6ee 100644
--- a/src/components/federated-solr-faceted-search.js
+++ b/src/components/federated-solr-faceted-search.js
@@ -98,10 +98,17 @@ class FederatedSolrFacetedSearch extends React.Component {
       pageTitle = <h1>{this.props.options.pageTitle}</h1>;
     }
 
+    // Grab env vars.
+    const containerClass = this.props.options.layoutAndClasses.containerClass || null;
+    const asideClass = this.props.options.layoutAndClasses.asideClass || null;
+    const gridTemplateColumns = this.props.options.layoutAndClasses.layout || null;
+    const reverseDesktopColumns = this.props.options.layoutAndClasses.reverseDesktopColumns ? 'fs-aside__desktop-reverse' : '';
+    const reverseMobileOrder = this.props.options.layoutAndClasses.reverseMobileOrder ? 'fs-aside__mobile-reverse' : '';
+
     return (
       <LiveAnnouncer>
-        <div className={`fs-container ${this.props.options.layoutAndClasses.containerClass}`} style={{ gridTemplateColumns: this.props.options.layoutAndClasses.layout }}>
-          <aside className={`fs-aside ${this.props.options.layoutAndClasses.asideClass} ${this.props.options.layoutAndClasses.reverseDesktopColumns ? "fs-aside__desktop-reverse" : ""} ${this.props.options.layoutAndClasses.reverseMobileOrder ? "fs-aside__mobile-reverse" : ""}`}>
+        <div className={`fs-container ${containerClass}`} style={{ gridTemplateColumns: gridTemplateColumns }}>
+          <aside className={`fs-aside ${asideClass} ${reverseDesktopColumns} ${reverseMobileOrder}`}>
             <SearchFieldContainerComponent
               bootstrapCss={bootstrapCss}
               onNewSearch={this.resetFilters}

From b68284f1429870291c622574905f7b4320bd79f5 Mon Sep 17 00:00:00 2001
From: nstriedinger <nathan00@gmail.com>
Date: Thu, 14 May 2020 14:03:55 -0400
Subject: [PATCH 06/17] check for vars

---
 src/components/federated-solr-faceted-search.js | 15 +++++++++------
 src/components/search-field-container.js        |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/federated-solr-faceted-search.js b/src/components/federated-solr-faceted-search.js
index ff5a6ee..7ecb2df 100644
--- a/src/components/federated-solr-faceted-search.js
+++ b/src/components/federated-solr-faceted-search.js
@@ -99,11 +99,14 @@ class FederatedSolrFacetedSearch extends React.Component {
     }
 
     // Grab env vars.
-    const containerClass = this.props.options.layoutAndClasses.containerClass || null;
-    const asideClass = this.props.options.layoutAndClasses.asideClass || null;
-    const gridTemplateColumns = this.props.options.layoutAndClasses.layout || null;
-    const reverseDesktopColumns = this.props.options.layoutAndClasses.reverseDesktopColumns ? 'fs-aside__desktop-reverse' : '';
-    const reverseMobileOrder = this.props.options.layoutAndClasses.reverseMobileOrder ? 'fs-aside__mobile-reverse' : '';
+    const {
+      containerClass='',
+      asideClass='',
+      mainClass='',
+      gridTemplateColumns='',
+      reverseDesktopColumns='',
+      reverseMobileOrder=''
+    } = this.props.options.layoutAndClasses || {};
 
     return (
       <LiveAnnouncer>
@@ -145,7 +148,7 @@ class FederatedSolrFacetedSearch extends React.Component {
               }
             </SearchFieldContainerComponent>
           </aside>
-          <div className={`fs-main ${this.props.options.layoutAndClasses.mainClass}`}>
+          <div className={`fs-main ${mainClass}`}>
             {pageTitle}
             <div className="fs-search-form" autoComplete="on">
               <FederatedTextSearch
diff --git a/src/components/search-field-container.js b/src/components/search-field-container.js
index d165923..a1b79cf 100644
--- a/src/components/search-field-container.js
+++ b/src/components/search-field-container.js
@@ -12,7 +12,7 @@ class FederatedSearchFieldContainer extends React.Component {
     let intFrameWidth = window.innerWidth;
 
     // Get our breakpoint option from env.
-    const breakpointDesktop = this.props.options.layoutAndClasses.breakpointDesktop || 900;
+    const {breakpointDesktop='900'} = this.props.options.layoutAndClasses || {};
 
     this.state = {
       // Filters are visible for large / hidden for small screens by default.

From a4fb9c86e3ac330a4f477f32fea55fb46c69744b Mon Sep 17 00:00:00 2001
From: nstriedinger <nathan00@gmail.com>
Date: Thu, 14 May 2020 14:08:03 -0400
Subject: [PATCH 07/17] update env example

---
 src/.env.local.js.example | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/.env.local.js.example b/src/.env.local.js.example
index 27ec889..5542479 100644
--- a/src/.env.local.js.example
+++ b/src/.env.local.js.example
@@ -46,6 +46,20 @@ module.exports = {
   pageTitle: null,
   // OPTIONAL: The hostname to emulate when testing.
   hostname: "example.local",
+  layoutAndClasses : {
+    // OPTIONAL: Specify the column widths.
+    gridTemplateColumns: "33% 66%",
+    // OPTIONAL: Add custom classes.
+    containerClass: "custom-container",
+    asideClass: "custom-aside",
+    mainClass: "custom-main",
+    // OPTIONAl: Reverse desktop column order.
+    reverseDesktopColumns: false,
+    // OPTIONAL: Reverse mobile stack order.
+    reverseMobileOrder: false,
+    // Breakpoint for Desktop. Layout will change when wider then the value specifed.
+    breakpointDesktop: 900,
+  },
   // OPTIONAL: Machine name of those search fields whose facets/filter and current values should be hidden in UI.
   // Note: if their values are pre-set (i.e. sent in qs to app), they will still be sent in the query.
   // hiddenSearchFields: [ // Defaults to [];

From e7bbbd3e7278b6f6efd616395257a6642d66a468 Mon Sep 17 00:00:00 2001
From: nstriedinger <nathan00@gmail.com>
Date: Thu, 14 May 2020 14:11:29 -0400
Subject: [PATCH 08/17] code cleanup

---
 src/components/federated-solr-faceted-search.js | 12 ++++++------
 src/components/search-field-container.js        |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/federated-solr-faceted-search.js b/src/components/federated-solr-faceted-search.js
index 7ecb2df..28938c0 100644
--- a/src/components/federated-solr-faceted-search.js
+++ b/src/components/federated-solr-faceted-search.js
@@ -100,12 +100,12 @@ class FederatedSolrFacetedSearch extends React.Component {
 
     // Grab env vars.
     const {
-      containerClass='',
-      asideClass='',
-      mainClass='',
-      gridTemplateColumns='',
-      reverseDesktopColumns='',
-      reverseMobileOrder=''
+      containerClass = '',
+      asideClass = '',
+      mainClass = '',
+      gridTemplateColumns = '',
+      reverseDesktopColumns = '',
+      reverseMobileOrder = '',
     } = this.props.options.layoutAndClasses || {};
 
     return (
diff --git a/src/components/search-field-container.js b/src/components/search-field-container.js
index a1b79cf..46f6496 100644
--- a/src/components/search-field-container.js
+++ b/src/components/search-field-container.js
@@ -12,7 +12,7 @@ class FederatedSearchFieldContainer extends React.Component {
     let intFrameWidth = window.innerWidth;
 
     // Get our breakpoint option from env.
-    const {breakpointDesktop='900'} = this.props.options.layoutAndClasses || {};
+    const { breakpointDesktop = '900' } = this.props.options.layoutAndClasses || {};
 
     this.state = {
       // Filters are visible for large / hidden for small screens by default.

From 19c2a6a311497937e972aca25ff4066d877fa534 Mon Sep 17 00:00:00 2001
From: nstriedinger <nathan00@gmail.com>
Date: Thu, 14 May 2020 14:19:13 -0400
Subject: [PATCH 09/17] fix reverse

---
 src/components/federated-solr-faceted-search.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/federated-solr-faceted-search.js b/src/components/federated-solr-faceted-search.js
index 28938c0..56d7e95 100644
--- a/src/components/federated-solr-faceted-search.js
+++ b/src/components/federated-solr-faceted-search.js
@@ -104,14 +104,14 @@ class FederatedSolrFacetedSearch extends React.Component {
       asideClass = '',
       mainClass = '',
       gridTemplateColumns = '',
-      reverseDesktopColumns = '',
-      reverseMobileOrder = '',
+      reverseDesktopColumns = false,
+      reverseMobileOrder = false,
     } = this.props.options.layoutAndClasses || {};
 
     return (
       <LiveAnnouncer>
         <div className={`fs-container ${containerClass}`} style={{ gridTemplateColumns: gridTemplateColumns }}>
-          <aside className={`fs-aside ${asideClass} ${reverseDesktopColumns} ${reverseMobileOrder}`}>
+          <aside className={`fs-aside ${asideClass} ${reverseDesktopColumns ? 'fs-aside__desktop-reverse' : ''} ${reverseMobileOrder ? 'fs-aside__mobile-reverse' : ''}`}>
             <SearchFieldContainerComponent
               bootstrapCss={bootstrapCss}
               onNewSearch={this.resetFilters}

From 3382e1fa3e474eb067cefef3c62a9dd3731adb9c Mon Sep 17 00:00:00 2001
From: biz123 <sprowl@palantir.net>
Date: Thu, 14 May 2020 15:26:35 -0700
Subject: [PATCH 10/17] match default layout columns to previous

---
 src/components/federated-solr-faceted-search.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/federated-solr-faceted-search.js b/src/components/federated-solr-faceted-search.js
index 56d7e95..0cce182 100644
--- a/src/components/federated-solr-faceted-search.js
+++ b/src/components/federated-solr-faceted-search.js
@@ -103,7 +103,7 @@ class FederatedSolrFacetedSearch extends React.Component {
       containerClass = '',
       asideClass = '',
       mainClass = '',
-      gridTemplateColumns = '',
+      gridTemplateColumns = '22.85714% 74.28571%',
       reverseDesktopColumns = false,
       reverseMobileOrder = false,
     } = this.props.options.layoutAndClasses || {};

From cbf2347be7127f184cdae238e9adf42bc1d1fd29 Mon Sep 17 00:00:00 2001
From: biz123 <sprowl@palantir.net>
Date: Mon, 18 May 2020 07:14:03 -0700
Subject: [PATCH 11/17] restores container styles

---
 src/components/_fs-container.scss | 11 ++++++++++-
 src/styles.css                    | 15 ++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/_fs-container.scss b/src/components/_fs-container.scss
index 9274f77..798f919 100644
--- a/src/components/_fs-container.scss
+++ b/src/components/_fs-container.scss
@@ -8,9 +8,18 @@
 .fs-container {
   display: flex;
   flex-direction: column;
+  width: 100%;
+  min-width: 260px;
+  padding: 0 1.46667em;
+  margin: 0 auto;
   @include breakpoint($bp2) {
     display: grid;
-    grid-column-gap: 1em;
+    grid-column-gap: 5%;
     grid-template-columns: 33% 66%;
+    width: 90%;
+    padding: 0;
+  }
+  @include breakpoint($bp2) {
+    max-width: 1400px;
   }
 }
diff --git a/src/styles.css b/src/styles.css
index b9ff4b7..b7db738 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -532,12 +532,21 @@
  */
 .fs-container {
   display: flex;
-  flex-direction: column; }
+  flex-direction: column;
+  width: 100%;
+  min-width: 260px;
+  padding: 0 1.46667em;
+  margin: 0 auto; }
   @media (min-width: 900px) {
     .fs-container {
       display: grid;
-      grid-column-gap: 1em;
-      grid-template-columns: 33% 66%; } }
+      grid-column-gap: 5%;
+      grid-template-columns: 33% 66%;
+      width: 90%;
+      padding: 0; } }
+  @media (min-width: 900px) {
+    .fs-container {
+      max-width: 1400px; } }
 
 /**
  * aside.scss

From 23a4e26a0917352c6ab6c45b5330812d71f7b01b Mon Sep 17 00:00:00 2001
From: biz123 <sprowl@palantir.net>
Date: Mon, 18 May 2020 07:30:46 -0700
Subject: [PATCH 12/17] border-box fix

---
 src/components/_fs-container.scss | 1 +
 src/styles.css                    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/_fs-container.scss b/src/components/_fs-container.scss
index 798f919..e34d69c 100644
--- a/src/components/_fs-container.scss
+++ b/src/components/_fs-container.scss
@@ -6,6 +6,7 @@
  */
 
 .fs-container {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   width: 100%;
diff --git a/src/styles.css b/src/styles.css
index b7db738..d1b2eb2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -531,6 +531,7 @@
  * @copyright Copyright (c) 2017-2020 Palantir.net
  */
 .fs-container {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   width: 100%;

From 8b4d040531172f27d7834833e1ca0411b5e5d7f8 Mon Sep 17 00:00:00 2001
From: biz123 <sprowl@palantir.net>
Date: Mon, 18 May 2020 15:17:39 -0700
Subject: [PATCH 13/17] uses percentage default for gap to match previous but
 em value when customized

---
 src/components/_fs-container.scss               |  4 ++--
 src/components/_fs-main.scss                    | 13 +++++++++++++
 src/components/federated-solr-faceted-search.js |  4 ++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/_fs-container.scss b/src/components/_fs-container.scss
index e34d69c..d4a35e1 100644
--- a/src/components/_fs-container.scss
+++ b/src/components/_fs-container.scss
@@ -15,8 +15,8 @@
   margin: 0 auto;
   @include breakpoint($bp2) {
     display: grid;
-    grid-column-gap: 5%;
-    grid-template-columns: 33% 66%;
+    grid-column-gap: 0;
+    grid-template-columns: 25% 75%;
     width: 90%;
     padding: 0;
   }
diff --git a/src/components/_fs-main.scss b/src/components/_fs-main.scss
index d9940d8..1f5cdbf 100644
--- a/src/components/_fs-main.scss
+++ b/src/components/_fs-main.scss
@@ -7,5 +7,18 @@
 
 .fs-main {
   @include breakpoint($bp2) {
+    padding-left: 7.5%; //Default to match previous version padding.
+  }
+  &.fs-main__has-custom-columns {
+    @include breakpoint($bp2) {
+      padding-left: 2em;
+    }
+  }
+}
+
+.fs-main__desktop-reverse {
+  @include breakpoint($bp2) {
+    padding-left: 0;
+    padding-right: 2em;
   }
 }
diff --git a/src/components/federated-solr-faceted-search.js b/src/components/federated-solr-faceted-search.js
index 0cce182..c3dd389 100644
--- a/src/components/federated-solr-faceted-search.js
+++ b/src/components/federated-solr-faceted-search.js
@@ -103,7 +103,7 @@ class FederatedSolrFacetedSearch extends React.Component {
       containerClass = '',
       asideClass = '',
       mainClass = '',
-      gridTemplateColumns = '22.85714% 74.28571%',
+      gridTemplateColumns = '',
       reverseDesktopColumns = false,
       reverseMobileOrder = false,
     } = this.props.options.layoutAndClasses || {};
@@ -148,7 +148,7 @@ class FederatedSolrFacetedSearch extends React.Component {
               }
             </SearchFieldContainerComponent>
           </aside>
-          <div className={`fs-main ${mainClass}`}>
+          <div className={`fs-main ${mainClass} ${reverseDesktopColumns ? 'fs-main__desktop-reverse' : ''} ${reverseMobileOrder ? 'fs-main__mobile-reverse' : ''} ${gridTemplateColumns ? 'fs-main__has-custom-columns' : ''}`}>
             {pageTitle}
             <div className="fs-search-form" autoComplete="on">
               <FederatedTextSearch

From 4d6dd5a78ceef4f766023eaacf61a0381942f17f Mon Sep 17 00:00:00 2001
From: biz123 <sprowl@palantir.net>
Date: Mon, 18 May 2020 15:18:09 -0700
Subject: [PATCH 14/17] review of CSS, adding back a few styles that may have
 been accidentally deleted

---
 .../sort-menu/_fs-search-scope.scss           | 64 ++++++++++++++
 .../text-search/_fs-autocomplete.scss         | 11 +++
 .../text-search/_fs-search-form.scss          |  7 ++
 src/styles.css                                | 85 ++++++++++++++++++-
 4 files changed, 165 insertions(+), 2 deletions(-)

diff --git a/src/components/sort-menu/_fs-search-scope.scss b/src/components/sort-menu/_fs-search-scope.scss
index 2ab72fe..d82a16a 100644
--- a/src/components/sort-menu/_fs-search-scope.scss
+++ b/src/components/sort-menu/_fs-search-scope.scss
@@ -10,6 +10,70 @@
   margin: rhythm(1) 0;
 }
 
+.fs-search-scope__filter {
+  width: 48.57143%;
+  clear: right;
+  float: left;
+  margin-left: 0;
+  margin-right: 2.85714%;
+
+  @include breakpoint($bp1) {
+    width: 31.42857%;
+    clear: right;
+    float: left;
+    margin-left: 0;
+    margin-right: 2.85714%;
+  }
+
+  &:nth-of-type(3n+1) {
+    width: 48.57143%;
+    clear: right;
+    float: left;
+    margin-left: 0;
+    margin-right: 2.85714%;
+    clear: both;
+
+    @include breakpoint($bp1) {
+      width: 31.42857%;
+      float: left;
+      margin-right: -100%;
+      margin-left: 0;
+      clear: both;
+    }
+  }
+
+  &:nth-of-type(3n+2) {
+    width: 48.57143%;
+    clear: right;
+    float: right;
+    margin-right: 0;
+
+    @include breakpoint($bp1) {
+      width: 31.42857%;
+      float: left;
+      margin-right: -100%;
+      margin-left: 34.28571%;
+      clear: none;
+    }
+  }
+
+  &:nth-of-type(3n+3) {
+    width: 48.57143%;
+    clear: right;
+    float: left;
+    margin-left: 0;
+    margin-right: 2.85714%;
+    clear: both;
+
+    @include breakpoint($bp1) {
+      width: 31.42857%;
+      float: right;
+      margin-left: 0;
+      margin-right: 0;
+      clear: none;
+    }
+  }
+}
 .fs-search-scope__select {
   @extend %select;
   @include adjust-font-size-to($label, .8);
diff --git a/src/components/text-search/_fs-autocomplete.scss b/src/components/text-search/_fs-autocomplete.scss
index aec24d3..2905633 100644
--- a/src/components/text-search/_fs-autocomplete.scss
+++ b/src/components/text-search/_fs-autocomplete.scss
@@ -8,6 +8,17 @@
 
 .fs-search-form__autocomplete-container {
   display: flex;
+  @include breakpoint($bp1) {
+    width: 75%;
+  }
+
+  @include breakpoint($bp3) {
+    width: 50%;
+  }
+
+  .fs-search-form__input-wrapper {
+    width: 100%;
+  }
 }
 
 /** These classes are outside of Federated Search app namespace. **/
diff --git a/src/components/text-search/_fs-search-form.scss b/src/components/text-search/_fs-search-form.scss
index 7e56312..f76513f 100644
--- a/src/components/text-search/_fs-search-form.scss
+++ b/src/components/text-search/_fs-search-form.scss
@@ -21,6 +21,13 @@
   border-radius: 3px;
   display: flex;
   justify-content: space-between;
+  @include breakpoint($bp1) {
+    width: 75%;
+  }
+
+  @include breakpoint($bp3) {
+    width: 50%;
+  }
 }
 
 .fs-search-form__input {
diff --git a/src/styles.css b/src/styles.css
index d1b2eb2..18c2928 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -208,6 +208,12 @@
   border-radius: 3px;
   display: flex;
   justify-content: space-between; }
+  @media (min-width: 600px) {
+    .fs-search-form__input-wrapper {
+      width: 75%; } }
+  @media (min-width: 1100px) {
+    .fs-search-form__input-wrapper {
+      width: 50%; } }
 
 .fs-search-form__input {
   font-size: 0.8em;
@@ -257,6 +263,14 @@
  */
 .fs-search-form__autocomplete-container {
   display: flex; }
+  @media (min-width: 600px) {
+    .fs-search-form__autocomplete-container {
+      width: 75%; } }
+  @media (min-width: 1100px) {
+    .fs-search-form__autocomplete-container {
+      width: 50%; } }
+  .fs-search-form__autocomplete-container .fs-search-form__input-wrapper {
+    width: 100%; }
 
 /** These classes are outside of Federated Search app namespace. **/
 .react-autosuggest__container {
@@ -541,8 +555,8 @@
   @media (min-width: 900px) {
     .fs-container {
       display: grid;
-      grid-column-gap: 5%;
-      grid-template-columns: 33% 66%;
+      grid-column-gap: 0;
+      grid-template-columns: 25% 75%;
       width: 90%;
       padding: 0; } }
   @media (min-width: 900px) {
@@ -571,6 +585,19 @@
  *
  * @copyright Copyright (c) 2017-2020 Palantir.net
  */
+@media (min-width: 900px) {
+  .fs-main {
+    padding-left: 7.5%; } }
+
+@media (min-width: 900px) {
+  .fs-main.fs-main__has-custom-columns {
+    padding-left: 2em; } }
+
+@media (min-width: 900px) {
+  .fs-main__desktop-reverse {
+    padding-left: 0;
+    padding-right: 2em; } }
+
 /**
  * fs-search-results.scss
  * Define search results styles.
@@ -644,6 +671,60 @@
 .fs-search-scope {
   margin: 1.46667em 0; }
 
+.fs-search-scope__filter {
+  width: 48.57143%;
+  clear: right;
+  float: left;
+  margin-left: 0;
+  margin-right: 2.85714%; }
+  @media (min-width: 600px) {
+    .fs-search-scope__filter {
+      width: 31.42857%;
+      clear: right;
+      float: left;
+      margin-left: 0;
+      margin-right: 2.85714%; } }
+  .fs-search-scope__filter:nth-of-type(3n+1) {
+    width: 48.57143%;
+    clear: right;
+    float: left;
+    margin-left: 0;
+    margin-right: 2.85714%;
+    clear: both; }
+    @media (min-width: 600px) {
+      .fs-search-scope__filter:nth-of-type(3n+1) {
+        width: 31.42857%;
+        float: left;
+        margin-right: -100%;
+        margin-left: 0;
+        clear: both; } }
+  .fs-search-scope__filter:nth-of-type(3n+2) {
+    width: 48.57143%;
+    clear: right;
+    float: right;
+    margin-right: 0; }
+    @media (min-width: 600px) {
+      .fs-search-scope__filter:nth-of-type(3n+2) {
+        width: 31.42857%;
+        float: left;
+        margin-right: -100%;
+        margin-left: 34.28571%;
+        clear: none; } }
+  .fs-search-scope__filter:nth-of-type(3n+3) {
+    width: 48.57143%;
+    clear: right;
+    float: left;
+    margin-left: 0;
+    margin-right: 2.85714%;
+    clear: both; }
+    @media (min-width: 600px) {
+      .fs-search-scope__filter:nth-of-type(3n+3) {
+        width: 31.42857%;
+        float: right;
+        margin-left: 0;
+        margin-right: 0;
+        clear: none; } }
+
 .fs-search-scope__select {
   font-size: 0.8em;
   line-height: 1.46667em;

From a8e976299e1a4166d024de985b0bb921d8c7134a Mon Sep 17 00:00:00 2001
From: biz123 <sprowl@palantir.net>
Date: Thu, 21 May 2020 08:05:37 -0700
Subject: [PATCH 15/17] matches 1.x columns and padding

---
 src/components/_fs-container.scss | 2 +-
 src/components/_fs-main.scss      | 2 +-
 src/styles.css                    | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/_fs-container.scss b/src/components/_fs-container.scss
index d4a35e1..01dcc3a 100644
--- a/src/components/_fs-container.scss
+++ b/src/components/_fs-container.scss
@@ -16,7 +16,7 @@
   @include breakpoint($bp2) {
     display: grid;
     grid-column-gap: 0;
-    grid-template-columns: 25% 75%;
+    grid-template-columns: 22.85714% 74.28571%;
     width: 90%;
     padding: 0;
   }
diff --git a/src/components/_fs-main.scss b/src/components/_fs-main.scss
index 90ea8df..0cce59a 100644
--- a/src/components/_fs-main.scss
+++ b/src/components/_fs-main.scss
@@ -10,7 +10,7 @@
   margin-right: 0;
   margin-bottom: rhythm(1);
   @include breakpoint($bp2) {
-    padding-left: 7.5%; //Default to match previous version padding.
+    padding-left: 3.703713%; //Default to match previous version 1.x padding.
   }
   &.fs-main__has-custom-columns {
     @include breakpoint($bp2) {
diff --git a/src/styles.css b/src/styles.css
index ae1b6cc..c73422e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -556,7 +556,7 @@
     .fs-container {
       display: grid;
       grid-column-gap: 0;
-      grid-template-columns: 25% 75%;
+      grid-template-columns: 22.85714% 74.28571%;
       width: 90%;
       padding: 0; } }
   @media (min-width: 900px) {
@@ -596,7 +596,7 @@
   margin-bottom: 1.46667em; }
   @media (min-width: 900px) {
     .fs-main {
-      padding-left: 7.5%; } }
+      padding-left: 3.703713%; } }
   @media (min-width: 900px) {
     .fs-main.fs-main__has-custom-columns {
       padding-left: 2em; } }

From 127bf45303a2572a334c6ca4b76469fa60002181 Mon Sep 17 00:00:00 2001
From: biz123 <sprowl@palantir.net>
Date: Thu, 21 May 2020 13:24:34 -0700
Subject: [PATCH 16/17] adjust aside to visually match v 1.x

---
 src/components/_fs-aside.scss          |  4 ----
 src/components/_fs-search-filters.scss |  7 +++++++
 src/styles.css                         | 12 +++++++-----
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/_fs-aside.scss b/src/components/_fs-aside.scss
index 4fd379e..2e24127 100644
--- a/src/components/_fs-aside.scss
+++ b/src/components/_fs-aside.scss
@@ -8,10 +8,6 @@
 .fs-aside {
   margin-left: 0;
   margin-bottom: rhythm(1);
-  background-color: $c-bg-gray;
-  @include breakpoint($bp2) {
-    padding-top: rhythm(1);
-  }
 }
 
 .fs-aside__mobile-reverse {
diff --git a/src/components/_fs-search-filters.scss b/src/components/_fs-search-filters.scss
index 0f5ec45..8bf7677 100644
--- a/src/components/_fs-search-filters.scss
+++ b/src/components/_fs-search-filters.scss
@@ -5,6 +5,13 @@
  * @copyright Copyright (c) 2017-2019 Palantir.net
  */
 
+.fs-search-filters {
+  background-color: $c-bg-gray;
+  @include breakpoint($bp2) {
+    padding-top: rhythm(1);
+  }
+}
+
 .fs-search-filters__trigger,
 .fs-search-accordion__title {
   @include adjust-font-size-to($sm-heading, 1);
diff --git a/src/styles.css b/src/styles.css
index c73422e..985cf95 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -377,6 +377,12 @@
  *
  * @copyright Copyright (c) 2017-2019 Palantir.net
  */
+.fs-search-filters {
+  background-color: #f6f6f6; }
+  @media (min-width: 900px) {
+    .fs-search-filters {
+      padding-top: 1.46667em; } }
+
 .fs-search-filters__trigger,
 .fs-search-accordion__title {
   font-size: 1em;
@@ -571,11 +577,7 @@
  */
 .fs-aside {
   margin-left: 0;
-  margin-bottom: 1.46667em;
-  background-color: #f6f6f6; }
-  @media (min-width: 900px) {
-    .fs-aside {
-      padding-top: 1.46667em; } }
+  margin-bottom: 1.46667em; }
 
 .fs-aside__mobile-reverse {
   order: 2; }

From c2fd4485296fb9d2cfb5aa78d1267caedb7d95f5 Mon Sep 17 00:00:00 2001
From: biz123 <sprowl@palantir.net>
Date: Fri, 22 May 2020 06:45:38 -0700
Subject: [PATCH 17/17] margin tweak

---
 src/components/_fs-search-filters.scss | 1 +
 src/styles.css                         | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/_fs-search-filters.scss b/src/components/_fs-search-filters.scss
index 8bf7677..e3b584a 100644
--- a/src/components/_fs-search-filters.scss
+++ b/src/components/_fs-search-filters.scss
@@ -215,6 +215,7 @@
 }
 
 .fs-search-accordion__title {
+  margin: 0;
   @extend %h2;
   border-bottom: solid 1px $gray-light;
   padding-top: rhythm(.75);
diff --git a/src/styles.css b/src/styles.css
index 985cf95..165a7e9 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -527,6 +527,7 @@
   margin: 0 0 0 0.73333em; }
 
 .fs-search-accordion__title {
+  margin: 0;
   border-bottom: solid 1px #e5e5e5;
   padding-top: 1.1em;
   padding-bottom: 1.1em; }