improve search for mobile (not fix)

packages/app/src/App.jsx

@@ -180,6 +180,7 @@ class ComtyApp extends React.Component {
 						sessionController: this.sessionController,
 					},
 					props: {
+						fillEnd: true,
 						bodyStyle: {
 							height: "100%",
 						}

packages/app/src/components/Layout/draggableDrawer/index.jsx

@@ -1,6 +1,7 @@
 // © Jack Hanford https://github.com/hanford/react-drag-drawer
 import React, { Component } from "react"
 import { Motion, spring, presets } from "react-motion"
+import classnames from "classnames"
 import PropTypes from "prop-types"
 import document from "global/document"
 import Observer from "react-intersection-observer"
@@ -329,8 +330,13 @@ export default class DraggableDrawer extends Component {
                             id={id}
                             style={containerStyle}
                             onMouseDown={this.onClickOutside}
-                            className="draggable-drawer"
                             ref={getContainerRef}
+                            className={classnames(
+                                "draggable-drawer",
+                                {
+                                    ["fill-end"]: this.props.fillEnd
+                                }
+                            )}
                         >
                             <Observer
                                 className={HaveWeScrolled}

packages/app/src/components/Layout/draggableDrawer/index.less

@@ -15,12 +15,15 @@
 	z-index: 40;
 
 	transition: background-color 0.2s linear;
+
 	overflow-y: hidden;
 	overscroll-behavior: none;
 
 	.draggable-drawer_body {
 		position: absolute;
 
+		z-index: 50;
+
 		bottom: 0px;
 
 		width: 100%;
@@ -29,20 +32,21 @@
 		height: fit-content;
 		max-height: 90%;
 
-		padding: 30px 10px 10px 10px;
-
 		background-color: var(--background-color-primary);
 
+		padding: 30px 10px 10px 10px;
+
 		border-top-left-radius: 8px;
 		border-top-right-radius: 8px;
-		z-index: 50;
 
 		.dragger-area {
 			width: 100%;
 			height: 50px;
 
 			position: absolute;
+
 			display: flex;
+
 			align-items: flex-start;
 			justify-content: center;
 
@@ -59,12 +63,14 @@
 				border-radius: 8px;
 			}
 		}
+	}
 
+	.draggable-drawer_body {
 		&::after {
 			content: "";
 
 			display: block;
-			position: fixed;
+			position: absolute;
 
 			left: 0;
 			bottom: 0;
@@ -79,4 +85,27 @@
 			transform: translateY(95%);
 		}
 	}
+
+	&.fill-end {
+		.draggable-drawer_body {
+			&::after {
+				content: "";
+
+				display: block;
+				position: absolute;
+
+				left: 0;
+				bottom: 0;
+
+				width: 100%;
+				height: 120px;
+
+				z-index: 45;
+
+				background-color: var(--background-color-primary);
+
+				transform: translateY(95%);
+			}
+		}
+	}
 }

packages/app/src/components/Searcher/index.jsx

@@ -154,7 +154,9 @@ export default (props) => {
         if (typeof props.model === "function") {
             result = await props.model(value)
         } else {
-            result = await SearchModel.search(value)
+            result = await SearchModel.search(value, {
+                limit_per_section: app.isMobile ? 3 : 5
+            })
         }
 
         if (typeof props.onSearchResult === "function") {

packages/app/src/components/Searcher/index.less

@@ -1,3 +1,53 @@
+html {
+    &.mobile {
+        .searcher {
+            display: flex;
+            width: 100%;
+            height: 100%;
+
+            overflow-y: scroll;
+
+            .searcher_results {
+                display: flex;
+
+                width: 100%;
+                height: 100%;
+
+                overflow-y: scroll;
+
+                .searcher_results_category {
+                    display: flex;
+                    flex-direction: column;
+
+                    padding: 0;
+
+                    gap: 5px;
+
+                    .searcher_results_category_header {
+                        font-size: 0.6rem;
+                    }
+
+                    .searcher_results_category_suggestions {
+                        padding: 0 15px;
+
+                        &#playlists {
+                            display: flex;
+                            flex-direction: column;
+
+                            padding: 0;
+
+                            .playlistItem {
+                                width: 100%;
+                                max-width: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 .searcher {
     position: relative;
 
@@ -14,6 +64,8 @@
     .results {
         border-radius: 10px;
 
+        width: 100%;
+
         overflow-x: hidden;
         overflow-y: overlay;
     }

packages/server/src/controllers/SearchController/endpoints/getSearch.js

@@ -6,7 +6,7 @@ export default {
     route: "/",
     middlewares: ["withOptionalAuthentication"],
     fn: async (req, res) => {
-        const { keywords = "" } = req.query
+        const { keywords = "", params } = req.query
 
         let suggestions = {}
 
@@ -20,7 +20,7 @@ export default {
                         { fullName: { $regex: keywords, $options: "i" } },
                     ]
                 },
-                limit: 5,
+                limit: params.limit_per_section ?? 5,
                 select: "username fullName avatar verified",
             },
             {
@@ -31,7 +31,7 @@ export default {
                         { title: { $regex: keywords, $options: "i" } },
                     ]
                 },
-                limit: 5,
+                limit: params.limit_per_section ?? 5,
             },
             {
                 id: "tracks",
@@ -43,7 +43,7 @@ export default {
                         { album: { $regex: keywords, $options: "i" } },
                     ]
                 },
-                limit: 5,
+                limit: params.limit_per_section ?? 5,
             }
         ]