Поиграйтесь с свойством min-width. Вы задаёте ширину элементов которые могут бесконечно растягиваться и сжиматься к примеру input только свойством width в процентах(проценты относительно родителя). Они так и делают ещё можно настраивать ширину flex элемента свойствами flex-grow, flex-shrink и flex-basis. Оба варианта решат вашу проблему, но вообще есть более кардинальная мера. Для более тонкой настройки изменения страницы на разных экранах используются медиазапросы

Конечный автомат это функция или набор функций которые получает состояние и действие. В зависимости от них что- то делает и задаёт новое состояние. Есть начальное, промежуточные и обычно конечное состояние. Они меняются во время жизненного цикла приложения. Redux хороший пример конечного автомата. Когда мы в вузе это проходили я с удивлением узнал в нём банальный стейт с функциями в setState.