fixed: Left navigation with long category names (#4055)

* fixed CSS

* fixed themes Ansum and Mapco

* fixed syntax

8 files changed, 44 insertions, 20 deletions

diff --git a/p/themes/Ansum/_sidebar.scss b/p/themes/Ansum/_sidebar.scss
index 72d179d47..d9a1d032f 100644
--- a/p/themes/Ansum/_sidebar.scss
+++ b/p/themes/Ansum/_sidebar.scss
@@ -264,8 +264,12 @@
 }
 
 /*=== Aside main page (categories) */
+.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
+	width: calc(100% - 35px - 35px);
+}
+
 .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: -0.5rem 1rem 0 0;
+	margin: -0.25rem 1rem 0 0;
 	padding: 0 0.75rem;
 	background: $sid-pills;
 	border-radius: 12px;
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 75c1d8960..8f41f9b78 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -741,8 +741,12 @@ form th {
 }
 
 /*=== Aside main page (categories) */
+.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
+	width: calc(100% - 35px - 35px);
+}
+
 .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: -0.5rem 1rem 0 0;
+	margin: -0.25rem 1rem 0 0;
 	padding: 0 0.75rem;
 	background: rgba(35, 35, 0, 0.15);
 	border-radius: 12px;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index b718a9218..0142968ce 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -741,8 +741,12 @@ form th {
 }
 
 /*=== Aside main page (categories) */
+.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
+	width: calc(100% - 35px - 35px);
+}
+
 .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: -0.5rem 0 0 1rem;
+	margin: -0.25rem 0 0 1rem;
 	padding: 0 0.75rem;
 	background: rgba(35, 35, 0, 0.15);
 	border-radius: 12px;
diff --git a/p/themes/Mapco/_sidebar.scss b/p/themes/Mapco/_sidebar.scss
index eeade7a7a..223deed39 100644
--- a/p/themes/Mapco/_sidebar.scss
+++ b/p/themes/Mapco/_sidebar.scss
@@ -262,8 +262,12 @@
 }
 
 /*=== Aside main page (categories) */
+.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
+	width: calc(100% - 35px - 35px);
+}
+
 .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: -0.5rem 1rem 0 0;
+	margin: -0.25rem 1rem 0 0;
 	padding: 0 0.75rem;
 	background: $sid-pills;
 	border-radius: 12px;
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 3201e2855..8edaf81c4 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -744,8 +744,12 @@ form th {
 }
 
 /*=== Aside main page (categories) */
+.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
+	width: calc(100% - 35px - 35px);
+}
+
 .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: -0.5rem 1rem 0 0;
+	margin: -0.25rem 1rem 0 0;
 	padding: 0 0.75rem;
 	background: rgba(0, 0, 0, 0.25);
 	border-radius: 12px;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 615d425b1..868766236 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -744,8 +744,12 @@ form th {
 }
 
 /*=== Aside main page (categories) */
+.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
+	width: calc(100% - 35px - 35px);
+}
+
 .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: -0.5rem 0 0 1rem;
+	margin: -0.25rem 0 0 1rem;
 	padding: 0 0.75rem;
 	background: rgba(0, 0, 0, 0.25);
 	border-radius: 12px;
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 5238ebbdb..42d023375 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -577,17 +577,13 @@ a.btn {
 	transition: max-height .3s linear;
 }
 
-.tree-folder-title {
-	display: block;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
 .tree-folder-title .title {
 	display: inline-block;
 	width: 100%;
 	vertical-align: middle;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
 .tree-folder-items > .item {
@@ -673,6 +669,10 @@ input[type="search"] {
 	width: calc(100% - 35px);
 }
 
+.aside_feed .category .title:not([data-unread="0"]) {
+	width: calc(100% - 35px - 20px);
+}
+
 .aside_feed .tree-folder-title .icon {
 	padding: 5px;
 }
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 6770a248c..22851985a 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -577,17 +577,13 @@ a.btn {
 	transition: max-height .3s linear;
 }
 
-.tree-folder-title {
-	display: block;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
 .tree-folder-title .title {
 	display: inline-block;
 	width: 100%;
 	vertical-align: middle;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
 .tree-folder-items > .item {
@@ -673,6 +669,10 @@ input[type="search"] {
 	width: calc(100% - 35px);
 }
 
+.aside_feed .category .title:not([data-unread="0"]) {
+	width: calc(100% - 35px - 20px);
+}
+
 .aside_feed .tree-folder-title .icon {
 	padding: 5px;
 }