feat: add responsive breakpoint standardization and documentation

Standardize responsive breakpoints across all components and add comprehensive documentation.

**SummaryCard Button Skeleton Fix:**
- Fix button skeleton showing full-width on desktop in loading states
- Use CSS custom property (--button-skeleton-width) instead of inline width
- Calculate dynamic width based on button text length (min 88px, max 200px)
- Preserve media query behavior for responsive breakpoints

**Responsive Breakpoint Standardization:**
- Add design tokens for breakpoints (640px, 768px, 1024px) in tokens.css
- Standardize all components to use hardcoded px values in media queries
- Add inline comments (/* desktop */, /* desktop-wide */) for clarity
- Document ChatGPT Desktop widget width strategy (768px)

**Breakpoint Strategy:**
- List component: 640px (ensures desktop layout at 768px ChatGPT widget width)
- Card/SummaryCard/Album: 768px (button auto-width at ChatGPT widget size)
- FullscreenMap: 1024px (sidebar only on wide screens)

**Implementation Details:**
- CSS variables cannot be used in @media conditions (browser limitation)
- Follows industry best practices (Tailwind CSS, Bootstrap, Material-UI)
- Design tokens serve as documentation reference

**Storybook Documentation:**
- Add "Responsive Breakpoints" page under Design Tokens
- Interactive demos showing SummaryCard button width at 768px
- Interactive demos showing List layout change at 640px
- Live viewport width indicators for testing
- ChatGPT widget strategy explanation
- Implementation notes with code examples

**Files Changed:**
- SummaryCard: Button skeleton with CSS variable, 768px breakpoint
- List: 640px breakpoint maintained
- Album: 768px breakpoint with inline comments
- FullscreenMap/MapSidebar: 1024px breakpoint with inline comments
- tokens.css: Added breakpoint design tokens
- Tokens.stories.tsx: Added ResponsiveBreakpoints story

Author: JakeLin

CHANGELOG.md

@@ -33,7 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - **Card Component**: Reduced spacing for more compact design
-- **Card Loading UI**: Improve loading UI to be responsive to smoothly transit to data state. 
+- **Card Loading UI**: Improve loading UI to be responsive to smoothly transit to data state.
 - **SummaryCard**: Consolidated DiscoveryCard functionality with improved structure
 
 ### Fixed

packages/ui/src/Introduction.stories.tsx

@@ -118,7 +118,8 @@ const pizzaRestaurants: PizzaRestaurant[] = [
     title: 'Dough-Re-Mi',
     subtitle: '512 Harmony Avenue',
     image: 'https://persistent.oaistatic.com/pizzaz/pizzaz-4.png',
-    description: 'Focaccia-style squares with fluffy, airy texture and perfectly crispy edges. A late-night favorite among locals who crave authentic Italian-style pizza.',
+    description:
+      'Focaccia-style squares with fluffy, airy texture and perfectly crispy edges. A late-night favorite among locals who crave authentic Italian-style pizza.',
     badge: '4.6',
     features: ['$$', 'Focaccia', 'Late-night'],
   },
@@ -582,7 +583,7 @@ const IntroductionPage = () => {
                   badge={restaurant.badge}
                   size="compact"
                   imageAspectRatio="4/3"
-                  metadata={restaurant.features.map(f => ({ label: f, separator: '•' }))}
+                  metadata={restaurant.features.map((f) => ({ label: f, separator: '•' }))}
                   description={restaurant.description}
                   buttonText="Order now"
                   onButtonClick={() => alert(`Order from ${restaurant.title}`)}
@@ -939,8 +940,8 @@ const IntroductionPage = () => {
               more
             </li>
             <li>
-              <strong>Cards</strong>: SummaryCard (with compact variant), ImageCard, ListCard with all
-              features
+              <strong>Cards</strong>: SummaryCard (with compact variant), ImageCard, ListCard with
+              all features
             </li>
             <li>
               <strong>Patterns</strong>: Carousel, List, Album, Map with complete examples

packages/ui/src/components/Album/AlbumViewer.module.css

@@ -41,7 +41,7 @@
   z-index: 10;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 768px) /* desktop */ {
   .filmStripContainer {
     display: block;
   }
@@ -58,7 +58,7 @@
   overflow: hidden;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 768px) /* desktop */ {
   .photoContainer {
     padding: var(--ai-spacing-20);
     padding-left: var(--ai-spacing-16);
@@ -131,7 +131,7 @@
   right: var(--ai-spacing-4);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 768px) /* desktop */ {
   .navButton {
     display: none;
   }

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

@@ -248,7 +248,10 @@
   flex-direction: column;
   align-items: stretch;
   /* Match description height exactly - include marginTop spacing (2px between lines) */
-  height: calc(var(--ai-line-height-body-small) * var(--description-lines, 2) + 2px * (var(--description-lines, 2) - 1));
+  height: calc(
+    var(--ai-line-height-body-small) * var(--description-lines, 2) + 2px *
+      (var(--description-lines, 2) - 1)
+  );
 }
 
 /* Compact size uses caption line-height - match description's actual rendered height (slightly shorter due to webkit-line-clamp) */
@@ -300,12 +303,22 @@
   width: 100%;
 }
 
+/* Button skeleton wrapper - matches Button component's inline-flex behavior */
+.buttonSkeletonWrapper {
+  display: inline-flex;
+  width: 100%;
+}
+
 /* Desktop: Button auto-width when not full-width */
-@media (min-width: 768px) {
+@media (min-width: 768px) /* desktop */ {
   .buttonSection[data-full-width='false'] .button {
     width: auto;
     min-width: 120px;
   }
+
+  .buttonSection[data-full-width='false'] .buttonSkeletonWrapper {
+    width: var(--button-skeleton-width, 140px);
+  }
 }
 
 /* Error State */
@@ -324,8 +337,13 @@
 }
 
 @keyframes fadeInSkeleton {
-  0%, 50% { opacity: 0; }
-  100% { opacity: 1; }
+  0%,
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 /* Skeleton image containers with aspect-ratio to prevent layout shift */

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

@@ -18,6 +18,7 @@ declare const styles: {
   readonly metadataSeparator: string;
   readonly buttonSection: string;
   readonly button: string;
+  readonly buttonSkeletonWrapper: string;
   readonly overflowIndicator: string;
   readonly loadingContainer: string;
   readonly skeletonImageContainer: string;