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/chat/ChatContainer.tsx

@@ -4,6 +4,7 @@ import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import { ChatMessage } from '../../interfaces/chat-message.model';
 import { ChatState } from '../../interfaces/application-state';
 import ChatUserMessage from './ChatUserMessage';
+import { LoadingOutlined } from '@ant-design/icons';
 
 interface Props {
   messages: ChatMessage[];
@@ -15,10 +16,12 @@ export default function ChatContainer(props: Props) {
   const loading = state === ChatState.Loading;
 
   const chatContainerRef = useRef(null);
+  const spinIcon = <LoadingOutlined style={{fontSize: '32px'}} spin />
 
   return (
-    <div style={{ height: 'calc(100vh - 104.5px)' }}>
-      <Spin spinning={loading} />
+    <div>
+      <h1>Chat</h1>
+      <Spin spinning={loading} indicator={spinIcon} />
       <Virtuoso
         ref={chatContainerRef}
         initialTopMostItemIndex={999}