Refactor CSS for velt-thread-card container to improve layout by adjusting selector specificity. Ensure proper display and alignment of child components for enhanced user experience.

mayank-velt · mayank-velt · commit d1f8a079b831 · 2026-02-04T11:22:25.000+05:30
diff --git a/apps/react/self-hosting/forms/page-mode-demo/components/velt/ui-customization/styles.css b/apps/react/self-hosting/forms/page-mode-demo/components/velt/ui-customization/styles.css
@@ -1794,10 +1794,8 @@ app-attachment-button {
     }
 }
 
-.velt-thread-card--container {
-    app-if {
-        display: flex;
-        flex-direction: column;
-        width: 100% !important;
-    }
+.velt-thread-card--container > app-if {
+    display: flex;
+    flex-direction: column;
+    width: 100% !important;
 }

Original file line number	Diff line number	Diff line change
`@@ -1794,10 +1794,8 @@ app-attachment-button {`
`1794`	`1794`	`}`
`1795`	`1795`	`}`
`1796`	`1796`
`1797`		`-.velt-thread-card--container {`
`1798`		`- app-if {`
`1799`		`- display: flex;`
`1800`		`- flex-direction: column;`
`1801`		`- width: 100% !important;`
`1802`		`- }`
	`1797`	`+.velt-thread-card--container > app-if {`
	`1798`	`+ display: flex;`
	`1799`	`+ flex-direction: column;`
	`1800`	`+ width: 100% !important;`
`1803`	`1801`	`}`