Added chat tab on mobile layouts and other changes to mobile UI

web/components/common/StreamInfo/StreamInfo.module.scss

@@ -0,0 +1,36 @@
+.streamInfo {
+  position: relative;
+  display: grid;
+}
+
+.buttonsLogoTitleSection {
+  margin-left: 1.5vw;
+  margin-right: 1.5vw;
+}
+
+.pageContentSection {
+  // background-color: var(--theme-background-secondary);
+  border-radius: var(--theme-rounded-corners);
+  width: 100%;
+}
+
+.logoTitleSection {
+  display: flex;
+  align-items: center;
+}
+
+.titleSection {
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--theme-text-primary);
+  }
+
+  .subtitle {
+    font-size: 1.6vw;
+    font-weight: bold;
+  }
+}

web/components/common/StreamInfo/StreamInfo.tsx

@@ -0,0 +1,28 @@
+import { useRecoilValue } from 'recoil';
+import { ClientConfig } from '../../../interfaces/client-config.model';
+import { clientConfigStateAtom } from '../../stores/ClientConfigStore';
+import { ServerLogo } from '../../ui';
+import CategoryIcon from '../../ui/CategoryIcon/CategoryIcon';
+import SocialLinks from '../../ui/SocialLinks/SocialLinks';
+import s from './StreamInfo.module.scss';
+
+export default function StreamInfo() {
+  const { socialHandles, name, title, tags } = useRecoilValue<ClientConfig>(clientConfigStateAtom);
+
+  return (
+    <div className={s.streamInfo}>
+      <div className={s.logoTitleSection}>
+        <ServerLogo src="/logo" />
+        <div className={s.titleSection}>
+          <div className={s.title}>{name}</div>
+          <div className={s.subtitle}>
+            {title}
+            <CategoryIcon tags={tags} />
+          </div>
+          <div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>
+          <SocialLinks links={socialHandles} />
+        </div>
+      </div>
+    </div>
+  );
+}