fix: old styling with new shadcn components

components/layout/AppHeader.tsx

@@ -18,20 +18,11 @@ export function AppHeader() {
   const pathSegments = pathname.split('/').filter(Boolean);
   
   return (
-    <header className="h-16 border-b border-border bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-4 lg:px-8">
+    <header className="h-16 border-b border-border bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between pl-8 pr-5 md:pr-9">
       <div className="flex items-center gap-4">
-        <Button 
-          variant="ghost" 
-          size="icon" 
-          className="lg:hidden text-muted-foreground hover:text-foreground"
-          onClick={toggle}
-        >
-          {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-        </Button>
-        
         <nav className="flex items-center text-sm font-medium">
           <Link href="/" className="flex items-center gap-2 group">
-            <Logo size={20} className="md:hidden" />
+            <Logo size={20} className="lg:hidden" />
             <span className="font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 group-hover:opacity-80 transition-opacity">
               Kit
             </span>
@@ -46,8 +37,8 @@ export function AppHeader() {
                 <Link 
                   href={href}
                   className={cn(
-                    "capitalize transition-colors",
-                    isLast ? "text-foreground font-semibold" : "text-muted-foreground hover:text-foreground font-medium"
+                    "capitalize transition-colors text-foreground",
+                    isLast ? "font-semibold" : "font-medium"
                   )}
                 >
                   {segment.replace(/-/g, ' ')}
@@ -58,8 +49,16 @@ export function AppHeader() {
         </nav>
       </div>
 
-      <div className="flex items-center gap-2 sm:gap-4">
+      <div className="flex items-center gap-2">
         <ThemeToggleComponent />
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          className="lg:hidden text-muted-foreground hover:text-foreground"
+          onClick={toggle}
+        >
+          {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+        </Button>
       </div>
     </header>
   );

components/layout/AppSidebar.tsx

@@ -148,9 +148,9 @@ export function AppSidebar() {
                         href={item.href}
                         onClick={() => { if (window.innerWidth < 1024) close(); }}
                         className={cn(
-                          "flex items-center px-3 py-2 rounded-xl text-sm font-medium transition-all duration-300 relative group/item",
+                          "flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300 relative group/item",
                           isActive
-                            ? "bg-primary/10 text-primary shadow-[0_0_15px_rgba(139,92,246,0.15)] ring-1 ring-primary/20" 
+                            ? "bg-primary/10 text-primary ring-1 ring-primary/20" 
                             : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
                           isCollapsed ? "justify-center" : "justify-between"
                         )}
@@ -172,11 +172,6 @@ export function AppSidebar() {
                             pathname.startsWith(item.href) && "rotate-90"
                           )} />
                         )}
-
-                        {/* Collapsed Active Indicator */}
-                        {isCollapsed && isActive && (
-                          <div className="absolute left-0 w-1 h-6 bg-primary rounded-r-full" />
-                        )}
                       </Link>
                       
                       {item.items && pathname.startsWith(item.href) && !isCollapsed && (

components/pastel/tools/ExportMenu.tsx

@@ -92,7 +92,7 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
             value={format}
             onValueChange={(value) => setFormat(value as ExportFormat)}
           >
-            <SelectTrigger>
+            <SelectTrigger className="w-full">
               <SelectValue placeholder="Select format" />
             </SelectTrigger>
             <SelectContent>

components/units/converter/MainConverter.tsx

@@ -136,7 +136,7 @@ export default function MainConverter() {
             onValueChange={(value) => setSelectedMeasure(value as Measure)}
           >
             <SelectTrigger
-              className="h-10 text-sm"
+              className="w-full"
               style={{
                 borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
               }}
@@ -181,7 +181,7 @@ export default function MainConverter() {
                 value={selectedUnit}
                 onValueChange={(value) => setSelectedUnit(value)}
               >
-                <SelectTrigger>
+                <SelectTrigger className="w-full">
                   <SelectValue placeholder="From" />
                 </SelectTrigger>
                 <SelectContent>
@@ -210,7 +210,7 @@ export default function MainConverter() {
                 value={targetUnit}
                 onValueChange={(value) => setTargetUnit(value)}
               >
-                <SelectTrigger>
+                <SelectTrigger className="w-full">
                   <SelectValue placeholder="To" />
                 </SelectTrigger>
                 <SelectContent>