gracer

У вас в цикле новый список постоянно создаётся. Нужно вынести за цикл

reg2 = new UserList
while(true){
    newUser = prompt('Введите имя и фамилию') 
    if (newUser != null) {
        reg = new User(newUser)

        
        reg2.addUser(reg) 
    }

    if (newUser === null) {
        reg2.getAllUsers()
        break;
    }
}

Слушатель события submit надо вешать на форму, не на кнопку.
getElementsByClassName возвращает набор элементов, а значит надо пройтись по этому набору и навесить на каждый элемент слушатель. Если элемент один проще искать его через querySelector
В вашем случае можно сделать примерно так:

// Находим элемент формы, которую надо отправить.
// Вместо form можно указать класс, id и т.п.
const btn = document.querySelector('form');
// вешаем слушатель
btn.addEventListener('submit', formSend);

Ну если в лоб, то берёте 8 инпутов, ограничиваете длинну ввода до 1 знака, стилизуете по макету, 2 последних поднимаете через position relative. При отправке формы склеиваете поля как вам надо. По мере продвижения в обучении можно придумывать более творческие подходы.

Вопрос решился изменением типа коннета перед отправкой в метод onMessage вместо onConnect

$c->websocketType = Websocket::BINARY_TYPE_ARRAYBUFFER;

Масштаб в браузере проверьте. ctrl+0 для сброса

У вас .page абсолютом задан. Суньте section в main блок. Хотя не знаю зачем вам абсолют вообще

может вам не круги подойдут
xbsoftware.github.io/enjoyhint

Про тень попробовал https://codepen.io/gracer/pen/yLBePRY
Т.е. смысл элемент с тенью располагать и растягивать с js высчитывая от положения и размеров нужного элемента

Для вдохновения
https://codepen.io/juliebacon/pen/wdqgOG
https://codepen.io/ishaiavrahami/pen/XwBOzQ

Т.к. поведение объектов похоже на игровые механики, движение, взаимодействие с другими объектам, реакция на действия пользователя, я бы копал в сторону реализации на canvas и requestAnimationFrame. Возможно, игровые движки какие подойдут.

https://learn.javascript.ru/cookie

// куки будет удалено через 1 час
document.cookie = "user=John; max-age=3600";

line-height

Можно попробовать компенсировать вторым псевдоэлементом со светлой тенью
https://codepen.io/anon/pen/wVoONB

Ну, я бы примерно так сделал
https://codepen.io/anon/pen/wVzGmO

Потому что
position: absolute;

Вы ограничили размеры блока, поэтому он не может подстраиваться под контент
https://jsfiddle.net/918aoxvt/

Скорее всего какой-то margin вылезает за блоки, попробуйте overflow: hidden поставить блокам.

width: 40%;
max-width: 400px;

У меня так было, когда долго его не запускал, он начал обновляться. Перезапустил авокод, он выдал сообщение, что обновился и все заработало ок. Попробуйте переустановить.

Можно как-то так изобразить, не совсем то, но всё же. https://codepen.io/anon/pen/zMydYr