Как сделать так чтобы текст в поисковой строке не заходил за кнопку? А нужно чтоб текст всегда слева от неё шёл

Добавьте обработчик событий к вводу панели поиска, который проверяет ширину ввода при нажатии клавиши и соответствующим образом изменяет размер кнопки:

 const input = document.querySelector('input'); 
const button = document.querySelector('button'); 
 
input.addEventListener('keyup', () => { 
  // Получаем ширину ввода
  const inputWidth = input.getBoundingClientRect().width; 
 
  // Устанавливаем ширину кнопки равным ширине ввода
  button.style.width = inputWidth + 'px'; 
}); 

Он прослушивает события нажатия клавиш на входе и получает текущую ширину с помощью getBoundingClientRect(). Затем он устанавливает ширину кнопки в соответствии с шириной ввода, гарантируя, что текст не будет находиться за кнопкой.

Несколько вещей, на которые следует обратить внимание:

• Обязательно расположите кнопку абсолютно справа от ввода.
• Добавьте правое дополнение к вводу, чтобы текст не касался кнопки.
• Возможно, потребуется также отрегулировать расположение кнопок при изменении размера.