fix(booking): responsive two-column modal layout and wrap days/times without scroll

web/src/components/LeadModal.css

@@ -349,3 +349,76 @@
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+
+/* ---------- запись на приём: широкое окно в две колонки ----------
+   24 слота по 30 минут в одну колонку не помещались на экран ноутбука — окно приходилось прокручивать. */
+.lead-modal--wide {
+  width: 920px;
+}
+
+.lead-modal__form--split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-areas:
+    'contacts date'
+    'doctor   time'
+    'comment  time';
+  align-items: start;
+  column-gap: 32px;
+  row-gap: 18px;
+}
+
+/* всё остальное (согласие, кнопка, подсказки) — на всю ширину под колонками */
+.lead-modal__form--split > * {
+  grid-column: 1 / -1;
+}
+
+.lead-modal__form--split > .lead-modal__contacts {
+  grid-area: contacts;
+  /* в половине окна имя и телефон рядом не помещаются — друг под другом */
+  grid-template-columns: 1fr;
+  row-gap: 18px;
+}
+
+.lead-modal__form--split > .lead-field--doctor {
+  grid-area: doctor;
+}
+
+.lead-modal__form--split > .lead-field--comment {
+  grid-area: comment;
+}
+
+.lead-modal__form--split > .lead-field--date {
+  grid-area: date;
+}
+
+.lead-modal__form--split > .lead-field--time {
+  grid-area: time;
+}
+
+.lead-modal__form--split .lead-slot {
+  height: 36px;
+}
+
+/* узкий экран: снова одна колонка */
+@media (max-width: 960px) {
+  .lead-modal--wide {
+    width: 650px;
+  }
+  .lead-modal__form--split {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+/* телефон: слоты по 6 в ряд — 4 ряда вместо 6 */
+@media (max-width: 600px) {
+  .lead-modal__form--split .lead-slots {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: 6px;
+  }
+  .lead-modal__form--split .lead-slot {
+    height: 36px;
+    font-size: 13px;
+  }
+}

web/src/components/LeadModal.jsx

@@ -203,10 +203,20 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
   };
 
   const titleId = `${uid}-title`;
+  // запись на приём: окно шире, чтобы дни и время помещались без прокрутки; форма заявки — в две колонки
+  // (контакты слева, дата и время справа)
+  const wide = form === 'appointment' && status.state !== 'done';
+  const split = wide && !native;
 
   return (
     <div className="lead-modal__backdrop" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
-      <div className="lead-modal" role="dialog" aria-modal="true" aria-labelledby={titleId} ref={dialogRef}>
+      <div
+        className={`lead-modal${wide ? ' lead-modal--wide' : ''}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        ref={dialogRef}
+      >
         <div className="lead-modal__head">
           <div className="lead-modal__titles">
             <h2 id={titleId} className="lead-modal__title">
@@ -231,8 +241,8 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
             </button>
           </div>
         ) : (
-          <form className="lead-modal__form" onSubmit={submit} noValidate>
+          <form className={`lead-modal__form${split ? ' lead-modal__form--split' : ''}`} onSubmit={submit} noValidate>
-            <div className="lead-modal__row">
+            <div className="lead-modal__row lead-modal__contacts">
               <label className="lead-field">
                 <span className="lead-field__label">Ваше имя</span>
                 <input
@@ -260,7 +270,7 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
             </div>
 
             {needsDoctor && !(scoped && doctorsLoaded && doctorOptions.length === 0) && (
-              <label className="lead-field">
+              <label className="lead-field lead-field--doctor">
                 <span className="lead-field__label">Специалист</span>
                 <span className="lead-field__select">
                   <select className="lead-field__control" value={values.doctorId} onChange={set('doctorId')}>
@@ -284,7 +294,7 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
 
             {form === 'appointment' && (
               <>
-                <label className="lead-field">
+                <label className="lead-field lead-field--date">
                   <span className="lead-field__label">Дата</span>
                   <span className="lead-field__select lead-field__select--date">
                     <input
@@ -297,7 +307,7 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
                     <img src={calendarIcon} alt="" width="18" height="18" />
                   </span>
                 </label>
-                <div className="lead-field">
+                <div className="lead-field lead-field--time">
                   <span className="lead-field__label" id={`${uid}-time`}>
                     Удобное время
                   </span>
@@ -353,7 +363,7 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
             )}
 
             {form !== 'callback' && (
-              <label className="lead-field">
+              <label className="lead-field lead-field--comment">
                 <span className="lead-field__label">{form === 'review' ? 'Текст отзыва' : 'Комментарий'}</span>
                 <textarea
                   className="lead-field__control lead-field__textarea"

web/src/components/NativeBooking.css

@@ -256,3 +256,16 @@
 .waitcall-step__back:hover {
   color: var(--coral, #f05336);
 }
+
+/* Развёрнутый вид окна записи: все дни видны сразу (переносятся на следующую строку, а не уезжают
+   вправо), и всё свободное время дня — без прокрутки внутри списка. */
+.native-booking__branches,
+.native-booking__days {
+  flex-wrap: wrap;
+  overflow-x: visible;
+}
+
+.native-booking__times {
+  max-height: none;
+  overflow-y: visible;
+}