(fix): Mobile grid columns

src/app/modules/pro/channel/channel.component.scss

@@ -86,6 +86,7 @@ m-pro--channel {
  max-width: 200px;
  max-height: 100%;
  cursor: pointer;
+ object-fit: contain;
  }
 
  .m-proChannelTopbar__logo:focus {

src/app/modules/pro/channel/hamburger-menu/hamburger-menu.component.scss

@@ -51,8 +51,9 @@ m-pro__hamburger-menu {
 
  &.m-pro__hamburger-menu-menu__logo {
  > img {
- width: auto;
- height: 100px;
+ max-width: 200px;
+ max-height: 100%;
+ object-fit: contain;
  margin-left: -4px;
  }
  }

src/app/modules/pro/channel/home/home.component.scss

@@ -56,7 +56,7 @@
  }
 
  @media screen and (max-width: $max-mobile) {
- grid-template-columns: repeat(1, 1fr);
+ grid-template-columns: 100%;
 
  *:nth-child(1) {
  grid-column: initial;
@@ -68,7 +68,7 @@
  grid-template-columns: repeat(2, 1fr);
 
  @media screen and (max-width: $max-mobile) {
- grid-template-columns: repeat(1, 1fr);
+ grid-template-columns: 100%;
  }
  }
 }

src/app/modules/pro/channel/list/list.component.scss

@@ -78,11 +78,11 @@ m-pro--channel-list {
  padding: 0;
 
  @media screen and (max-width: $max-mobile) {
- grid-template-columns: 1fr;
+ grid-template-columns: 100%;
  }
 
  &.m-proChannelListContent__normalList {
- grid-template-columns: 1fr;
+ grid-template-columns: 100%;
 
  & > li {
  max-width: 500px;

src/app/modules/pro/channel/tiles/media/tile.component.scss

@@ -33,6 +33,11 @@ m-pro--channel-tile {
  display: flex;
  align-items: center;
 
+ @media screen and (max-width: $max-mobile) {
+ padding: 8px;
+ font-size: 16px;
+ }
+
  h2 {
  display: block;
  text-overflow: ellipsis;