Fix content toggles and Header Title

ui/component/livestreamComments/view.jsx

@@ -202,7 +202,7 @@ export default function LivestreamComments(props: Props) {
     <div className="card livestream__discussion">
       <div className="card__header--between livestream-discussion__header">
         <div className="livestream-discussion__title">
-          {__('Live discussion')}
+          {__('Live Chat')}
 
           <Menu>
             <MenuButton className="menu__button">

ui/scss/component/_livestream.scss

@@ -54,11 +54,26 @@ $recent-msg-button__height: 2rem;
   margin-bottom: 0;
   align-items: center;
 
+  .recommended-content__toggles {
+    button {
+      height: unset;
+      padding: 5px;
+    }
+
+    .button__label {
+      max-height: 18px;
+    }
+  }
+
   @media (min-width: $breakpoint-small) {
     height: $discussion-header__height;
     padding: 0 var(--spacing-s);
     padding-right: 0;
   }
+
+  @media (max-width: $breakpoint-small) {
+    padding: var(--spacing-xxs);
+  }
 }
 
 .livestream-discussion__title {
@@ -68,8 +83,10 @@ $recent-msg-button__height: 2rem;
   align-items: center;
   padding: 0;
 
-  .menu__button {
-    margin-left: var(--spacing-xs);
+  @media (min-width: $breakpoint-small) {
+    .menu__button {
+      margin-left: var(--spacing-xxs);
+    }
   }
 }
 

ui/scss/component/_main.scss

@@ -157,6 +157,10 @@
     width: 35rem;
     margin-left: var(--spacing-m);
 
+    .card__header--between {
+      align-items: center;
+    }
+
     @media (max-width: $breakpoint-medium) {
       width: 100%;
       margin-left: 0;

ui/scss/component/_search.scss

@@ -128,14 +128,17 @@
 }
 
 .recommended-content__toggles {
-  margin-top: var(--spacing-xs);
-  margin-right: var(--spacing-xs);
+  display: flex;
 
   button {
     padding: 0 var(--spacing-xs);
     height: 2rem;
     max-width: 15rem;
   }
+
+  @media (min-width: $breakpoint-small) {
+    margin-right: var(--spacing-xs);
+  }
 }
 
 .search__channel {