Fixed issue with cards and dropdown

components/dashboard/DashboardNav.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { createClient } from '@/lib/supabase/client'
@@ -74,7 +74,13 @@ export default function DashboardNav({ companyName, entityType, enabledExtension
   const isOnOvrigtPage = ['/import', '/help', '/settings'].some(p => pathname.startsWith(p))
   const [manualOvrigtExpanded, setManualOvrigtExpanded] = useState(false)
   const isOvrigtExpanded = isOnOvrigtPage || manualOvrigtExpanded
-  const [isTillaggExpanded, setIsTillaggExpanded] = useState(false)
+  // Auto-expand Tillägg when on an extension page, or when manually toggled (persisted)
+  const isOnExtensionPage = pathname.startsWith('/e/')
+  const [manualTillaggExpanded, setManualTillaggExpanded] = useState(() => {
+    if (typeof window === 'undefined') return false
+    return localStorage.getItem('tillagg-expanded') === 'true'
+  })
+  const isTillaggExpanded = isOnExtensionPage || manualTillaggExpanded
   const [liveExtensions, setLiveExtensions] = useState(enabledExtensions ?? [])
 
   const fetchExtensions = useCallback(async () => {
@@ -89,9 +95,16 @@ export default function DashboardNav({ companyName, entityType, enabledExtension
     }
   }, [])
 
+  // Fetch extensions on mount if Tillägg starts expanded
+  useEffect(() => {
+    if (isTillaggExpanded) fetchExtensions()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const toggleTillagg = () => {
     const next = !isTillaggExpanded
-    setIsTillaggExpanded(next)
+    setManualTillaggExpanded(next)
+    localStorage.setItem('tillagg-expanded', String(next))
     if (next) fetchExtensions()
   }
 

components/extensions/SectorCard.tsx

@@ -7,8 +7,8 @@ export default function SectorCard({ sector }: { sector: Sector }) {
   const Icon = resolveIcon(sector.icon)
 
   return (
-    <Link href={`/extensions/${sector.slug}`}>
-      <Card className="group hover:border-primary/30 transition-colors cursor-pointer">
+    <Link href={`/extensions/${sector.slug}`} className="h-full">
+      <Card className="group hover:border-primary/30 transition-colors cursor-pointer h-full">
         <CardContent className="pt-6">
           <div className="flex items-start gap-3">
             <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 flex-shrink-0">
@@ -18,7 +18,7 @@ export default function SectorCard({ sector }: { sector: Sector }) {
               <h3 className="text-sm font-medium group-hover:text-primary transition-colors">
                 {sector.name}
               </h3>
-              <p className="text-xs text-muted-foreground mt-0.5">{sector.description}</p>
+              <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{sector.description}</p>
               <p className="text-xs text-muted-foreground mt-1.5">
                 {sector.extensions.length} tillägg
               </p>

lib/extensions/sectors.ts

@@ -328,7 +328,7 @@ export const SECTORS: Sector[] = [
     slug: 'export',
     name: 'Export & Utrikeshandel',
     icon: 'Ship',
-    description: 'Verktyg för svenska företag som exporterar varor till EU och övriga världen',
+    description: 'Branschverktyg för export och utrikeshandel',
     extensions: [
       {
         slug: 'eu-sales-list',