Fix/7812 activity panel styling (#7813)

* Increase specificity of activity panel css to avoid conflicts * Fix linting * Fix some other styles * Add changelog
woocommerce · Oct 22, 2021 · ae3b49f · ae3b49f
1 parent fd80077
commit ae3b49f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/changelogs/fix-7812_activity_panel_styling b/changelogs/fix-7812_activity_panel_styling
@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Increase CSS specificity to avoid conflicts and broken panel styling. #7813
diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss
@@ -1,4 +1,4 @@
-.woocommerce-activity-card {
+.woocommerce-activity-panel .woocommerce-activity-card {
 	position: relative;
 	padding: $fallback-gutter;
 	padding: $gutter;
@@ -209,7 +209,7 @@
 }
 
 // Needs the double-class for specificity
-.woocommerce-activity-card.woocommerce-order-activity-card {
+.woocommerce-activity-panel .woocommerce-activity-card.woocommerce-order-activity-card {
 	grid-template-columns: 1fr;
 	grid-template-areas:
 		'header'
@@ -232,7 +232,7 @@
 }
 
 // Needs the double-class for specificity
-.woocommerce-activity-card.woocommerce-inbox-activity-card {
+.woocommerce-activity-panel .woocommerce-activity-card.woocommerce-inbox-activity-card {
 	grid-template-columns: 72px 1fr;
 	height: 100%;
 	opacity: 1;

diff --git a/client/homescreen/activity-panel/style.scss b/client/homescreen/activity-panel/style.scss
@@ -1,4 +1,4 @@
-.woocommerce-activity-panel {
+.woocommerce-homescreen .woocommerce-activity-panel {
 	background: transparent;
 	border: 0;