FEA-1550: Fix sidebar icon sizing and CSS import order

- Import design-system globals.css before local globals.css so DS
  styles are the base layer and local overrides apply on top
- Replace arbitrary size-[18px] span wrapper with standard size-4 class
  directly on SVG elements, matching the design system's own icon sizing
  convention and ensuring Tailwind generates the class

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: mikeangstadt

apps/desktop/src/renderer/components/layout/Sidebar.tsx

@@ -48,8 +48,8 @@ const SVG_ICONS: Record<string, string> = {
 function NavIcon({ name }: { name: string }) {
   const paths = SVG_ICONS[name] || "";
   return (
-    <span className="shrink-0 size-[18px] text-current opacity-70">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-full">
+    <span className="shrink-0 text-current opacity-70">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-4">
         <g dangerouslySetInnerHTML={{ __html: paths }} />
       </svg>
     </span>

apps/desktop/src/renderer/main.tsx

@@ -1,8 +1,8 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { DesignSystemProvider } from "@closedloop-ai/design-system";
-import "./globals.css";
 import "@closedloop-ai/design-system/styles/globals.css";
+import "./globals.css";
 import App from "./App";
 
 window.addEventListener("error", (event) => {