diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index c8b182196..aba266fcc 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -34,14 +34,15 @@ } .channel-info { + // Use the same margin as the videos grid @include grid-videos-miniature-margins(false, 15px); + @include margin-bottom(3rem); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; background-color: pvar(--channelBackgroundColor); - margin-bottom: 45px; padding-top: var(--myGlobalTopPadding); font-size: var(--myFontSize); } @@ -68,24 +69,26 @@ .channel-buttons { display: flex; + align-items: center; flex-wrap: wrap; + gap: 1rem; - > *:not(:last-child) { - @include margin-right(15px); + &.right { + @include margin-left(3rem); } -} -.channel-buttons.right { - @include margin-left(45px); -} + // Only used on small screen + &.bottom { + @include margin-bottom(2rem); -// Only used by mobile -.channel-buttons.bottom { - display: none; + justify-content: center; + display: none; + } } .owner-card { @include margin-left(105px); + grid-column: 2; // Takes all the column grid-row: 1 / 3; @@ -194,14 +197,14 @@ display: inline-block; } - .channel-buttons.bottom { - display: flex; - justify-content: center; - margin-bottom: 30px; - } + .channel-buttons { + &.right { + display: none; + } - .channel-buttons.right { - display: none; + &.bottom { + display: flex; + } } .owner-card { diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss index 889596b62..972731116 100644 --- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss +++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss @@ -4,6 +4,8 @@ .btn-group-subscribe { @include peertube-button; + padding: 0; + button.dropdown-toggle { font-size: $button-font-size; line-height: 1.2;