Added mobile chat and some responsiveness

weird 0 popping out when toggling chat. wasn't able to find which
component is responsible. Used bare mininum scss. May refactor in the
future.

web/components/ui/Sidebar/Sidebar.module.scss

@@ -0,0 +1,12 @@
+.root {
+  background-color: var(--gray-700);
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .root {
+    display: flex;
+  }
+}
+
+

web/components/ui/Sidebar/Sidebar.tsx

@@ -1,8 +1,8 @@
 import Sider from 'antd/lib/layout/Sider';
 import { useRecoilValue } from 'recoil';
-import { useEffect } from 'react';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import ChatContainer from '../../chat/ChatContainer';
+import s from './Sidebar.module.scss';
 import {
   chatMessagesAtom,
   chatVisibilityAtom,
@@ -18,6 +18,7 @@ export default function Sidebar() {
 
   return (
     <Sider
+      className={`${s.root}`}
       collapsed={chatVisibility === ChatVisibilityState.Hidden}
       collapsedWidth={0}
       width="100%"