ui-essentials/projects/demo-ui-essentials/src/app/demos/container-demo/container-demo.component.scss

@use 'ui-design-system/src/styles/semantic/index' as *;

.demo-wrapper {
  padding: $semantic-spacing-layout-md;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; // Prevent horizontal overflow
  box-sizing: border-box;
}

.demo-section {
  margin-bottom: $semantic-spacing-layout-xl;
  width: 100%;
  overflow-x: hidden; // Prevent horizontal overflow
  
  h2 {
    margin-bottom: $semantic-spacing-layout-md;
    color: $semantic-color-text-primary;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
  }
  
  h3 {
    margin-bottom: $semantic-spacing-component-lg;
    color: $semantic-color-text-primary;
    font-size: 1.25rem;
    font-weight: 600;
  }
  
  h4 {
    margin-bottom: $semantic-spacing-component-sm;
    color: $semantic-color-text-secondary;
    font-size: 1.125rem;
    font-weight: 500;
  }
}

.demo-containers-showcase {
  display: flex;
  flex-direction: column;
  gap: $semantic-spacing-component-lg;
  margin-bottom: $semantic-spacing-layout-lg;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; // Prevent horizontal overflow
  box-sizing: border-box;
  
  // Ensure all child containers are properly constrained
  .ui-container {
    max-width: min(100%, var(--container-max-width, 100%));
    margin-left: auto;
    margin-right: auto;
  }
}

.demo-container-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; // Center the containers
  overflow-x: hidden; // Prevent horizontal overflow
}

.demo-label {
  font-size: 0.875rem;
  color: $semantic-color-text-secondary;
  margin-bottom: $semantic-spacing-component-xs;
  text-align: center;
  font-weight: 500;
}

.demo-container-outline {
  border: 2px dashed $semantic-color-border-subtle;
  background: rgba($semantic-color-container-primary, 0.05);
  max-width: 100%; // Ensure containers don't overflow their parent
  box-sizing: border-box; // Include padding and border in width calculation
  margin: 0 auto; // Center the container
  position: relative; // For proper positioning context
  
  // Ensure proper centering
  &.ui-container {
    margin-left: auto;
    margin-right: auto;
  }
  
  &.demo-container-tall {
    min-height: 150px;
  }
}

.demo-content {
  color: $semantic-color-text-primary;
  text-align: center;
  padding: $semantic-spacing-component-sm;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word; // Handle long text properly
  word-wrap: break-word;
  
  &.hero-content {
    h2 {
      margin-bottom: $semantic-spacing-component-sm;
      color: $semantic-color-text-primary;
    }
    
    p {
      color: $semantic-color-text-secondary;
      font-size: 1.125rem;
    }
  }
}

.demo-variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: $semantic-spacing-grid-gap-lg;
}

.demo-variant-item {
  display: flex;
  flex-direction: column;
}

.demo-flex-item {
  background: $semantic-color-container-secondary;
  color: $semantic-color-on-container-secondary;
  padding: $semantic-spacing-component-sm;
  border-radius: $semantic-border-radius-sm;
  text-align: center;
  font-weight: 500;
  width: 100%; // Ensure flex items take full width
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0; // Prevent shrinking
}

.demo-grid-item {
  background: $semantic-color-container-tertiary;
  color: $semantic-color-on-container-tertiary;
  padding: $semantic-spacing-component-sm;
  border-radius: $semantic-border-radius-sm;
  text-align: center;
  font-weight: 500;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-paragraph {
  margin-bottom: $semantic-spacing-component-sm;
  color: $semantic-color-text-primary;
  line-height: 1.5;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.demo-wide-content {
  white-space: nowrap;
  color: $semantic-color-text-primary;
  padding: $semantic-spacing-component-sm;
}

// Feature cards styling
:host ::ng-deep {
  .demo-section ui-container[variant="card"] {
    h3 {
      margin-bottom: $semantic-spacing-component-sm;
      color: $semantic-color-text-primary;
      font-size: 1.125rem;
      font-weight: 500;
    }
    
    p {
      color: $semantic-color-text-secondary;
      line-height: 1.5;
      margin: 0;
    }
  }
}

// Additional container demo specific styles
.demo-containers-showcase {
  // Ensure containers behave properly
  .ui-container {
    position: relative;
  }
  
  // Size-specific constraints to prevent overflow
  .ui-container--xs { --container-max-width: 475px; }
  .ui-container--sm { --container-max-width: 640px; }
  .ui-container--md { --container-max-width: 768px; }
  .ui-container--lg { --container-max-width: 1024px; }
  .ui-container--xl { --container-max-width: 1280px; }
  .ui-container--2xl { --container-max-width: 1536px; }
  .ui-container--full { --container-max-width: 100%; }
  
  // Fix flex container alignment issues
  .ui-container--flex {
    align-items: stretch; // Default to stretch for consistent layout
    
    &:not(.ui-container--flex-center):not(.ui-container--flex-start):not(.ui-container--flex-end) {
      align-items: stretch; // Force default alignment for flex containers
    }
  }
}

@media (max-width: 1024px) {
  // Force smaller containers on tablet
  .demo-containers-showcase .ui-container {
    max-width: min(100%, var(--container-max-width, 100%)) !important;
  }
}

@media (max-width: 768px) {
  .demo-variant-grid {
    grid-template-columns: 1fr;
    gap: $semantic-spacing-component-lg;
  }
  
  .demo-containers-showcase {
    gap: $semantic-spacing-component-md;
    
    // Force all containers to be full width on mobile
    .ui-container {
      max-width: 100% !important;
      width: 100% !important;
    }
  }
  
  .demo-wrapper {
    padding: $semantic-spacing-component-md;
  }
}