Improve CSS styling of lists in notifications

mozilla · Dec 17, 2024 · 481b825 · 481b825
1 parent 68a74f1
commit 481b825
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/pontoon/base/static/css/style.css b/pontoon/base/static/css/style.css
@@ -778,8 +778,8 @@ header .right .select .menu {
 }
 
 .notifications .menu li.notification-item .description ul {
-  list-style: inside;
-  padding-top: 10px;
+  list-style: disc;
+  padding: 10px 0 10px 20px;
 }
 
 .notifications .menu li.notification-item .message {
@@ -833,15 +833,16 @@ header .right .select .menu {
 }
 
 .notifications .menu li.notification-item .message p {
-  padding: 5px 0;
+  padding: 10px 0;
 }
 
 .notifications .menu li.notification-item .message ol {
-  margin-left: 1.2em;
+  padding-left: 20px;
 }
 
 .notifications .menu li.notification-item .message ul {
-  list-style: inside;
+  list-style: disc;
+  padding: 10px 0 10px 20px;
 }
 
 /* End message styling */

diff --git a/translate/src/modules/user/components/UserNotification.css b/translate/src/modules/user/components/UserNotification.css
@@ -52,9 +52,13 @@
 }
 
 .user-notification .description ul {
-  list-style: inside;
-  margin-left: 0;
-  padding: 12px 0 0 4px;
+  list-style: disc;
+  margin: 0;
+  padding: 10px 0 10px 20px;
+}
+
+.user-notification .description ul li {
+  padding: 2px 4px;
 }
 
 .user-notification .message {
@@ -102,15 +106,21 @@
 }
 
 .user-notification .message p {
-  padding: 5px 0;
+  padding: 10px 0;
 }
 
 .user-notification .message ol {
-  margin-left: 1.2em;
+  margin-left: 20px;
 }
 
 .user-notification .message ul {
-  list-style: inside;
+  list-style: disc;
+  margin: 0;
+  padding: 10px 0 10px 20px;
+}
+
+.user-notification .message ul li {
+  padding: 2px 4px;
 }
 /* End message styling */