refactor: improve invoice editor UX and fix visual issues

- Remove clock icons and hour text from calendar month view, show only activity bars
- Fix calendar week view mobile layout (2-column grid instead of vertical stack)
- Update invoice form skeleton to match actual layout structure
- Add client-side validation for empty invoice item descriptions with auto-scroll to error
- Fix hourly rate defaulting logic with proper type guards
- Update invoice details skeleton to match page structure with PageHeader
- Fix hydration error in sidebar (div inside button -> span)
- Improve dashboard chart color consistency (draft status now matches monthly metrics)
- Fix mobile header layout to prevent text squishing (vertical stack on mobile)
- Add IDs to invoice line items for scroll-into-view functionality

src/components/forms/invoice-line-items.tsx

@@ -119,12 +119,14 @@ function SortableLineItem({
       ref={setNodeRef}
       style={style}
       layout
+      // Add ID here for scrolling
+      id={`invoice-item-${index}`}
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
       transition={{ duration: 0.2, ease: "easeOut" }}
       className={cn(
-        "bg-secondary hidden rounded-lg p-4 md:block",
+        "bg-secondary hidden rounded-lg p-4 md:block transition-all",
         isDragging && "opacity-50",
       )}
     >
@@ -249,6 +251,11 @@ function MobileLineItem({
   return (
     <motion.div
       layout
+      // Add ID here for scrolling (mobile uses same ID since only one is shown usually via CSS)
+      // But safer to differentiate or handle duplicates? 
+      // Actually, IDs must be unique. Let's rely on the structure that only one is visible.
+      // Or just duplicate ID knowing it's slightly invalid but functional if one is `display:none`.
+      id={`invoice-item-${index}-mobile`}
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}