Add month sowing chips and update filters for responsive design

app/javascript/components/SeedLibrary.jsx

@@ -181,7 +181,7 @@ export default function SeedLibrary({scope: initialScope, tabs: initialTabs, htm
             <Choice params={clear} search={pendingSearch} className="seed-clear" onChoose={show}>Clear all filters</Choice>
           )}
         </div>
-        <div className="seed-filter-row">
+        <div className="seed-filter-row d-lg-none">
           <div className="seed-field">
             <label className="seed-field-label" htmlFor="seed-month">Month to sow</label>
             <select
@@ -221,8 +221,8 @@ export default function SeedLibrary({scope: initialScope, tabs: initialTabs, htm
             </div>
           </div>
         )}
-        {filters.map(({label, chips}) => (
-          <div className="seed-filter-row" key={label}>
+        {filters.map(({label, chips, wide_only: wideOnly}) => (
+          <div className={`seed-filter-row${wideOnly ? ' d-none d-lg-flex' : ''}`} key={label}>
             <div className="seed-field">
               <span className="seed-field-label">{label}</span>
               <ul className="seed-chips">{chips.map(chip)}</ul>

app/javascript/components/SeedLibrary.test.jsx

@@ -24,6 +24,11 @@ const props = {
       ],
     },
     {label: 'Planted', chips: [{label: 'Not planted yet', params: {planted: 'no'}}]},
+    {
+      label: 'Month to sow',
+      wide_only: true,
+      chips: [{label: 'Any month', params: {sow_month: null}}, {label: 'September', params: {sow_month: 9}}],
+    },
   ],
   months: [[1, 'January'], [9, 'September']],
   sow_now: 'Sow now (November)',
@@ -232,6 +237,21 @@ describe('SeedLibrary', () => {
       expect(screen.queryByLabelText('Gardener')).not.toBeInTheDocument();
     });
 
+    it('offers every month as a chip for a wide screen', () => {
+      setup();
+      expect(screen.getByRole('link', {name: 'September'})).toHaveAttribute('href', '/seeds?sow_month=9');
+    });
+
+    it('shows the month chips on wide screens only', () => {
+      setup();
+      expect(screen.getByRole('link', {name: 'September'}).closest('.seed-filter-row')).toHaveClass('d-none', 'd-lg-flex');
+    });
+
+    it('shows the month select on narrow screens only', () => {
+      setup();
+      expect(screen.getByLabelText('Month to sow').closest('.seed-filter-row')).toHaveClass('d-lg-none');
+    });
+
     it('keeps the filters in force when another is chosen', () => {
       window.history.replaceState({}, '', '/seeds?from=bought&group=year');
       setup();