Refine category select tree gutters and tighten activity charts.

Restore RTL tree lines in category dropdowns, require product category on add, and improve chart bar density with Y-axis tooltips.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/DailyActivityChart.module.css

@@ -106,6 +106,10 @@
   position: relative;
   flex: 1;
   min-width: 0;
+  overflow: hidden;
+}
+
+.chartWrapScroll {
   overflow-x: auto;
 }
 
@@ -130,37 +134,55 @@
   display: flex;
   flex-direction: row;
   align-items: flex-end;
-  gap: 4px;
-  min-width: 100%;
+  width: 100%;
   padding-bottom: 4px;
   direction: ltr;
   unicode-bidi: isolate;
 }
 
+.chartDay {
+  gap: 1px;
+}
+
+.chartMonth {
+  gap: 6px;
+  overflow-x: auto;
+}
+
 .group {
-  flex: 1;
-  min-width: 12px;
+  flex: 1 1 0;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
+}
+
+.chartDay .group {
+  gap: 4px;
 }
 
 .chartMonth .group {
+  flex: 1;
   min-width: 36px;
 }
 
 .bars {
   display: flex;
   align-items: flex-end;
+  justify-content: center;
+  width: 100%;
   height: 180px;
-  gap: 2px;
+  gap: 1px;
 }
 
 .barWrap {
   position: relative;
   display: flex;
+  flex: 1 1 0;
+  min-width: 0;
   align-items: flex-end;
+  justify-content: center;
   height: 100%;
 }
 
@@ -196,12 +218,23 @@
 }
 
 .bar {
-  width: 7px;
-  border-radius: 4px 4px 2px 2px;
+  flex: 1 1 0;
+  width: 100%;
+  max-width: 8px;
+  min-width: 2px;
+  border-radius: 3px 3px 1px 1px;
   transition: height 0.3s ease;
   cursor: default;
 }
 
+.chartMonth .bar {
+  flex: none;
+  width: 10px;
+  max-width: none;
+  min-width: 10px;
+  border-radius: 4px 4px 2px 2px;
+}
+
 .barWrap:hover .bar,
 .barWrap:focus-within .bar {
   filter: brightness(1.06);
@@ -209,6 +242,23 @@
 
 .barMonth {
   width: 10px;
+  max-width: 10px;
+}
+
+.label {
+  font-size: 9px;
+  color: var(--text-muted);
+  font-weight: 500;
+  font-family: var(--font-ui);
+  line-height: 1;
+  text-align: center;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chartMonth .label {
+  font-size: 10px;
 }
 
 .barPrimary {
@@ -227,15 +277,6 @@
   );
 }
 
-.label {
-  font-size: 10px;
-  color: var(--text-muted);
-  font-weight: 500;
-  font-family: var(--font-ui);
-  line-height: 1;
-  text-align: center;
-}
-
 @media (max-width: 768px) {
   .header {
     flex-direction: column;