merged from master

dashboard_static/style/responsive.css

@@ -9,6 +9,7 @@
 @media only screen and (max-width: 850px) {
     .maintable {
         grid-template-columns: 1fr;
+        grid-template-rows: 1fr 100%;
     }
     .header-title {
         display: none;
@@ -22,6 +23,15 @@
     .colheader {
         font-size: 32px;
     }
+    .popchart {
+        display: none;
+    }
+    .leftcol {
+        overflow-y: auto;
+    }
+    .rightcol {
+        grid-row: 1;
+    }
 
 }
 

dashboard_static/style/style.css

@@ -267,33 +267,57 @@ body {
 	user-select: none;
 }
 
-.sort-btn {
+.sort-by {
 	user-select: none;
-	position: relative;
+	display: flex;
+	padding: 8px;
+}
+
+.sort-by-title {
+	font-size: 24px;
+	font-weight: 500;
+	margin-right: 8px;
 }
 
 .sort-dropdown {
-	display: none;
+	display: flex;
+	align-items: flex-start;
+	position: relative;
 }
 
 .sort-dropdown-list {
 	/* position: absolute; */
-	width: 100%;
 	list-style-type: none;
     padding: 0;
     margin: 0;
-	margin-left: -8px;
-	background-color: var(--main-light);
-	border-radius: 0 0 16px 16px;
+	background-color: white;
+	width: 150px;	
+	border-radius: 16px;
+}
+
+.material-symbols-outlined.sort-btn {
+	position: absolute;
+	right: 0;
+	top: 5px;
+	color: black;
+	font-size: 26px;
+}
+
+.sort-dropdown-list li:not(:first-of-type) {
+	display: none;
+}
+
+.sort-dropdown-list li:not(:first-of-type):hover {
+	background-color: rgb(215, 215, 215);
 }
 
 .sort-dropdown-list li {
+	color: #1E1E1E;
 	font-weight: 500;
 	font-size: 22px;
 	padding: 0 8px;
 }
 
-.radius-bottom {
-	border-bottom-left-radius: 16px;
-	border-bottom-right-radius: 16px;
+.current-sort {
+	line-height: 36px;
 }