/* Fix for Frame component width issue in installation docs */
/* Ensures file structure displays with proper width */

/* CSS Custom Properties for maintainability */
:root {
  --frame-min-width: 300px;
  --frame-width: 100%;
  --frame-pre-min-width: 280px;
}

/* Consolidated Frame component selectors */
.frame-container,
[data-component="frame"],
.frame,
div[class*="frame"] {
  min-width: var(--frame-min-width);
  width: var(--frame-width);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Pre elements within Frame components */
.frame-container pre,
[data-component="frame"] pre,
.frame pre,
div[class*="frame"] pre {
  min-width: var(--frame-pre-min-width);
  white-space: pre;
  overflow-x: auto;
}

/* Responsive design for smaller screens */
@media screen and (max-width: 768px) {
  .frame-container,
  [data-component="frame"],
  .frame,
  div[class*="frame"] {
    min-width: 100%;
  }
  
  .frame-container pre,
  [data-component="frame"] pre,
  .frame pre,
  div[class*="frame"] pre {
    min-width: 100%;
  }
}