codebattle Bug: Некорректное отображение верстки слайдера Lobby

Summary

Появляется просвет справа в слайдер при просмотре на iPhone SE

Environment: Google Chrome Версия 124.0.6367.201 (Официальная сборка), (64 бит) OS: MacOS Current version: https://github.com/hexlet-codebattle/codebattle/commit/f616d68e9e3ef244330c1c6e05b5dcd77eca7a37 Эмуляция iPhone SE Снимок экрана 2024-05-22 в 20 16 31

Reproduction steps

1. Авторизоваться
2. Открыть главную страницу

Expected result

У слайдера Lobby нет просвета справа

Actual result

У слайдера Lobby есть просвет справа

Browsers

Chrome

OS

Mac

May 22 '24 16:05 Slepish

Summary: Некорректно отображается интерфейс на мобильной версии сайта

Environment: Yandex 24.6.0.1874 (64-bit) OC Windows 11

Steps-to-reproduce:

Авторизоваться
Открываем Devtools
Выбираем режим адаптивного дизайна и устройство, например iphone SE
Создаём игру с параметрами, например (Уровень-1, Тип игры-with a bot, время-8 min, название-rect_area)

Expected-result: Интерфейс корректно отображается

Actual-result: Интерфейс отображается некорректно

Jun 22 '24 07:06 inevitable123455

Некорректно отображается интерфейс сайта на мобильном устройстве

environment: Firefox, Chrome 23H2 (Официальная сборка) (64 бит) ОС Windows 11

steps-to-reproduce: 1. Открываем сайт в браузере https://codebattle.hexlet.io/ 2. Авторизоваться 3. Открываем "DevTools" 4. Нажимаем на значок "Переключение панели инструментов устройств" 6. Выбираем iPhone SE

expected-result:

Корректно отображается интерфейс сайта на мобильном устройстве

    actual-result:

Некорректно отображается интерфейс сайта на мобильном устройстве iPhone SE

Jul 04 '24 19:07 Eris1389

summary: | Проверка наличия мобильной версии сайта

environment: | Версия сайта :e6ec4dc Google Chrome 123.0.6312.122 (Официальная сборка) (64 бит) ОС Windows 10

steps-to-reproduce: |

Войти на сайт https://codebattle.hexlet.io/

Авторизоваться

Открыть инструмент разработчика DevTools

В инструменте разработчика выбираем toggle divice toolbar

Выбираем Iphone SE

expected-result: | Верстка не плывет, все отображается корректно

actual-result: | Плывет верстка Lobby

Jul 13 '24 07:07 AlexNurseos

Summary: The site interface is incorrectly displayed on mobile devices

Environment: Yandex Browser 24.7.1.1076 (64-bit) ОС Windows 10 22H2 Version: d1efd63e6a79f79fff4b4fd4273f6757f5df8cdb

Prerequisites:

DevTools: Toggle device toolbar: iPhone XR
Open https://codebattle.hexlet.io/
Authorize

Steps-to-reproduce: 1. Open the lobby page https://codebattle.hexlet.io/#lobby

Expected-result: Displaying game list scrolling sidebars in the “lobby” section covers the workspace

Actual-result: Displaying game list scroll sidebars in the “lobby” section does not cover the workspace Elements: Scroll sidebars: position-absolute h-100 z-3 cb-left-scroll-control pr-2 start-0 d-block Workspace: nav-tabContent The bug occurs when you select a display height greater than 854

workspace bug

Aug 26 '24 20:08 HEAMY7QA

summary: | The site interface is incorrectly displayed on a mobile device environment: | Current version 8a20565 Yandex Browser 24.7.0.2379 (64-bit) Windows 10 OS steps-to-reproduce: | Log in to https://codebattle.hexlet.io/ Authorize Open the DevTools developer tool (F12) In the developer toolbar select toggle divice toolbar (ctr+shfit+m) Select Iphone XR (for example) expected-result: | Layouts do not float, everything is displayed correctly. actual-result: | Lobby, Tournaments, History layout is floating.

