Contribute element container exceeds screen width on mobile OWASP#919

srinjoy933 · Feb 28, 2025 · f48dfa3 · f48dfa3
1 parent 6b35f69
commit f48dfa3
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 13 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,13 +1,86 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/png" href="https://owasp.org/www--site-theme/favicon.ico" />
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" type="image/png" href="https://owasp.org/www--site-theme/favicon.ico">
     <title>OWASP Nest</title>
-  </head>
-  <body>
-    <div id="root"></div>
+    <style>
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background-color: #f8f9fa;
+        }
+
+        #root {
+            width: 100%;
+            max-width: 600px; 
+            padding: 10px;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 100%;
+            padding: 16px;
+            background: #ffffff;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+        }
+
+
+        .contribute {
+            width: 100%;
+            max-width: 100%;
+            padding: 16px;
+            background: #f1f1f1;
+            border-radius: 8px;
+            text-align: center;
+        }
+
+        .projects {
+            width: 100%;
+            max-width: 100%;
+            padding: 16px;
+            background: #e3e3e3;
+            border-radius: 8px;
+            text-align: center;
+        }
+
+
+        @media (max-width: 768px) {
+            .container, .contribute, .projects {
+                width: 100%;
+                max-width: 100%;
+                padding: 12px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="root">
+        <div class="container">
+            <h1>Welcome to OWASP Nest</h1>
+            <div class="projects">
+                <h2>Projects</h2>
+                <p>Explore various security projects.</p>
+            </div>
+            <div class="contribute">
+                <h2>Contribute</h2>
+                <p>Join and contribute to the community.</p>
+            </div>
+        </div>
+    </div>
     <script type="module" src="/src/main.tsx"></script>
-  </body>
+</body>
 </html>
diff --git a/frontend/src/components/MultiSearch.tsx b/frontend/src/components/MultiSearch.tsx
@@ -88,16 +88,14 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
       if (event.key === 'Escape') {
         setShowSuggestions(false)
       } else if (event.key === 'Enter' && highlightedIndex !== null) {
-        const { index, subIndex } = highlightedIndex
-        const suggestion = suggestions[index].hits[subIndex]
+        const { index, subIndex } = highlighted       const suggestion = suggestions[index].hits[subIndex]
         handleSuggestionClick(suggestion, suggestions[index].indexName)
       } else if (event.key === 'ArrowDown') {
         event.preventDefault()
         if (highlightedIndex === null) {
           setHighlightedIndex({ index: 0, subIndex: 0 })
         } else {
-          const { index, subIndex } = highlightedIndex
-          if (subIndex < suggestions[index].hits.length - 1) {
+          const { index, subIndex } = highlighted         if (subIndex < suggestions[index].hits.length - 1) {
             setHighlightedIndex({ index, subIndex: subIndex + 1 })
           } else if (index < suggestions.length - 1) {
             setHighlightedIndex({ index: index + 1, subIndex: 0 })