style revisions for phone

Author: cledantec

experiment-7/assets/css/style.css

@@ -207,6 +207,10 @@ body {
     /* height: 80vh; */
   }
 
+  #category-pie-chart {
+    height: 300px !important;
+  }
+
   .current-date {
     font-size: 1em !important;
   }
@@ -218,13 +222,18 @@ body {
 .chat-main-container {
   position: relative;
   z-index: 20;
-  background: rgba(255, 255, 255, 0.6);
+  /* background: rgba(255, 255, 255, 0.6); */
   padding: 0 0 15px;
   height: 40vh;
   width: 100%;
-  border-radius: var(--border-radius-medium);
+  /* border-radius: var(--border-radius-medium);
   border: 1px solid var(--highlight);
-  box-shadow: var(--shadow-inner);
+  box-shadow: var(--shadow-inner); */
+  border-radius: var(--border-radius-medium);
+  border-bottom: 1px solid var(--highlight);
+  border-left: 1px solid var(--highlight);
+  border-right: 1px solid var(--highlight);
+
 }
 
 .chat-messages-wrapper {
@@ -273,6 +282,14 @@ body {
 }
 
 .chat-input-container {
+  position: absolute;
+  bottom: 0;
+  z-index: 1000;
+  width: 100%;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  background-color: rgba(250, 250, 250, .9);
+  ;
   border-top: 1px dotted var(--highlight);
   padding: var(--spacing-small);
 }
@@ -309,16 +326,11 @@ body {
   flex-direction: column;
 }
 
-.chat-messages-wrapper > div {
+.chat-messages-wrapper {
   flex: 1;
   overflow: overflow;
 }
 
-.chat-tabs-container {
-  display: flex;
-  border-bottom: 1px solid var(--highlight);
-}
-
 #chat-section-right .chat-input-container {
   display: flex;
   gap: var(--spacing-small);
@@ -327,37 +339,64 @@ body {
 .chat-content-container {
   border-top: none;
   background: transparent;
+  /* border-radius: var(--border-radius-medium); */
+  border: 1px solid var(--highlight);
+  border-top: none;
+  border-bottom: none;
+  box-shadow: var(--shadow-inner);
+  height: calc(100% - 32px);
+  overflow: hidden;
+
+}
+
+.chat-tabs-container {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  border-bottom: 1px solid var(--highlight);
 }
 
 .chat-tab {
-  padding: 10px 15px;
+  padding: 10px;
   cursor: pointer;
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(235, 235, 235, 0.7);
+  border-bottom: 1px solid var(--highlight);
+  /* margin-bottom: -1px; */
+  transition: all 0.2s ease;
+}
+
+#stats-tab {
+  width: 50%;
   border-top-left-radius: var(--border-radius-small);
   border-top-right-radius: var(--border-radius-small);
   border: 1px solid var(--highlight);
   border-bottom: none;
+  border-left: none;
   margin-right: 5px;
-  margin-bottom: -1px;
-  transition: all 0.2s ease;
+}
+
+#community-tab {
+  align-self: right;
+  width: 50%;
+  border-top-left-radius: var(--border-radius-small);
+  border-top-right-radius: var(--border-radius-small);
+  border: 1px solid var(--highlight);
+  border-bottom: none;
+  border-right: none;
 }
 
 .chat-tab.active {
   background-color: white;
-  border-bottom: 1px solid white;
+  border-bottom: 3px solid white;
   font-weight: bold;
+  margin-bottom: -1px;
 }
 
 .chat-tab:hover:not(.active) {
   background-color: rgba(255, 255, 255, 0.9);
 }
 
-.chat-content-container {
-  height: calc(100% - 100px);
-  overflow: hidden;
-}
-
-._dash-loading > ._dash-loading-callback {
+._dash-loading>._dash-loading-callback {
   display: block !important;
   visibility: visible !important;
   opacity: 1 !important;
@@ -405,7 +444,7 @@ body {
   padding: 0;
 }
 
-.collapsible-header.expanded + .collapsible-content {
+.collapsible-header.expanded+.collapsible-content {
   display: block;
   padding: 15px;
 }
@@ -585,6 +624,7 @@ body {
 }
 
 @keyframes pulsOut {
+
   0%,
   50% {
     box-shadow: 0 0 0 0 #fff;
@@ -641,4 +681,4 @@ body {
 .date-label {
   font-size: 1.1em;
   font-weight: 600;
-}
+}