Aug 27 '24 12:08 FROSTECKI31

The site is displayed incorrectly on mobile devices, layout fails

Description: Windows 10 Home, version 22H2 Google Chrome version 131.0.6778.86 (Official build), (64 bit) Codebattle [Current version: bb44a99 ]

Steps:

Open https://codebattle.hexlet.io/ Open DevTools Change the adaptation to a mobile device, e.g. Pixel 7

Expected result: The interface is displayed correctly

Actual result: Sidebars in the lobby are displayed incorrectly on mobile devices верстка

Nov 25 '24 14:11 avstlr

Summary: Проверка наличия мобильной версии сайта

environment: Firefox версия 131.0.3 (64-битная) Microsoft Windows [Version 10.0.19045.5011]

steps-to-reproduce:

Открыть сайт https://codebattle.hexlet.io/
Авторизоваться
Открываем Devtools
Выбираем режим адаптивного дизайна и устройство, например Samsung Galaxy S20 ,Android 11

expected-result: Верстка отображается корректно

actual-result: Плывет верстка Lobby

Jan 12 '25 13:01 TatianaPr27

Summary: Некорректное отображение сайта с мобильного устройства

Environment: Google Chrome 130.0.6723.78 (Официальная сборка) OS: MacOS Эмуляция Iphone 14 Pro Max

Steps-to-reproduce: -Открыт сайт https://codebattle.hexlet.io/ -Авторизоваться -Открыть главную страницу -Открыть инструмент разработчика "DevTools"
-Нажимать на "Переключение панели инструментов устройств"
-Выбрать устройство: Iphone 14 Pro Max

Expected-result: Интерфейс сайта на мобильном устройстве отображается корректно

Actual-result: Интерфейс сайта на мобильном устройстве отображается некорректно:

Неккоректное отображение раздела "LOBBY" (скриншот 1)
Некорректное отображение раздела "COMPLETED GAMES" (скриншот 2)
Некорректное отображение раздела "TASK", неадаптивная таблица для мобильной версии (скриншот 3,4,5)
Некорректное отображение раздела "USERS RATING", неадаптивная таблица для мобильной версии (скриншот 6,7)
Некорректное отображение раздела "TOURNAMENTS", неадаптивная таблица для мобильной версии (скриншот 8,9)

Jan 23 '25 20:01 anastasiasemakina

Summary: Incorrect display of layout on the Lobby, Tournaments, History, Create a game pages

Steps to reproduce:

Open the main page of the site
Open "DevTools"
8Select device: iPhone 14 Pro Max

Expected result: Layout on pages Lobby, Tournaments, History, Create a game pages is displayed correctly

Actual result: Layout is not displayed correctly on pages Lobby, Tournaments, History, Create a game pages

Environment: Mac OS 15.3.1 (24D70) Safari 18.3 (20620.2.4.11.5), GC

Attachment

Feb 27 '25 13:02 ElenaKazakova124

Bug: Mobile layout breaks match carousel centering and visibility

Summary: When viewing the site on mobile devices, in particular on an iPhone SE with a resolution of (375px), the carousel of matches, tournaments and matches history on the homepage does not centre the them properly. The matches are offset and partially off-screen, making it difficult to clearly display the selected match. This affects the usability and visual integrity of the interface.

Replay steps:

Open https://codebattle.hexlet.io/
Open Chrome DevTools (F12)
Switch to a mobile phone emulation (e.g. iPhone SE 375×667)
Watch the match carousel in the Lobby section of
Swipe between matches
Do the same in tournaments and matches history carousel

Expected result: Each match card should be fully centred within the visible viewing window when swiping. Transitions between cards should maintain the centring of the focused card.

Actual result: Cards are partially off-screen and the centring is broken. Swiping does not keep the card centred, resulting in overlapping or visual clipping.