fixed table width completed games

[Surtt]

closes #965
Поправил ширину completed games. Но на мобилке данная таблица отображается со скроллом. Это было до внесения мной изменений. Может стоит сделать отдельный ишью на проработку данной таблицы для мобилки?

[codecov-commenter]

Codecov Report

Merging #1011 (15d3d31) into master (c4d6365) will increase coverage by 0.05%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #1011      +/-   ##
==========================================
+ Coverage   72.88%   72.93%   +0.05%     
==========================================
  Files         108      108              
  Lines        1966     1966              
==========================================
+ Hits         1433     1434       +1     
+ Misses        533      532       -1     

Impacted Files	Coverage Δ
...es/app/lib/codebattle_web/channels/game_channel.ex	80.30% <0.00%> (-6.07%)	⬇️
services/app/lib/codebattle/bot/player_server.ex	66.66% <0.00%> (+2.89%)	⬆️
...es/app/lib/codebattle_web/channels/chat_channel.ex	100.00% <0.00%> (+3.33%)	⬆️
services/app/lib/codebattle/bot/chat_client.ex	8.69% <0.00%> (+8.69%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c4d6365...15d3d31. Read the comment docs.

[ReDBrother]

Ребят, свою стилизация таблиц стараемся не писать, пользоваться бутстрапом по максимуму.

[Surtt]

Ребят, свою стилизация таблиц стараемся не писать, пользоваться бутстрапом по максимуму.

Я к сожалению не нашел нативного решения бутстрапа или другого подходящего решения. Все что нашел, это именно table-layout

[vtm9]

давай подождем гуру верстки @amshkv , если он одобрит, смержим

[amshkv]

что вижу я:
таблица плывет на разных данных и много кастома

Несколько смущает tr, у которой display: flex - несколько контринтуитивно
Если table-layout: fixed; работает и нам помогает - можно заюзать, но тогда класс надо сделать через cb префикс (или x)

Ну и когда задана жесткая ширина - с адаптивом не очень понятно что происходит (и когда юзеры с длинными именами)

В чем основная беда - в том что таблицы это динамическая сущность и в зависимости от данных в ней могут меняться размеры столбцов и прочее, от этого таблица будет выпадать вовне

Что мы можем сделать?

1. поправить лейаут: на первый взгляд кажется что для xl-дисплеев нет ничего зазорного сделать сайдбар для xl разрешения в 3 ряда, а таблицу в 9 (если это не влияет на идеи дизайна). Можно так же изменить контейнер-родитель до container-xl, чтобы на lg было больше места
2. сейчас очень огромная дата, можно попробовать ее сократить в размере и тут мы еще немного выиграем места
3. table-responsive можно постараться подобрать под размер, когда у нас ломаются данные, например сделать для lg или для md, единственное надо проверить границу
4. большие отступы у колонок, например у колонок с сложностью, может их стоит подредактировать на разных дисплеях?

Что еще заметил попутно:
table-sm и p-3 у ячеек противоречат друг другу
для верстки колонок без отступов понятнее делать .row.no-gutters, а не .col.p-0

Итого: верстать таблицы - одно из самых неприятных :pepe:
ПыСы: Будет нужна помощь, я на связи

[imamatory]

Имя класса выглядит так, как будто его можно переиспользовать, но width: 790px; говорит об обратном.
Предлагаю придумать более специфичное имя для селектора.

[vtm9]

@Surtt , спасибо за ПР, пока временно его закрою, если будут силы внести правки и обновить мастер, будет круто!