hexlet-correction
hexlet-correction copied to clipboard
Hexlet
Bug: long url breaks the layout
Summary
table does not fit into a column if the url is very long
Reproduction steps
Add a typo with the url, like `https://guides.hexlet.io/ru/bootstrap/?_gl=1*uafu67*_ga*MTAwNjg4MjEyNC4xNjg5MzIxNTQw*_ga_PM3R85EKHN*MTY5MDU0NjAzOC4xMTQuMS4xNjkwNTQ2MDk4LjAuMC4w*_ga_WWGZ6EVHEY*MTY5MDU0NjAzOC4xMTMuMC4xNjkwNTQ2MDM4LjYwLjAuMA..` (и более)
Expected result
The layout looks correct, the table is arranged in two columns
Actual result
In the screenshot.
Browsers
Chrome
OS
Linux
Можно ограничить отображаемую ссыылку url. Либо посмотреть, можно ли сделать перенос текста с помощью css
Может имеет смысл ещё и срезать query params и сохранять нормализованный url? По факту они не имеют смысла в рамках наших задач (виджет будет вешатьтся на всю страничку, а не страничку с query params)
Таким образом ещё можно избежать баги с сохранением одной и той же странички, но с разными query params
@bazilval параметры могут использоваться на страницах в форме. Представьте что у вас 10к записей (тех же опечаток), и пользователь (например в интернет магазине) прислал опечатку. Если вы просто глянете на страницу, то не найдете в чем дело. Поэтому важно нам иметь доступ к странице и открывать ее.
Скорее всего нужно делать обрезку обрезку ссылки или поправить верстку. Но ссылку оставлять оригинальную. Плюсом думаю должна быть кнопка типа "перейти по ссылке опечатки"
@fey мне казалось, что виджет нам отдаёт фактическую ссылку, когда делает пост-запрос для публикации репорта. Оттуда мы и можем взять актуальную для конкретной опечатки ссылку и переходить по ней.
А здесь речь об общей ссылке, характеризующей страницу, куда добавлен виджет.
@fey а, только теперь увидел, что речь именно про ссылку в опечатке
я просто смотрел на ссылку, которая в воркспейсе и там тоже вёрстка едет некрасиво, когда длинная ссылка
@fey тогда думаю можно сделать так, что в таблице с опечатками url отображаются сокращёнными с многоточием на конце и при этом являются активными ссылками, чтобы можно было сразу перейти
возможно даже вообще имеет смысл скрыть ссылку, чтобы просто была активная ссылка "Ссылка"
Прятать пока не нужна, а обрезать - скорее всего. Я бы глянул в сторону верстки наверное, кажется что через нее должно решаться
@fey Ну я через вёрстку и предлагаю, просто ссылке можно навесить класс Bootstrap "text-truncate" и style="max-width:450px;", получится вот так:
@bazilval ок, давайте. Только почему 450px? Еще, я бы показал ПР (когда появится) верстальщикам Хекслета, чтобы посмотрели и дали совет как лучше сделать.
Ну вот с этим надо ещё решить, да Пусть верстальщики скажут как лучше Я отталкивался от того, что при масштабе 100% это максимальная ширина, при которой не переносятся остальные колонки
Я отталкивался от того, что при масштабе 100% это максимальная ширина, при которой не переносятся остальные колонки
да, но это же от ширины экрана зависит?) У меня например есть второй монитор, он почти квадратный)
@fey Probably I fixed this bug. Please, check the screenshot. Now a long url doesn't break layout. In case of long text there the line just breaks to the next line.
