PR1: Added mobile sizing to the search modal

api/main_endpoints/models/ChatMessage.js

@@ -31,5 +31,3 @@ ChatMessageSchema.index({chatroomId: 1, createdAt: -1}); // sort by whatever is
 ChatMessageSchema.index({expiresAt: 1}, {expireAfterSeconds: 0}); // TTL index for automatic expiration
 
 module.exports = mongoose.model('ChatMessage', ChatMessageSchema);
-
-

src/Components/ShortcutKeyModal/SearchModal.css

@@ -8,16 +8,17 @@
     /* blurred background */
     display: flex;
     justify-content: center;
-    align-items: flex-start;
-    padding-top: 33vh;
+    align-items: center;
     z-index: 9999;
 }
 
 .shortcut-search-modal .input-wrapper {
     padding: 8px;
     background: white;
     border-radius: 8px;
-    width: 35rem;
+    width: 100%;
+    /* the default is the mobile size */ 
+    max-width: 500px;
 }
 
 .shortcut-search-modal input {
@@ -67,3 +68,11 @@
         background-color: #1e293b;
     }
 }
+
+/* Desktop mode */
+@media (min-width: 768px) {
+    .shortcut-search-modal .input-wrapper {
+        width: 35rem;
+        max-width: none;
+    }
+}

src/Components/ShortcutKeyModal/SearchModal.js

@@ -77,26 +77,30 @@ export default function SearchModal() {
 
     const topFiveItems = suggestions.slice(0, SHORTCUT_MAX_RESULT);
     return (
-      <ul className='suggestion-list'>
+      <ul className='suggestion-list bg-slate-800 text-[1.2rem] overflow-x-hidden mt-2'>
         {topFiveItems.map((r, index) => (
           <li
             key={r.path} // Use r.path as key
-            className={`suggestion-item ${index === selectItem ? 'active' : ''}`}
+            className={`h-16 flex items-center p-2 truncate cursor-pointer ${index === selectItem ? ' bg-slate-500 text-white rounded p-1' : ''}`}
             onMouseMove={() => setSelectItem(index)}
             onClick={() => {
               if (externalSiteRoute(r)) return;
               window.location.href = r.path;
               setOpen(false);
             }}
           >
-            <span style={{ marginRight: '0.5rem' }}>
-              {r.type === 'user' ? '👤' : '📄'}
-            </span>
-            <div className='text-wrapper'>
-              {r.pageName}
-              <div className='hidden-tab'>
-                {selectItem === index && (r.type === 'external_url' ? r.path : `${window.location.origin}${r.path}`)}
+            <div className='flex-col overflow-hidden'>
+              <div className='flex items-center truncate'>
+                <span className='mr-3'>
+                  {r.type === 'user' ? '👤' : '📄'}
+                </span>
+                <span className='font-bold truncate text-white'>
+                  {r.pageName}
+                </span>
               </div>
+              <span className="text-sm truncate text-gray-300">
+                {r.type === 'external_url' ? r.path : window.location.origin + r.path}
+              </span>
             </div>
           </li>
         ))}
@@ -274,14 +278,16 @@ export default function SearchModal() {
   if (!open) return null;
 
   return (
-    <div className='shortcut-search-modal'>
+    <div className='fixed inset-0 bg-black/40 backdrop-blur-sm flex justify-center items-center z-[9999]'>
       <div ref={modalRef}>
-        <div className='input-wrapper'>
+        <div className='p-2 bg-slate-800 rounded-lg w-full max-w-[500px] md:w-[35rem] md:max-w-none'>
           <input
             ref={inputRef}
             placeholder="Search here... (Ctrl + k)"
             value={keyword}
-            onChange={handleChanges} />
+            onChange={handleChanges} 
+            className='border-[1.5px] text-white border-gray-600 w-full rounded p-3 h-10 text-[1.2rem] bg-transparent focus:outline-sky-600'
+            />
           <SuggestionsList />
         </div>
         <div>