From 3e04fb8a4b66662a5636fc153dad631785dcd18e Mon Sep 17 00:00:00 2001
From: luSteven01 <146397397+luSteven01@users.noreply.github.com>
Date: Thu, 31 Jul 2025 21:07:50 -0700
Subject: [PATCH] declared bankruptcy for changing classnames to tailwind css,
 removed light mode for now cause it was bugging out on me, and changed the
 input text to white

---
 api/main_endpoints/models/ChatMessage.js      |  2 --
 .../ShortcutKeyModal/SearchModal.css          | 15 ++++++++--
 .../ShortcutKeyModal/SearchModal.js           | 30 +++++++++++--------
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/api/main_endpoints/models/ChatMessage.js b/api/main_endpoints/models/ChatMessage.js
index 57bf95a5f..9f0238546 100644
--- a/api/main_endpoints/models/ChatMessage.js
+++ b/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);
-
-
diff --git a/src/Components/ShortcutKeyModal/SearchModal.css b/src/Components/ShortcutKeyModal/SearchModal.css
index 2f0ccef8c..3017c9167 100644
--- a/src/Components/ShortcutKeyModal/SearchModal.css
+++ b/src/Components/ShortcutKeyModal/SearchModal.css
@@ -8,8 +8,7 @@
     /* blurred background */
     display: flex;
     justify-content: center;
-    align-items: flex-start;
-    padding-top: 33vh;
+    align-items: center;
     z-index: 9999;
 }
 
@@ -17,7 +16,9 @@
     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;
+    }
+}
diff --git a/src/Components/ShortcutKeyModal/SearchModal.js b/src/Components/ShortcutKeyModal/SearchModal.js
index 09a748317..b2c528409 100644
--- a/src/Components/ShortcutKeyModal/SearchModal.js
+++ b/src/Components/ShortcutKeyModal/SearchModal.js
@@ -77,11 +77,11 @@ 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;
@@ -89,14 +89,18 @@ export default function SearchModal() {
               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>