Color fix in dashboard (#3439)

Author: anuunchin

dlt/_workspace/helpers/dashboard/dlt_dashboard.py

@@ -86,6 +86,7 @@ def render_workspace_home(
 ) -> List[Any]:
     """Render the workspace-level home view (no pipeline selected)."""
     return [
+        ui.section_marker(strings.app_section_name, has_content=True),
         build_home_header_row(dlt_profile_select, dlt_pipeline_select),
         mo.md(strings.app_title).center(),
         mo.md(strings.app_intro).center(),
@@ -185,7 +186,7 @@ def render_pipeline_home(
         )
         _pipeline_execution_exception = utils.build_exception_section(dlt_pipeline)
 
-    _stack = [ui.section_marker(strings.home_section_name)]
+    _stack = [ui.section_marker(strings.home_section_name, has_content=dlt_pipeline is not None)]
     _stack.extend(
         render_pipeline_header_row(
             dlt_pipeline_name, dlt_profile_select, dlt_pipeline_select, _buttons
@@ -304,7 +305,9 @@ def section_info(
     Overview page of currently selected pipeline
     """
 
-    _result = [ui.section_marker(strings.overview_section_name)]
+    _result = [
+        ui.section_marker(strings.overview_section_name, has_content=dlt_pipeline is not None)
+    ]
     _result.extend(
         ui.build_page_header(
             dlt_pipeline,
@@ -363,7 +366,7 @@ def section_schema(
     Show schema of the currently selected pipeline
     """
 
-    _result = [ui.section_marker(strings.schema_section_name)]
+    _result = [ui.section_marker(strings.schema_section_name, has_content=dlt_pipeline is not None)]
     _result.extend(
         ui.build_page_header(
             dlt_pipeline,
@@ -460,7 +463,9 @@ def section_browse_data_table_list(
     Show data of the currently selected pipeline
     """
 
-    _result = [ui.section_marker(strings.browse_data_section_name)]
+    _result = [
+        ui.section_marker(strings.browse_data_section_name, has_content=dlt_pipeline is not None)
+    ]
     _result.extend(
         ui.build_page_header(
             dlt_pipeline,
@@ -705,7 +710,7 @@ def section_state(
     """
     Show state of the currently selected pipeline
     """
-    _result = [ui.section_marker(strings.state_section_name)]
+    _result = [ui.section_marker(strings.state_section_name, has_content=dlt_pipeline is not None)]
     _result.extend(
         ui.build_page_header(
             dlt_pipeline,
@@ -737,7 +742,7 @@ def section_trace(
     Show last trace of the currently selected pipeline
     """
 
-    _result = [ui.section_marker(strings.trace_section_name)]
+    _result = [ui.section_marker(strings.trace_section_name, has_content=dlt_pipeline is not None)]
     _result.extend(
         ui.build_page_header(
             dlt_pipeline,
@@ -851,7 +856,7 @@ def section_loads(
     Show loads of the currently selected pipeline
     """
 
-    _result = [ui.section_marker(strings.loads_section_name)]
+    _result = [ui.section_marker(strings.loads_section_name, has_content=dlt_pipeline is not None)]
     _result.extend(
         ui.build_page_header(
             dlt_pipeline,
@@ -964,7 +969,9 @@ def section_ibis_backend(
     """
     Connects to ibis backend and makes it available in the datasources panel
     """
-    _result = [ui.section_marker(strings.ibis_backend_section_name)]
+    _result = [
+        ui.section_marker(strings.ibis_backend_section_name, has_content=dlt_pipeline is not None)
+    ]
     _result.extend(
         ui.build_page_header(
             dlt_pipeline,

dlt/_workspace/helpers/dashboard/dlt_dashboard_styles.css

@@ -56,22 +56,25 @@
 
 /* add colors to cells */
 
-/* Default: all sections get purple border and background */
-#App .marimo-cell .output-area {
+/* Default: all sections that have content get purple border and background */
+#App .marimo-cell .output-area:has(.section-marker.has-content) {
   border: 1px dashed var(--dlt-color-purple);
   background-color: var(--dlt-color-purple-background);
 }
 
-/* All cells with section markers get margin-top */
-#App .marimo-cell .output-area:has(.section-marker) {
+
+/* All cells with section markers and have content get margin-top */
+#App .marimo-cell .output-area:has(.section-marker.has-content) {
   margin-top: 0.5rem;
 }
 
-/* Aqua sections - identified by section name in strings.py */
-#App .marimo-cell .output-area:has([data-section="home_section"]),
-#App .marimo-cell .output-area:has([data-section="schema_section"]),
-#App .marimo-cell .output-area:has([data-section="state_section"]),
-#App .marimo-cell .output-area:has([data-section="loads_section"]) {
+
+/* Aqua sections - identified by section name in strings.py and the availability of content */
+#App .marimo-cell .output-area:has([data-section="workspace_home"].has-content),
+#App .marimo-cell .output-area:has([data-section="home_section"].has-content),
+#App .marimo-cell .output-area:has([data-section="schema_section"].has-content),
+#App .marimo-cell .output-area:has([data-section="state_section"].has-content),
+#App .marimo-cell .output-area:has([data-section="loads_section"].has-content) {
   background-color: var(--dlt-color-aqua-background);
   border: 1px dashed var(--dlt-color-aqua);
 }

dlt/_workspace/helpers/dashboard/strings.py

@@ -18,6 +18,7 @@
 #
 # App general
 #
+app_section_name = "workspace_home"
 app_title = """
 # Welcome to the dltHub workspace dashboard...
 """

dlt/_workspace/helpers/dashboard/ui_elements.py

@@ -78,6 +78,18 @@ def build_page_header(
     ]
 
 
-def section_marker(section_name: str) -> mo.Html:
-    """Create an invisible marker element to identify sections for CSS styling."""
-    return mo.Html(f'<div class="section-marker" data-section="{section_name}" hidden"></div>')
+def section_marker(section_name: str, has_content: bool = False) -> mo.Html:
+    """Create an invisible marker element to identify sections for CSS styling.
+
+    Args:
+        section_name: Name identifier for the section (e.g., "home_section", "schema_section")
+        has_content: If True, adds 'has-content' class to enable CSS styling (borders, backgrounds).
+                     Should be True only when the section has actual content and is displayed.
+
+    Returns:
+        Hidden HTML div element with section marker classes for CSS targeting.
+    """
+    content_class = "has-content" if has_content else ""
+    return mo.Html(
+        f'<div class="section-marker {content_class}" data-section="{section_name}" hidden"></div>'
+    )