From 40cb793e814e8168d663bf42dc91fe6816817a72 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 15 Mar 2021 22:25:40 -0700
Subject: [PATCH] fix: fix word filter style on small screens (#2002)

---
 .../dialog/components/WordFilterDialog.html      |  7 +++++++
 .../settings/instance/WordFilterSettings.html    | 16 ++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/routes/_components/dialog/components/WordFilterDialog.html b/src/routes/_components/dialog/components/WordFilterDialog.html
index af135831..a5fcf762 100644
--- a/src/routes/_components/dialog/components/WordFilterDialog.html
+++ b/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>
diff --git a/src/routes/_components/settings/instance/WordFilterSettings.html b/src/routes/_components/settings/instance/WordFilterSettings.html
index 5b13853a..75ff63ab 100644
--- a/src/routes/_components/settings/instance/WordFilterSettings.html
+++ b/src/routes/_components/settings/instance/WordFilterSettings.html
@@ -12,8 +12,8 @@
       <tbody>
         {#each formattedFilters as filter (filter.id)}
           <tr>
-            <td>{filter.phrase}</td>
-            <td>{filter.formattedContexts}</td>
+            <td class="word-filters-break">{filter.phrase}</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'