hide notification filter on mobile

ui/page/notifications/view.jsx

@@ -2,7 +2,6 @@
 import * as ICONS from 'constants/icons';
 import React from 'react';
 import Page from 'component/page';
-import Card from 'component/common/card';
 import Spinner from 'component/spinner';
 import { FormField } from 'component/common/form';
 import Notification from 'component/notification';
@@ -10,7 +9,6 @@ import Button from 'component/button';
 import usePersistedState from 'effects/use-persisted-state';
 import Yrbl from 'component/yrbl';
 import * as NOTIFICATIONS from 'constants/notifications';
-import classnames from 'classnames';
 
 type Props = {
   notifications: Array<Notification>,
@@ -74,11 +72,17 @@ export default function NotificationsPage(props: Props) {
             <h1 className="card__title">{__('Notifications')}</h1>
             <div className="claim-list__alt-controls--wrap">
               {fetching && <Spinner type="small" />}
-              <div className={'claim-search__input-container'}>
+
+              {unreadCount > 0 && (
+                <Button
+                  icon={ICONS.EYE}
+                  onClick={doReadNotifications}
+                  button="secondary"
+                  label={__('Mark all as read')}
+                />
+              )}
               <FormField
-                  className={classnames('claim-search__dropdown', {
-                    'claim-search__dropdown--selected': filterBy,
-                  })}
+                className="notification__filter"
                 type="select"
                 name="filter"
                 value={filterBy || ALL_NOTIFICATIONS}
@@ -98,26 +102,15 @@ export default function NotificationsPage(props: Props) {
                 ))}
               </FormField>
             </div>
-              {unreadCount > 0 && (
-                <Button
-                  icon={ICONS.EYE}
-                  onClick={doReadNotifications}
-                  button="secondary"
-                  label={__('Mark all as read')}
-                />
-              )}
           </div>
-          </div>
-          <Card
-            isBodyList
-            body={
-              <>
           {filteredNotifications && filteredNotifications.length > 0 ? (
+            <div className="card">
               <div className="notification_list">
                 {filteredNotifications.map((notification, index) => {
                   return <Notification key={notification.id} notification={notification} />;
                 })}
               </div>
+            </div>
           ) : (
             <div className="main--empty">
               <Yrbl
@@ -138,9 +131,6 @@ export default function NotificationsPage(props: Props) {
             </div>
           )}
         </>
-            }
-          />
-        </>
       )}
     </Page>
   );

ui/scss/component/_notification.scss

@@ -227,3 +227,11 @@ $contentMaxWidth: 35rem;
     }
   }
 }
+
+.notification__filter {
+  display: none;
+
+  @media (min-width: $breakpoint-small) {
+    display: block;
+  }
+}