Add text to filters button on small screens

The FilterBar showed a left aligned filter icon on mobile for months and it was driving me insane

components/FilterBar/index.scss

@@ -102,6 +102,23 @@
     }
   }
 
+  .Filter.Button {
+    justify-content: center;
+
+    .Text {
+      display: none;
+      width: auto;
+
+      @include breakpoint(tablet) {
+        display: block;
+      }
+
+      @include breakpoint(phone) {
+        display: block;
+      }
+    }
+  }
+
   .UserInfo {
     align-items: center;
     display: flex;

components/FilterBar/index.tsx

@@ -181,6 +181,7 @@ const FilterBar = (props: Props) => {
             className={filterButtonClasses}
             blended={true}
             leftAccessoryIcon={<FilterIcon />}
+            text={t('filters.name')}
             onClick={() => setFilterModalOpen(true)}
           />
         </div>

public/locales/en/common.json

@@ -93,6 +93,7 @@
     "unauthorized": "You don't have permission to perform that action"
   },
   "filters": {
+    "name": "Filter",
     "labels": {
       "element": "Element",
       "series": "Series",

public/locales/ja/common.json

@@ -93,6 +93,7 @@
     "unauthorized": "行ったアクションを実行する権限がありません"
   },
   "filters": {
+    "name": "フィルター",
     "labels": {
       "element": "属性",
       "series": "シリーズ",