all settings sync

src/plugins/built-in/gradeAnalytics/AnalyticsAreaChart.svelte

@@ -156,7 +156,7 @@
 
 <article class="bsplus-analytics-card">
 
-  <header class="bsplus-analytics-card-header">
+  <header class="bsplus-analytics-card-header bsplus-analytics-card-header-split">
 
     <div>
 
@@ -178,6 +178,12 @@
 
     </div>
 
+    <div class="bsplus-analytics-card-controls" aria-hidden="true">
+
+      <div class="bsplus-analytics-card-control bsplus-analytics-card-control-spacer"></div>
+
+    </div>
+
   </header>
 
 
@@ -346,31 +352,33 @@
 
   <footer class="bsplus-analytics-card-footer">
 
-    {#if trend().direction === "up"}
+    <p>
 
-      <span class="bsplus-analytics-trend-up"
+      {#if trend().direction === "up"}
 
-        >Trending up · {trend().percentage}% vs previous period</span
+        <span class="bsplus-analytics-trend-up"
 
-      >
+          >Trending up · {trend().percentage}% vs previous period</span
 
-    {:else if trend().direction === "down"}
+        >
 
-      <span class="bsplus-analytics-trend-down"
+      {:else if trend().direction === "down"}
 
-        >Trending down · {trend().percentage}% vs previous period</span
+        <span class="bsplus-analytics-trend-down"
 
-      >
+          >Trending down · {trend().percentage}% vs previous period</span
 
-    {:else}
+        >
 
-      <span>Grades remain stable across this period</span>
+      {:else}
 
-    {/if}
+        <span>Grades remain stable across this period</span>
 
-    <br />
+      {/if}
 
-    <span>
+    </p>
+
+    <p>
 
       {filteredData().length} data points · {getTimeRangeLabel(timeRange)}
 
@@ -380,7 +388,7 @@
 
       {/if}
 
-    </span>
+    </p>
 
   </footer>
 

src/plugins/built-in/gradeAnalytics/AnalyticsBarChart.svelte

@@ -356,12 +356,6 @@
 
       </Chart.Container>
 
-      {#if distribution().modeUsed === "letter"}
-
-        <p class="bsplus-analytics-scale-hint">{distribution().scaleLabel}</p>
-
-      {/if}
-
     {:else}
 
       <div class="bsplus-analytics-card-empty">
@@ -380,27 +374,37 @@
 
   <footer class="bsplus-analytics-card-footer">
 
-    {#if distribution().averagePercent !== null}
+    {#if distribution().modeUsed === "letter" && distribution().scaleLabel}
 
-      Average <strong>{distribution().averagePercent}%</strong>
-
-    {:else}
-
-      Average <strong>—</strong>
+      <p class="bsplus-analytics-scale-hint">{distribution().scaleLabel}</p>
 
     {/if}
 
-    across {totalAssessments} assessment{totalAssessments === 1 ? "" : "s"}
+    <p>
 
-    {#if distributionMode === "auto" && distribution().modeUsed === "letter"}
+      {#if distribution().averagePercent !== null}
 
-      <span class="bsplus-analytics-footer-muted"> · letter scale detected</span>
+        Average <strong>{distribution().averagePercent}%</strong>
 
-    {:else if distributionMode !== "auto"}
+      {:else}
 
-      <span class="bsplus-analytics-footer-muted"> · {modeOptionLabel} grouping</span>
+        Average <strong>—</strong>
 
-    {/if}
+      {/if}
+
+      across {totalAssessments} assessment{totalAssessments === 1 ? "" : "s"}
+
+      {#if distributionMode === "auto" && distribution().modeUsed === "letter"}
+
+        <span class="bsplus-analytics-footer-muted"> · letter scale detected</span>
+
+      {:else if distributionMode !== "auto"}
+
+        <span class="bsplus-analytics-footer-muted"> · {modeOptionLabel} grouping</span>
+
+      {/if}
+
+    </p>
 
   </footer>
 

src/plugins/built-in/gradeAnalytics/styles.css

@@ -33,6 +33,7 @@
   --bsplus-analytics-shadow-hover: 0 8px 24px 8px rgba(0, 0, 0, 0.16);
   /* Set on host via ui.ts from --better-main / user selectedColor */
   --bsplus-analytics-accent: var(--better-main, #007bff);
+  --bsplus-analytics-chart-height: 300px;
 
   width: 100%;
   max-width: none;
@@ -342,13 +343,12 @@
   backdrop-filter: var(--bsplus-theme-card-blur, none);
   overflow: visible;
   position: relative;
-  z-index: 40;
-  isolation: isolate;
+  z-index: 3;
 }
 
 .bsplus-analytics-toolbar-dropdown-field {
   position: relative;
-  z-index: 2;
+  z-index: 4;
 }
 
 .bsplus-analytics-field {
@@ -541,7 +541,7 @@
   position: absolute;
   left: 0;
   top: calc(100% + 0.35rem);
-  z-index: 100;
+  z-index: 5;
   min-width: 14rem;
   max-height: 12rem;
   overflow-y: auto;
@@ -601,11 +601,19 @@
   width: 100%;
   position: relative;
   z-index: 1;
+  align-items: stretch;
 }
 
 /* Fade-in animation must not paint above the filter toolbar / dropdown */
-.bsplus-analytics-charts .bsplus-analytics-animate {
+.bsplus-analytics-charts > .bsplus-analytics-animate {
   z-index: 1;
+  display: flex;
+  min-width: 0;
+}
+
+.bsplus-analytics-charts > .bsplus-analytics-animate > .bsplus-analytics-card {
+  flex: 1;
+  width: 100%;
 }
 
 @media (min-width: 960px) {
@@ -613,11 +621,18 @@
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
   }
+
+  .bsplus-analytics-charts .bsplus-analytics-card-header {
+    min-height: 5.75rem;
+    box-sizing: border-box;
+    align-items: flex-end;
+  }
 }
 
 .bsplus-analytics-card {
   display: flex;
   flex-direction: column;
+  height: 100%;
   border-radius: var(
     --bsplus-theme-card-radius,
     var(--bsplus-analytics-radius)
@@ -669,6 +684,12 @@
   min-width: 9.5rem;
 }
 
+.bsplus-analytics-card-control-spacer {
+  visibility: hidden;
+  pointer-events: none;
+  min-height: 2.5rem;
+}
+
 .bsplus-analytics-select-compact {
   min-width: 9.5rem;
   min-height: 2.5rem;
@@ -678,7 +699,7 @@
 }
 
 .bsplus-analytics-scale-hint {
-  margin: 0.65rem 0 0;
+  margin: 0;
   font-size: 0.75rem;
   line-height: 1.4;
   color: var(--bsplus-analytics-muted);
@@ -705,15 +726,35 @@
 .bsplus-analytics-card-body {
   padding: 1rem 1.15rem;
   flex: 1;
+  display: flex;
+  flex-direction: column;
   background: var(--bsplus-analytics-surface);
 }
 
+.bsplus-analytics-charts .bsplus-analytics-card-body {
+  justify-content: center;
+}
+
 .bsplus-analytics-card-footer {
   padding: 0.85rem 1.25rem 1.1rem;
   border-top: 1px solid var(--bsplus-analytics-border);
   font-size: 0.8125rem;
   color: var(--bsplus-analytics-muted);
   line-height: 1.5;
+  margin-top: auto;
+}
+
+.bsplus-analytics-charts .bsplus-analytics-card-footer {
+  min-height: 4.25rem;
+  box-sizing: border-box;
+}
+
+.bsplus-analytics-card-footer p {
+  margin: 0;
+}
+
+.bsplus-analytics-card-footer p + p {
+  margin-top: 0.35rem;
 }
 
 .bsplus-analytics-card-empty {
@@ -721,10 +762,12 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: 220px;
+  min-height: var(--bsplus-analytics-chart-height, 300px);
+  height: var(--bsplus-analytics-chart-height, 300px);
   text-align: center;
   gap: 0.35rem;
   color: var(--bsplus-analytics-muted);
+  flex-shrink: 0;
 }
 
 .bsplus-analytics-card-empty strong {
@@ -741,16 +784,12 @@
   color: var(--bsplus-analytics-muted);
 }
 
-.bsplus-analytics-root .bsplus-chart-surface {
-  height: 280px;
-  min-height: 280px;
-  max-height: 280px;
-}
-
+.bsplus-analytics-root .bsplus-chart-surface,
 .bsplus-analytics-root .bsplus-chart-surface-bar {
-  height: 320px;
-  min-height: 320px;
-  max-height: 320px;
+  height: var(--bsplus-analytics-chart-height);
+  min-height: var(--bsplus-analytics-chart-height);
+  max-height: var(--bsplus-analytics-chart-height);
+  flex-shrink: 0;
 }
 
 /* Bar chart: show axis spines and tick marks (area chart hides these) */

src/plugins/built-in/gradeAnalytics/ui.ts

@@ -23,6 +23,25 @@ let darkModeObserver: MutationObserver | null = null;
 let themeStyleObserver: MutationObserver | null = null;
 let themeListeners: ThemeListenerRegistration[] = [];
 
+const ANALYTICS_STACKING_STYLE_ID = "bsplus-analytics-stacking-styles";
+
+/** Light-DOM stacking scope so toolbar/dropdown z-index cannot paint over ExtensionPopup. */
+function ensureAnalyticsStackingScope() {
+  if (document.getElementById(ANALYTICS_STACKING_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = ANALYTICS_STACKING_STYLE_ID;
+  style.textContent = `
+    #analytics-view-container,
+    .bsplus-analytics-container,
+    .bsplus-analytics-host {
+      position: relative;
+      z-index: 0;
+      isolation: isolate;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
 const THEME_CSS_VARS = [
   "--better-main",
   "--better-pale",
@@ -161,6 +180,8 @@ function teardown() {
 export function renderAnalyticsPage(container: HTMLElement) {
   teardown();
 
+  ensureAnalyticsStackingScope();
+
   container.innerHTML = "";
   container.className = "bsplus-analytics-container";