Сделал поле для ввода длинным

Поле для ввода длинное и не переносится на следующую строку.
Добавил случайное название работы в плейсхолдере.

src/routes/index.svelte

@@ -14,6 +14,10 @@
         const url=`http://localhost:3000/room/?id=${id}`;
         window.location.href = url;
     }
+
+    const plcType = ['Лабораторная работа', 'Лаба', 'Практическая работа', 'Практика', 'Лабораторная', 'Доклад'];
+    const plcSubj = ['физике', 'химии', 'философии'];
+    const plcName = `${plcType[Math.floor(Math.random()*plcType.length)]} по ${plcSubj[Math.floor(Math.random()*plcSubj.length)]} № ${Math.floor(Math.random()*12)+1}`;
 </script>
 
 <svelte:head>
@@ -37,7 +41,7 @@
                 </div>
                 <div class="inputWrap">
                     Название работы:<br>
-                    <input type="text" size="45" placeholder="Лабораторная работа по физике №3" bind:value={name}>
+                    <input type="text" size="45" placeholder={plcName} bind:value={name}>
                 </div>
                 <div style="text-align: center;">
                     <input type="number" id="varCount" name="варианты" min="2" max="50" bind:value={memberCount}>
@@ -123,7 +127,7 @@
 
     .inputs {
         display: flex;
-        height: 75%;
+        height: 70%;
         margin-left: 5%;
         margin-right: 5%;
         flex-direction: column;
@@ -177,11 +181,11 @@
     }
 
     input:checked + .slider {
-        background-color: #f57323;
+        background-color: #3fc53b;
     }
 
     input:focus + .slider {
-        box-shadow: 0 0 1px #f57323;
+        box-shadow: 0 0 1px #3fc53b;
     }
 
     input:checked + .slider:before {

src/routes/room.svelte

@@ -142,7 +142,7 @@
         padding: 0px;
         height: 2em;
         margin-bottom: 10px;
-        overflow: scroll;
+        white-space: nowrap;
     }
 
     .name {
@@ -158,6 +158,7 @@
         padding: 0px;
         border: none;
         height: 2em;
+        width: 100%;
     }
 
     .nameInput:focus {