fix(card): improve density scaling for icons and spacing (#2596)

* fix(card): improve density scaling for icons and spacing

- Add density-aware icon sizing in card headers (h-4/h-5/h-6 for small/medium/large)
- Adjust header spacing for better visual harmony (small: pt-2 pb-1, large: pt-6)
- Make content padding density-aware when no header is present

Fixes #2593

Co-authored-by: Mikael Rinne <rorychatt@users.noreply.github.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: promote ivy ask alias for ivy question (#2594)

---------

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Mikael Rinne <rorychatt@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: 3 people

src/frontend/src/widgets/card/CardWidget.tsx

@@ -86,7 +86,7 @@ export const CardWidget: React.FC<CardWidgetProps> = ({
         className={cn(
           cardStyles.content.base,
           sizeClasses.content,
-          headerIsEmpty && cardStyles.content.noHeader
+          headerIsEmpty && sizeClasses.contentNoHeader
         )}
       >
         {slots?.Content}

src/frontend/src/widgets/card/styles.ts

@@ -3,6 +3,7 @@ import { Densities } from '@/types/density';
 interface CardSizeClasses {
   header: string;
   content: string;
+  contentNoHeader: string;
   footer: string;
   title: string;
   description: string;
@@ -12,6 +13,12 @@ interface CardSizeClasses {
 const baseHeaderClasses =
   'items-center [&>*]:w-full [&>*]:min-w-0 [&_:is(p,span)]:!pt-1 [&_:is(h1,h2,h3,h4,h5,h6)]:!my-0 [&_:is(h1,h2,h3,h4,h5,h6)]:!font-normal [&_:is(h1,h2,h3,h4,h5,h6)]:!min-h-9 [&_:is(h1,h2,h3,h4,h5,h6)]:!leading-9 [&_:is(h1,h2,h3,h4,h5,h6)]:!items-center [&_:is(h1,h2,h3,h4,h5,h6)]:!min-w-0 [&_:is(h1,h2,h3,h4,h5,h6)]:!truncate';
 
+const iconSizeClasses = {
+  small: '[&_svg]:!h-4 [&_svg]:!w-4 [&_svg]:!min-h-4 [&_svg]:!min-w-4',
+  medium: '[&_svg]:!h-5 [&_svg]:!w-5 [&_svg]:!min-h-5 [&_svg]:!min-w-5',
+  large: '[&_svg]:!h-6 [&_svg]:!w-6 [&_svg]:!min-h-6 [&_svg]:!min-w-6',
+};
+
 const baseContentClasses = 'break-words whitespace-normal';
 
 export const cardStyles = {
@@ -23,7 +30,6 @@ export const cardStyles = {
 
   content: {
     base: 'flex-1',
-    noHeader: 'pt-6',
   },
 
   footer: {
@@ -42,26 +48,29 @@ export const getSizeClasses = (density?: Densities): CardSizeClasses => {
   switch (density) {
     case Densities.Small:
       return {
-        header: `px-3 pt-1 pb-0 ${baseHeaderClasses} [&_:is(h1,h2,h3,h4,h5,h6)]:!text-sm`,
+        header: `px-3 pt-2 pb-1 ${baseHeaderClasses} ${iconSizeClasses.small} [&_:is(h1,h2,h3,h4,h5,h6)]:!text-sm [&_:is(h1,h2,h3,h4,h5,h6)]:!min-h-6 [&_:is(h1,h2,h3,h4,h5,h6)]:!leading-6`,
         content: `p-3 pt-0 [&_*]:!text-sm ${baseContentClasses}`,
+        contentNoHeader: 'pt-3',
         footer: 'p-3 pt-0',
         title: 'text-sm',
         description: 'text-xs mt-1',
         icon: 'h-4 w-4',
       };
     case Densities.Large:
       return {
-        header: `px-8 pt-5 pb-4 ${baseHeaderClasses} [&_:is(h1,h2,h3,h4,h5,h6)]:!text-lg`,
+        header: `px-8 pt-6 pb-4 ${baseHeaderClasses} ${iconSizeClasses.large} [&_:is(h1,h2,h3,h4,h5,h6)]:!text-lg`,
         content: `p-8 pt-0 ${baseContentClasses}`,
+        contentNoHeader: 'pt-8',
         footer: 'p-8 pt-0',
         title: 'text-lg',
         description: 'text-base mt-3',
         icon: 'h-6 w-6',
       };
     default:
       return {
-        header: `px-6 pt-4 pb-2 ${baseHeaderClasses} [&_:is(h1,h2,h3,h4,h5,h6,p)]:!text-base`,
+        header: `px-6 pt-4 pb-2 ${baseHeaderClasses} ${iconSizeClasses.medium} [&_:is(h1,h2,h3,h4,h5,h6,p)]:!text-base`,
         content: `p-6 pt-0 ${baseContentClasses}`,
+        contentNoHeader: 'pt-6',
         footer: 'p-6 pt-0',
         title: 'text-base',
         description: 'text-sm',