prevent horizontal scrolling in filter editor dialog if rules are very long

8 files changed, 47 insertions, 8 deletions

diff --git a/.gitignore b/.gitignore
index 3796eeb8c..a5cbbad3f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ web.config
 /.save.cson

 /.tags*

 /.gutentags

+/.vscode/settings.json
diff --git a/classes/pref/filters.php b/classes/pref/filters.php
index 1113f251e..00644c59f 100755
--- a/classes/pref/filters.php
+++ b/classes/pref/filters.php
@@ -552,7 +552,7 @@ class Pref_Filters extends Handler_Protected {
 
 		return "<span class='filterRule $inverse'>" .
 			T_sprintf("%s on %s in %s %s", htmlspecialchars($rule["reg_exp"]),
-			$filter_type, $feed, isset($rule["inverse"]) ? __("(inverse)") : "") . "</span>";
+			"<span class='field'>$filter_type</span>", "<span class='feed'>$feed</span>", isset($rule["inverse"]) ? __("(inverse)") : "") . "</span>";
 	}
 
 	function printRuleName() {
diff --git a/themes/compact.css b/themes/compact.css
index add70f1f2..97b55f145 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -1662,8 +1662,14 @@ body.ttrss_utility.share_popup .content {
   position: relative;
   top: -1px;
 }
-.flat #filterDlg_Matches span.filterRule {
+.flat #filterDlg_Matches .filterRule {
   color: green;
+  word-break: break-all;
+}
+.flat #filterDlg_Matches .filterRule .field,
+.flat #filterDlg_Matches .filterRule .feed {
+  word-break: break-word;
+  font-style: italic;
 }
 .flat #filterTree .filterRules li.inverse,
 .flat #filterDlg_Matches span.filterRule.inverse {
diff --git a/themes/compact_night.css b/themes/compact_night.css
index 6ba621955..c2dfea0ad 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -1568,8 +1568,14 @@ body.ttrss_utility fieldset > label.checkbox {
   position: relative;
   top: -1px;
 }
-.flat #filterDlg_Matches span.filterRule {
+.flat #filterDlg_Matches .filterRule {
   color: green;
+  word-break: break-all;
+}
+.flat #filterDlg_Matches .filterRule .field,
+.flat #filterDlg_Matches .filterRule .feed {
+  word-break: break-word;
+  font-style: italic;
 }
 .flat #filterTree .filterRules li.inverse,
 .flat #filterDlg_Matches span.filterRule.inverse {
diff --git a/themes/light.css b/themes/light.css
index 0f911c1f3..054cde48d 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -1662,8 +1662,14 @@ body.ttrss_utility.share_popup .content {
   position: relative;
   top: -1px;
 }
-.flat #filterDlg_Matches span.filterRule {
+.flat #filterDlg_Matches .filterRule {
   color: green;
+  word-break: break-all;
+}
+.flat #filterDlg_Matches .filterRule .field,
+.flat #filterDlg_Matches .filterRule .feed {
+  word-break: break-word;
+  font-style: italic;
 }
 .flat #filterTree .filterRules li.inverse,
 .flat #filterDlg_Matches span.filterRule.inverse {
diff --git a/themes/light/dijit_basic.less b/themes/light/dijit_basic.less
index a00cc5e59..d49d7316d 100644
--- a/themes/light/dijit_basic.less
+++ b/themes/light/dijit_basic.less
@@ -20,8 +20,16 @@
 		top : -1px;
 	}
 
-	#filterDlg_Matches span.filterRule {
-		color: green;
+	#filterDlg_Matches {
+			.filterRule {
+				color: green;
+				word-break : break-all;
+
+				.field, .feed {
+					word-break : break-word;
+					font-style : italic;
+				}
+			}
 	}
 
 	#filterTree .filterRules li.inverse,
diff --git a/themes/night.css b/themes/night.css
index 468af78c7..3891191f2 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -1569,8 +1569,14 @@ body.ttrss_utility fieldset > label.checkbox {
   position: relative;
   top: -1px;
 }
-.flat #filterDlg_Matches span.filterRule {
+.flat #filterDlg_Matches .filterRule {
   color: green;
+  word-break: break-all;
+}
+.flat #filterDlg_Matches .filterRule .field,
+.flat #filterDlg_Matches .filterRule .feed {
+  word-break: break-word;
+  font-style: italic;
 }
 .flat #filterTree .filterRules li.inverse,
 .flat #filterDlg_Matches span.filterRule.inverse {
diff --git a/themes/night_blue.css b/themes/night_blue.css
index 9a3f57850..766a98df6 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -1569,8 +1569,14 @@ body.ttrss_utility fieldset > label.checkbox {
   position: relative;
   top: -1px;
 }
-.flat #filterDlg_Matches span.filterRule {
+.flat #filterDlg_Matches .filterRule {
   color: green;
+  word-break: break-all;
+}
+.flat #filterDlg_Matches .filterRule .field,
+.flat #filterDlg_Matches .filterRule .feed {
+  word-break: break-word;
+  font-style: italic;
 }
 .flat #filterTree .filterRules li.inverse,
 .flat #filterDlg_Matches span.filterRule.inverse {