fix ux

frontend/src/index.css

@@ -209,3 +209,56 @@ body {
 .text-break {
   word-break: break-word;
 }
+
+
+.pv-subnav-shell {
+  min-height: 4rem;
+}
+
+.pv-menu-tab {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 0.55rem;
+  border: 1px solid transparent !important;
+  border-radius: 999px !important;
+  padding: 0.6rem 0.95rem !important;
+  background: rgba(127, 127, 127, 0.08) !important;
+  color: inherit !important;
+  font-weight: 500;
+}
+
+.pv-menu-tab:hover,
+.pv-menu-tab:focus {
+  background: rgba(127, 127, 127, 0.14) !important;
+}
+
+.pv-menu-tab.active {
+  background: rgba(32, 107, 196, 0.14) !important;
+  border-color: rgba(32, 107, 196, 0.22) !important;
+  color: var(--tblr-primary) !important;
+  box-shadow: 0 0 0 1px rgba(32, 107, 196, 0.06) inset;
+}
+
+.pv-menu-tab-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.1rem;
+  min-width: 1.1rem;
+}
+
+.pv-menu-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  color: var(--tblr-secondary);
+  font-size: 0.875rem;
+  white-space: nowrap;
+}
+
+@media (max-width: 992px) {
+  .pv-menu-meta {
+    width: 100%;
+    white-space: normal;
+  }
+}

frontend/src/types.ts

@@ -61,7 +61,7 @@ export interface BucketPoint {
   label: string;
   start: string;
   end: string;
-  value: number;
+  value: number | null;
 }
 
 export interface AnalyticsSummary {