Merge pull request #560 from Utsavladia/Fix-for-mobile

Fixed chatbot for mobile screen and fixed Navbar at top
HimanshuNarware · May 30, 2024 · e7d0c54 · e7d0c54
2 parents 0e15b14 + fe1e3bc
commit e7d0c54
Show file tree

Hide file tree

Showing 4 changed files with 220 additions and 86 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/ChatAssistant/ChatAssistant.css b/frontend/src/ChatAssistant/ChatAssistant.css
@@ -1,13 +1,13 @@
 .chatbot {
-    position: fixed;
-    bottom: 0;
-    right:0;
-    margin-right:20px;
-    margin-bottom: 12px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  margin-right: 20px;
+  margin-bottom: 12px;
 }
 
 .react-chatbot-kit-chat-input {
-  outline:none;
+  outline: none;
 }
 
 .react-chatbot-kit-chat-inner-container {
@@ -37,24 +37,50 @@
 
 .react-chatbot-kit-chat-btn-send {
   background-color: #55a0ea;
-  height:45px;
+  height: 45px;
 }
 
-.Logo{
-  height:50px;
-  width:50px;
+.Logo {
+  height: 50px;
+  width: 50px;
   border-radius: 50px;
-  right:12px;
+  right: 12px;
 }
 
-.Avatar{
-  height:50px;
-  width:50px;
+.Avatar {
+  height: 50px;
+  width: 50px;
   border-radius: 50px;
 }
 
-.userAvatar{
-  height:50px;
-  width:50px;
-  border-radius:50px;
-}
+.userAvatar {
+  height: 50px;
+  width: 50px;
+  border-radius: 50px;
+}
+
+@media only screen and (max-width: 425px) {
+  .chatbot {
+    margin-right: 5px;
+    margin-bottom: 5px;
+  }
+
+  .react-chatbot-kit-chat-container {
+    width: 300px;
+    height: 400px;
+    padding-bottom: 30px;
+  }
+  .react-chatbot-kit-chat-message-container {
+    height: 350px;
+  }
+  .Avatar {
+    height: 36px;
+    width: 36px;
+    border-radius: 50px;
+  }
+  .userAvatar {
+    height: 36px;
+    width: 36px;
+    border-radius: 50px;
+  }
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -1,54 +1,52 @@
 :root,
 body,
 html {
-	overflow-x: hidden;
-	height: 100%;
+  overflow-x: hidden;
+  height: 100%;
 }
 
 * {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 body {
-	min-height: 100vh;
-	display: grid;
-	grid-template-rows: 1fr auto;
-	margin: 0;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-		"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-		"Helvetica Neue", sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	text-align: center;
-	background: linear-gradient(to left, #04121e, rgb(39, 2, 13), #021f23);
-	color: #8758f6;
-	position:relative;
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  background: linear-gradient(to left, #04121e, rgb(39, 2, 13), #021f23);
+  color: #8758f6;
+  position: relative;
+  padding-top: 32px;
 }
 
 .darkmode-layer,
 .darkmode-toggle {
   z-index: 35;
   position: absolute;
   bottom: 18px !important;
-
 }
 
 code {
-	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-		monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
 }
 
 img {
-	background: #ffffff;
-	padding: 3px;
-	margin: 5px;
-	border-radius: 40px;
-
+  background: #ffffff;
+  padding: 3px;
+  margin: 5px;
+  border-radius: 40px;
 }
 
 .darkmode--activated img {
-
-	filter: invert(1);
+  filter: invert(1);
 }