Support content reflow at 400% zoom

/* ❌ Bad: Fixed width layout */
.container {
  width: 1200px;
}
 
/* ✅ Good: Fluid layout with max-width */
.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 1rem;
}
 
/* ❌ Bad: Fixed columns */
.grid {
  display: grid;
  grid-template-columns: 300px 600px 300px;
}
 
/* ✅ Good: Responsive columns */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

/* Reflow to single column on narrow viewports */
.two-column {
  display: flex;
  flex-wrap: wrap;
}
 
.sidebar {
  flex: 1 1 250px;
}
 
.main-content {
  flex: 2 1 300px;
}
 
/* At 400% zoom, both become full width */

/* Responsive table approach */
@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
 
  thead {
    position: absolute;
    left: -9999px;
  }
 
  tr {
    margin-bottom: 1rem;
    border: 1px solid #ccc;
  }
 
  td {
    position: relative;
    padding-left: 50%;
  }
 
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.5rem;
    font-weight: bold;
  }
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">Product A</td>
      <td data-label="Price">$29.99</td>
    </tr>
  </tbody>
</table>

/* Horizontal nav becomes vertical at narrow widths */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
 
@media (max-width: 400px) {
  .nav {
    flex-direction: column;
  }
}

/* Images scale with container */
img {
  max-width: 100%;
  height: auto;
}
 
/* Prevent overflow */
.content img {
  max-width: 100%;
  object-fit: contain;
}

/* ❌ Bad: Fixed width inputs */
input {
  width: 400px;
}
 
/* ✅ Good: Flexible inputs */
input {
  width: 100%;
  max-width: 400px;
}
 
/* Stack label and input at narrow widths */
.form-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
 
.form-group label {
  flex: 0 0 150px;
}
 
.form-group input {
  flex: 1 1 200px;
}

function ResponsiveLayout({ sidebar, main }: { sidebar: React.ReactNode; main: React.ReactNode }) {
  return (
    <div className="flex flex-wrap">
      <aside className="w-full md:w-64 flex-shrink-0">
        {sidebar}
      </aside>
      <main className="w-full md:flex-1 min-w-0">
        {main}
      </main>
    </div>
  )
}