SummaryCard button skeleton width doesn't respect responsive breakpoint when buttonFullWidth={false}

[JakeLin]

When using SummaryCard with variant="flat" and buttonFullWidth={false} in a narrow container (e.g., carousel items), the skeleton button doesn't match the real button's responsive behavior.

Environment

• AINativeKit version: 0.7.0
• Browser: Chrome/Safari
• Use case: 260px wide carousel cards

Expected Behavior

When buttonFullWidth={false}:

• Below 768px viewport: Button should be full-width
• At 768px+ viewport: Button should be auto-width (min 120px)

Both the real button and skeleton button should behave identically.

Actual Behavior

• ✅ Real button: Works correctly - responsive based on viewport width
• ❌ Skeleton button: Always constrained width, ignoring viewport size

Root Cause

The real button has the correct media query:

@media (min-width: 768px) {
  ._buttonSection[data-full-width="false"] ._button {
    width: auto;
    min-width: 120px;
  }
}

But the skeleton wrapper is missing the media query:

/* Missing media query! */
._buttonSection[data-full-width="false"] ._buttonSkeletonWrapper {
  width: var(--button-skeleton-width, 140px);
}

This means the skeleton is always constrained, even on mobile viewports where it should be full-width.

Steps to Reproduce

1. Create a SummaryCard with variant="flat" and buttonFullWidth={false}
2. Add loading={true} to show skeleton
3. View on mobile viewport (<768px)
4. Observe: real button is full-width, but skeleton button is constrained

<SummaryCard
  variant="flat"
  buttonText="View Details"
  buttonFullWidth={false}
  loading={true}
/>

Suggested Fix

Add responsive media query to the skeleton wrapper:

/* Default: full-width on mobile */
._buttonSection[data-full-width="false"] ._buttonSkeletonWrapper {
  width: 100%;
}

/* Constrained width on desktop */
@media (min-width: 768px) {
  ._buttonSection[data-full-width="false"] ._buttonSkeletonWrapper {
    width: var(--button-skeleton-width, 140px);
  }
}

Additional Context

This issue is particularly noticeable when using SummaryCard in:

• Carousel containers with narrow items (e.g., 260px cards)
• Sidebar layouts
• Any fixed-width container smaller than the viewport

Workaround

For narrow containers, you can override the skeleton width:

.narrow-container [data-full-width="false"] [class*="buttonSkeletonWrapper"] {
  width: var(--button-skeleton-width, 140px) !important;
}

[JakeLin]

Fixed in v0.8.0

Changed .buttonSkeletonWrapper from display: inline-flex to display: flex to eliminate baseline spacing that created ~2px extra bottom padding.

Result: Loading and data states now have pixel-perfect identical height.

Commits:

• 196e217 - Main fix
• 9e4a977 - Release update

Release: https://github.com/AINativeKit/ainativekit-ui/releases/tag/v0.8.0