Mobile: added some new mobile styles

src/App.css

@@ -53,6 +53,7 @@
   flex-direction: column;
   position:fixed;
   right: 0px;
+  top: 0px;
 }
 
 .outer{
@@ -93,11 +94,11 @@
   display: none;
 }
 
-@media only screen and (min-device-width: 480px) and (max-device-width: 812px) and (orientation: landscape) {
+/* @media only screen and (min-device-width: 480px) and (max-device-width: 812px) and (orientation: landscape) {
   .sidebar{
     top: 0;
   }
-}
+} */
 
 @media screen and (min-width: 1440px){
   .wrapper{
@@ -110,6 +111,7 @@
   }
 
   .sidebar{
+    top: unset;
     right: 10px;
   }
   .tooltip {

src/Main.tsx

@@ -47,6 +47,8 @@ const Main = (props: IProps) => {
     window.location.reload();
   }
 
+  let h = window.innerHeight;
+
   return (
 
     <div className="App">
@@ -68,9 +70,10 @@ const Main = (props: IProps) => {
               )
             })}
           </div>
-          <div className={minimizeChatbot ? "hidden" : "sidebar"}>
+          <div className={minimizeChatbot ? "hidden" : "sidebar"} style={{height: h}}>
             {!props.twoPlayers ?
               <Chatbot
+                height={h}
                 character={props.dbCharacter}
                 onHandleResetCards={() => setResetCards(true)}
                 onWin={onWin}

src/components/Chatbot/Chatbot.module.css

@@ -1,6 +1,6 @@
 .container{
-    margin: 20px;
-    border-radius: 10px;
+    /* margin: 20px; */
+    /* border-radius: 10px; */
     color: black;
     background-color: white;
 }
@@ -13,7 +13,7 @@
     justify-content: center;
     background-color: #ebc934;
     height: 70px;
-    border-radius: 10px 10px 0px 0px;
+    /* border-radius: 10px 10px 0px 0px; */
     width: 100%;
     font-size: 14px;
 }

src/components/Chatbot/Chatbot.tsx

@@ -4,6 +4,7 @@ import styles from './Chatbot.module.css';
 import Question from '../Question/Question';
 
 interface IProps {
+    height: number;
     character: ICharacter | null;
     onWin: (win: boolean) => void;
     win: boolean | null;
@@ -42,9 +43,9 @@ const Chatbot = (props: IProps) => {
     }, []);
 
     return (
-        <div className={styles.container}>
+        <div className={styles.container} style={{height: props.height}}>
             <div className={styles.header}><span className={styles['hat-image']}></span>Hat Chat <button onClick={() => props.setMinimize(true)} /></div>
-            <div className={styles.chat} ref={chatEl}>
+            <div className={styles.chat} ref={chatEl} style={{height: props.height - 160}}>
                 {messageState ? messageState.map((m, key) => (
                     <div key={key} className={!m.fromUser ? styles.chatbox : styles['user-chatbox']}>
                         <div key={key}>

src/components/Question/Question.module.css

@@ -7,7 +7,7 @@
     padding: 10px;
     height: 70px;
     background-color: #ededed;
-    border-radius: 0px 0px 10px 10px;
+    /* border-radius: 0px 0px 10px 10px; */
 }
 
 .questions div{
@@ -50,7 +50,7 @@ form button{
     border-radius: 0px 10px 10px 0px;
     position: absolute;
     height: 26px;
-    right: 30px;
+    right: 10px;
     width: 28px;
     border-color: transparent transparent transparent #2F751C;
     background-repeat: no-repeat;