fix(SummaryCard): fix button skeleton padding and merge button width docs

## Bug Fixes
- Fix button skeleton 2px bottom padding issue (Issue #15)
  - Changed .buttonSkeletonWrapper from inline-flex to flex
  - Eliminates baseline spacing that created extra bottom padding
  - Loading and data states now have identical height

## Documentation
- Merge Button Width Behavior section into main SummaryCards story
  - Consolidates button width documentation for better discoverability
  - Shows buttonFullWidth prop behavior with live examples
  - Demonstrates loading state skeleton consistency
  - Includes implementation details with CSS code snippet

## Code Quality
- Fix lint errors in generate-schemas.ts (use unknown instead of any)
- Fix lint error in Button.test.tsx (remove unused variable)
- Fix lint error in MapContent.tsx (add eslint-disable for necessary any)

## Changes
- Simplified button width logic (removed responsive @media query)
- Button width is now fixed based on buttonFullWidth prop only
- No responsive behavior - more predictable and maintainable

Author: JakeLin

CHANGELOG.md

@@ -7,6 +7,42 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.8.0] - 2025-11-08
+
+### Fixed
+
+- **SummaryCard**: Button skeleton width now matches button width (Issue #15)
+  - Skeleton buttons use the same width logic as real buttons
+  - `buttonFullWidth={false}` → auto-width (min 120px) for both skeleton and button
+  - `buttonFullWidth={true}` → full-width (100%) for both skeleton and button
+  - `buttonFullWidth={undefined}` → variant-based (full for default, auto for flat)
+
+### Changed
+
+- **SummaryCard**: Simplified `buttonFullWidth` behavior
+  - `buttonFullWidth={false}`: Always auto-width (min 120px)
+  - `buttonFullWidth={true}`: Always full-width (100%)
+  - `buttonFullWidth={undefined}`: Full-width for default variant, auto-width for flat variant
+  - Button width is now fixed and predictable - no responsive behavior
+  - Simpler implementation using standard CSS
+
+### Technical Details
+
+All components use simple, predictable viewport-based media queries for responsive behavior:
+
+```css
+/* SummaryCard: Fixed button widths based on prop */
+.buttonSection[data-full-width='false'] .button {
+  width: auto;
+  min-width: 120px;
+}
+
+/* List & AlbumViewer: Viewport-based responsive behavior */
+@media (min-width: 640px) {
+  /* Tablet/desktop styles */
+}
+```
+
 ## [0.7.0] - 2025-11-08
 
 ### Added

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainativekit/ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "AI Native Kit - Component library for AI-powered applications",
   "type": "module",
   "main": "./dist/index.cjs",

packages/ui/scripts/generate-schemas.ts

@@ -154,9 +154,8 @@ const indexContent = {
         import: '@ainativekit/ui',
       };
       return acc;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     },
-    {} as Record<string, any>
+    {} as Record<string, unknown>
   ),
 };
 

packages/ui/src/components/Button/__tests__/Button.test.tsx

