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/layout/floating-action-bar.tsx

@@ -13,12 +13,15 @@ interface FloatingActionBarProps {
   className?: string;
 }
 
+import { useSidebar } from "~/components/layout/sidebar-provider";
+
 export function FloatingActionBar({
   leftContent,
   children,
   className,
 }: FloatingActionBarProps) {
   const [isDocked, setIsDocked] = useState(false);
+  const { isCollapsed } = useSidebar();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -48,9 +51,10 @@ export function FloatingActionBar({
     <div
       className={cn(
         // Base positioning - always at bottom
-        "fixed right-0 left-0 z-50",
+        "fixed right-0 z-50 transition-all duration-300 ease-in-out",
         // Safe area and sidebar adjustments
-        "pb-safe-area-inset-bottom md:left-64",
+        "pb-safe-area-inset-bottom left-0",
+        isCollapsed ? "md:left-24" : "md:left-[18rem]",
         // Conditional centering based on dock state
         isDocked ? "flex justify-center" : "",
         // Dynamic bottom positioning