fix: fix word filter style on small screens (#2002)

src/routes/_components/dialog/components/WordFilterDialog.html

@@ -110,6 +110,13 @@
                          "context"
                          "irreversible"
                          "whole";
+    grid-column-gap: 5px;
+    grid-row-gap: 10px;
+  }
+}
+@media (max-width: 320px) {
+  .word-filter-dialog {
+    grid-row-gap: 5px;
   }
 }
 </style>

src/routes/_components/settings/instance/WordFilterSettings.html

@@ -12,8 +12,8 @@
       <tbody>
         {#each formattedFilters as filter (filter.id)}
           <tr>
-            <td>{filter.phrase}</td>
+            <td class="word-filters-break">{filter.phrase}</td>
-            <td>{filter.formattedContexts}</td>
+            <td class="word-filters-break">{filter.formattedContexts}</td>
             <td>
               <IconButton label="{intl.edit}" href="#fa-pencil" on:click="edit(filter)" clickListener={true} />
             </td>
@@ -37,6 +37,18 @@
   p.word-filters-p, .word-filters-table {
     margin: 0 0 10px 0;
   }
+
+  .word-filters-break {
+    word-break: break-word;
+    text-overflow: ellipsis;
+  }
+
+  @media (max-width: 767px) {
+    .word-filters-table {
+      table-layout: fixed;
+    }
+  }
+
 </style>
 <script>
   import GenericInstanceSettingsStyle from './GenericInstanceSettingsStyle.html'