@@ -185,7 +185,7 @@ describe('Button', () => {
     });
 
     it('should update when brand colors change', () => {
-      const { container, rerender } = render(
+      const { rerender } = render(
         <ThemeProvider brandColors={{ primary: '#6B46C1' }}>
           <Button variant="primary" color="primary">
             Button

packages/ui/src/components/Card/SummaryCard.module.css

@@ -303,22 +303,20 @@
   width: 100%;
 }
 
-/* Button skeleton wrapper - matches Button component's inline-flex behavior */
+/* Button skeleton wrapper */
 .buttonSkeletonWrapper {
-  display: inline-flex;
+  display: flex;
   width: 100%;
 }
 
-/* Desktop: Button auto-width when not full-width */
-@media (min-width: 768px) /* desktop */ {
-  .buttonSection[data-full-width='false'] .button {
-    width: auto;
-    min-width: 120px;
-  }
+/* Button auto-width when buttonFullWidth={false} */
+.buttonSection[data-full-width='false'] .button {
+  width: auto;
+  min-width: 120px;
+}
 
-  .buttonSection[data-full-width='false'] .buttonSkeletonWrapper {
-    width: var(--button-skeleton-width, 140px);
-  }
+.buttonSection[data-full-width='false'] .buttonSkeletonWrapper {
+  width: var(--button-skeleton-width, 140px);
 }
 
 /* Error State */

packages/ui/src/components/Card/SummaryCard.stories.tsx

@@ -828,6 +828,220 @@ const SummaryCardsComponent: React.FC = () => {
         </div>
       </section>
 
+      {/* Button Width Behavior */}
+      <section style={{ marginBottom: '64px' }}>
+        <header style={{ marginBottom: '24px' }}>
+          <h2 style={{ marginBottom: '8px' }}>Button Width Behavior</h2>
+          <p style={{ color: 'var(--ai-color-text-secondary)', margin: 0, fontSize: '14px' }}>
+            SummaryCard buttons have fixed, predictable widths based on the buttonFullWidth prop.
+            Button width does NOT change based on container or viewport size.
+          </p>
+        </header>
+
+        {/* buttonFullWidth prop examples */}
+        <div style={{ marginBottom: '48px' }}>
+          <h3 style={{ marginBottom: '12px', fontSize: '16px', fontWeight: 600 }}>
+            buttonFullWidth Prop Behavior
+          </h3>
+          <p
+            style={{
+              color: 'var(--ai-color-text-secondary)',
+              fontSize: '14px',
+              marginBottom: '16px',
+            }}
+          >
+            The button width is determined by the buttonFullWidth prop and never changes based on
+            container or viewport size.
+          </p>
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+              gap: '24px',
+              marginBottom: '16px',
+            }}
+          >
+            <div>
+              <p style={{ fontSize: '12px', marginBottom: '8px', fontWeight: 600 }}>
+                buttonFullWidth={'{true}'}
+              </p>
+              <SummaryCard
+                images={SAMPLE_IMAGES.restaurant}
+                title="Full Width Button"
+                subtitle="Always 100% width"
+                badge="9.2"
+                description="Button spans the full width of the card"
+                buttonText="Reserve Table"
+                buttonFullWidth={true}
+                style={{ maxWidth: `${CARD_WIDTH}px` }}
+              />
+            </div>
+
+            <div>
+              <p style={{ fontSize: '12px', marginBottom: '8px', fontWeight: 600 }}>
+                buttonFullWidth={'{false}'}
+              </p>
+              <SummaryCard
+                images={SAMPLE_IMAGES.pizza}
+                title="Auto Width Button"
+                subtitle="Always auto (min 120px)"
+                badge="8.5"
+                description="Button is auto-width with minimum 120px"
+                buttonText="Order Now"
+                buttonFullWidth={false}
+                style={{ maxWidth: `${CARD_WIDTH}px` }}
+              />
+            </div>
+
+            <div>
+              <p style={{ fontSize: '12px', marginBottom: '8px', fontWeight: 600 }}>
+                buttonFullWidth={'{undefined}'} (flat variant)
+              </p>
+              <SummaryCard
+                variant="flat"
+                images={SAMPLE_IMAGES.pasta}
+                title="Default Behavior"
+                subtitle="Auto for flat variant"
+                badge="9.0"
+                description="Flat variant defaults to auto-width button"
+                buttonText="View Menu"
+                style={{ maxWidth: `${CARD_WIDTH}px` }}
+              />
+            </div>
+          </div>
+          <p
+            style={{
+              color: 'var(--ai-color-text-secondary)',
+              fontSize: '12px',
+              fontStyle: 'italic',
+            }}
+          >
+            ✅ Button widths remain consistent regardless of card container size
+          </p>
+        </div>
+
+        {/* Loading State Example */}
+        <div style={{ marginBottom: '48px' }}>
+          <h3 style={{ marginBottom: '12px', fontSize: '16px', fontWeight: 600 }}>
+            Loading State - Skeleton Consistency
+          </h3>
+          <p
+            style={{
+              color: 'var(--ai-color-text-secondary)',
+              fontSize: '14px',
+              marginBottom: '16px',
+            }}
+          >
+            Skeleton buttons now match real button widths (fixes Issue #15).
+          </p>
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+              gap: '24px',
+              marginBottom: '16px',
+            }}
+          >
+            <div>
+              <p style={{ fontSize: '12px', marginBottom: '8px', fontWeight: 600 }}>
+                buttonFullWidth={'{false}'} - Loading
+              </p>
+              <SummaryCard
+                title="Loading State"
+                subtitle="Auto Width Button"
+                description="Skeleton button is auto-width (min 120px)"
+                buttonText="View Details"
+                buttonFullWidth={false}
+                loading={true}
+                style={{ maxWidth: `${CARD_WIDTH}px` }}
+              />
+            </div>
+
+            <div>
+              <p style={{ fontSize: '12px', marginBottom: '8px', fontWeight: 600 }}>
+                buttonFullWidth={'{false}'} - Loaded
+              </p>
+              <SummaryCard
+                images={SAMPLE_IMAGES.pizza}
+                title="Loaded State"
+                subtitle="Auto Width Button"
+                description="Real button is auto-width (min 120px)"
+                buttonText="View Details"
+                buttonFullWidth={false}
+                style={{ maxWidth: `${CARD_WIDTH}px` }}
+              />
+            </div>
+          </div>
+          <p
+            style={{
+              color: 'var(--ai-color-text-secondary)',
+              fontSize: '12px',
+              fontStyle: 'italic',
+            }}
+          >
+            ✅ Skeleton and real buttons have identical widths
+          </p>
+        </div>
+
+        {/* Technical Details */}
+        <div
+          style={{
+            padding: '24px',
+            background: 'var(--ai-color-bg-secondary)',
+            borderRadius: '8px',
+          }}
+        >
+          <h3 style={{ marginBottom: '12px', fontSize: '16px', fontWeight: 600 }}>
+            Implementation
+          </h3>
+          <div style={{ fontSize: '14px', lineHeight: '1.6' }}>
+            <p style={{ marginBottom: '12px' }}>
+              SummaryCard uses <strong>simple CSS</strong> for predictable button widths:
+            </p>
+            <pre
+              style={{
+                background: 'var(--ai-color-bg-primary)',
+                padding: '12px',
+                borderRadius: '4px',
+                overflow: 'auto',
+                fontSize: '12px',
+                marginBottom: '12px',
+              }}
+            >
+              {`/* Default: Full width */
+.button {
+  width: 100%;
+}
+
+/* When buttonFullWidth={false}: Auto width */
+.buttonSection[data-full-width='false'] .button {
+  width: auto;
+  min-width: 120px;
+}
+
+/* Skeleton matches button */
+.buttonSection[data-full-width='false'] .buttonSkeletonWrapper {
+  width: var(--button-skeleton-width, 140px);
+}`}
+            </pre>
+            <ul style={{ margin: 0, paddingLeft: '20px' }}>
+              <li>
+                <strong>No responsive behavior</strong> - Button width is fixed based on prop
+              </li>
+              <li>
+                <strong>Predictable</strong> - Same width regardless of container or viewport size
+              </li>
+              <li>
+                <strong>Simple</strong> - No container queries needed for SummaryCard buttons
+              </li>
+              <li>
+                <strong>Consistent</strong> - Skeleton and real buttons always match
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
       {/* Discovery/Browse Mode - Compact Size (NEW - replaces DiscoveryCard) */}
       <section style={{ marginBottom: '64px' }}>
         <header style={{ marginBottom: '24px' }}>

packages/ui/src/components/Card/SummaryCard.tsx

@@ -166,10 +166,10 @@ export interface SummaryCardProps extends Omit<CardProps, 'children'> {
   buttonDisabled?: boolean;
 
   /**
-   * Button full width on desktop.
+   * Button width behavior
    * - undefined: Auto (full-width for default variant, auto-width for flat variant)
-   * - true: Full width on all screen sizes
-   * - false: Auto width on desktop (min 120px), full width on mobile
+   * - true: Full width (100%)
+   * - false: Auto width (min 120px)
    * @default undefined (auto based on variant)
    */
   buttonFullWidth?: boolean;

packages/ui/src/components/Map/MapContent.tsx

@@ -114,6 +114,7 @@ const PinchZoomHandler: React.FC = () => {
         accumulatedDelta.current += e.deltaY;
 
         // Store mouse position for zooming around cursor
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         lastMousePos.current = map.mouseEventToContainerPoint(e as any);
 
         // Use shorter debounce (10ms instead of 40ms) for more responsive continuous zooming