Разметка блоков в контейнере

async function fetchOrders() {
    const selectedDate = document.getElementById('order-date').value;
    const response = await fetch('/api/orders', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ date: selectedDate }),
    });

    const data = await response.json();
    const ordersContainer = document.getElementById('orders-container');
    const noOrdersElement = document.getElementById('no-orders');
    ordersContainer.innerHTML = '';

    if (data.orders.length > 0) {
        noOrdersElement.style.display = 'none';
        data.orders.forEach(order => {
            const orderBlock = document.createElement('div');
            orderBlock.classList.add('order-block');

            const orderHeader = document.createElement('div');
            orderHeader.classList.add('order-header');
            orderHeader.innerHTML = `<span class="order-number">Заявка №${order.id}</span><span class="organization-name">${order.organizationName}</span>`;
            orderBlock.appendChild(orderHeader);

            const orderDetails = document.createElement('div');
            orderDetails.classList.add('order-details');

            Object.keys(order.categories).forEach(categoryName => {
                const category = order.categories[categoryName];

                const categoryElement = document.createElement('div');
                categoryElement.classList.add('category', categoryName);
                categoryElement.textContent = categoryName;
                orderDetails.appendChild(categoryElement);

                category.forEach(product => {
                    const productInfo = document.createElement('div');
                    productInfo.classList.add('product-info');
                    productInfo.innerHTML = `<span class="product-name">${product.productName}</span><span class="product-quantity">${product.quantity} ${product.unit}</span>`;
                    orderDetails.appendChild(productInfo);
                });
            });

            orderBlock.appendChild(orderDetails);
            ordersContainer.appendChild(orderBlock);
        });
    } else {
        noOrdersElement.style.display = 'block';
    }
}

body {
  font-family: 'YS Text', 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  margin: 0;
  padding: 20px;
  color: #000;
  min-height: 100vh;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
h1 {
  color: #333;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.date-picker {
  margin-bottom: 20px;
  text-align: center;
}
.date-picker label {
  font-weight: 500;
  margin-right: 10px;
  font-size: 16px;
}
.date-picker input[type="date"] {
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 10px 15px;
  font-size: 16px;
  background-color: white;
  transition: all 0.3s ease;
}
.date-picker input[type="date"]:focus {
  border-color: #4d7ce0;
  outline: none;
  box-shadow: 0 0 0 3px rgba(77, 124, 224, 0.2);
}
.search-button {
  display: block;
  width: 200px;
  margin: 20px auto;
  padding: 12px 20px;
  background-color: #fc0;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.search-button:hover {
  background-color: #f2c200;
}
.search-button:active {
  transform: translateY(1px);
}
.orders-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
}
.order-block {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}
.order-block:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.order-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}
.order-number {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}
.organization-name {
  font-size: 18px;
  font-weight: 700;
  color: #000;
}
.order-details {
  display: flex;
  flex-direction: column;
}
.category {
  font-weight: 500;
  color: #000;
  margin-bottom: 8px;
  margin-top: 12px;
  font-size: 16px;
}
.product-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 14px;
}
.no-orders {
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-top: 20px;
  width: 100%;
}
.Чищенные {
  border-left: 4px solid #ffcc00;
}
.Нечищенные {
  border-left: 4px solid #4d7ce0;
}
.product-name {
  color: #333;
}
.product-quantity {
  color: #666;
  font-weight: 500;
}

@media (max-width: 768px) {
  .container {
    padding: 15px;
  }
  h1 {
    font-size: 24px;
  }
  .date-picker label {
    display: block;
    margin-bottom: 10px;
  }
  .date-picker input[type="date"] {
    width: 100%;
    box-sizing: border-box;
  }
  .search-button {
    width: 100%;
  }
  .order-block {
    max-width: none;
  }
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>История заявок</title>
    <link rel="stylesheet" type="text/css" href="/static/style_order.css">

</head>
<body>
    <div id="app" class="container">
        <h1>История заказов овощей</h1>
        <div class="date-picker">
            <label for="order-date">Выберите дату:</label>
            <input type="date" id="order-date">
        </div>
        <button class="search-button" onclick="fetchOrders()">Поиск</button>
        <div id="orders-container"></div>
        <div id="no-orders" style="display: none;">
            На выбранную дату заказов нет.
        </div>
    </div>
    <script src="/static/script_order.js"></script>
</body>
</html>