From e14ff11dc6dd720443d31b72bfef13dd2457148f Mon Sep 17 00:00:00 2001
From: JoaquinBN <joaquinbressan@gmail.com>
Date: Mon, 6 Jul 2026 15:02:13 +0200
Subject: [PATCH 1/3] Fix mobile navigation and project dropdown

---
 frontend/src/components/Navbar.svelte         |   2 +-
 frontend/src/components/Sidebar.svelte        |  29 +++++
 .../SubmitContribution.svelte                 | 123 ++++++++++++++++--
 3 files changed, 139 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Navbar.svelte b/frontend/src/components/Navbar.svelte
index f3366506..c9909809 100644
--- a/frontend/src/components/Navbar.svelte
+++ b/frontend/src/components/Navbar.svelte
@@ -124,7 +124,7 @@
   });
 </script>
 
-<header class="bg-white relative z-50" style="border-bottom: 1.2px solid #e5e5e6;">
+<header class="bg-white sticky top-0 z-50 flex-shrink-0" style="border-bottom: 1.2px solid #e5e5e6;">
   <div class="navbar-inner flex items-center justify-between p-3">
     <!-- Left: Logo -->
     <div class="navbar-logo-wrap flex items-center gap-1 px-1 min-w-0">
diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
index 5a7e111d..a14ee75a 100644
--- a/frontend/src/components/Sidebar.svelte
+++ b/frontend/src/components/Sidebar.svelte
@@ -115,6 +115,28 @@
     }
   }
 
+  function handleSubmitContribution() {
+    trackEvent('submit_contribution_click', getAnalyticsContext({
+      surface: 'sidebar',
+    }));
+
+    if ($authState.isAuthenticated) {
+      push('/submit-contribution');
+    } else {
+      setConnectWalletIntent({
+        surface: 'sidebar',
+        cta_id: 'submit_contribution',
+      });
+      sessionStorage.setItem('redirectAfterLogin', '/submit-contribution');
+      const authButton = document.querySelector('[data-auth-button]');
+      if (authButton) authButton.click();
+    }
+
+    if (window.innerWidth < 768) {
+      isOpen = false;
+    }
+  }
+
   // A signed-in user who has not earned this category's role: the role's
   // subsections are shown but locked.
   function isRoleLocked(category) {
@@ -1044,6 +1066,13 @@
       </svg>
       <span class="text-[14px] font-medium tracking-[0.28px] {isActive('/how-it-works') ? 'text-[#6D5DD3]' : 'text-[#656567]'}">How it works</span>
     </button>
+    <button
+      onclick={handleSubmitContribution}
+      class="w-full flex items-center gap-2 px-3 py-2 rounded-[8px] transition-colors text-left {isActive('/submit-contribution') ? 'bg-[#eeedfb]' : 'hover:bg-[#f5f5f5]'}"
+    >
+      <img src="/assets/icons/add-line-sidebar.svg" alt="" class="w-4 h-4 flex-shrink-0">
+      <span class="text-[14px] font-medium tracking-[0.28px] {isActive('/submit-contribution') ? 'text-[#6D5DD3]' : 'text-[#656567]'}">Submit Contribution</span>
+    </button>
     {#if $authState.isAuthenticated}
       <button
         onclick={() => navigate('/my-submissions')}
diff --git a/frontend/src/components/portal/submit-contribution/SubmitContribution.svelte b/frontend/src/components/portal/submit-contribution/SubmitContribution.svelte
index f0b2615d..ca7677f6 100644
--- a/frontend/src/components/portal/submit-contribution/SubmitContribution.svelte
+++ b/frontend/src/components/portal/submit-contribution/SubmitContribution.svelte
@@ -84,6 +84,7 @@
   let loadingProjects = $state(false);
   let projectsError = $state(false);
   let selectedProject = $state("");
+  let showProjectDropdown = $state(false);
   let showTypeDropdown = $state(false);
   let searchQuery = $state("");
 
@@ -413,6 +414,11 @@
   let selectedProjectData = $derived(
     acceptedProjects.find((project) => String(project.id) === String(selectedProject)) || null
   );
+  let selectedProjectLabel = $derived(
+    selectedProjectData
+      ? `${selectedProjectData.title} (next v${selectedProjectData.next_milestone_version || 1})`
+      : "Select accepted project..."
+  );
 
   function spotsLeftLabel(count) {
     return `${count} ${Number(count) === 1 ? "spot" : "spots"} left`;
@@ -537,6 +543,7 @@
   function selectCategory(cat) {
     selectedCategory = cat;
     showTypeDropdown = false;
+    showProjectDropdown = false;
   }
 
   function selectType(t) {
@@ -555,6 +562,7 @@
     selectedMission = null;
     selectedMissionData = null;
     selectedProject = "";
+    showProjectDropdown = false;
     formData.contribution_type = t.id;
     showTypeDropdown = false;
     searchQuery = t.name;
@@ -579,6 +587,7 @@
       selectedMission = item.data.id;
       selectedMissionData = item.data;
       selectedProject = "";
+      showProjectDropdown = false;
       formData.contribution_type = item.parentType.id;
       showTypeDropdown = false;
       searchQuery = item.data.name;
@@ -615,6 +624,14 @@
     }, 200);
   }
 
+  function selectProject(project) {
+    selectedProject = String(project.id);
+    showProjectDropdown = false;
+    if (error === "Please select the accepted project this milestone belongs to.") {
+      error = "";
+    }
+  }
+
   // Evidence functions
   function addEvidenceSlot() {
     evidenceSlots = [
@@ -1114,7 +1131,8 @@
   }
 
   // Click outside listener for dropdown
-  let dropdownRef;
+  let dropdownRef = $state(null);
+  let projectDropdownRef = $state(null);
   function handleClickOutside(event) {
     if (
       showTypeDropdown &&
@@ -1123,6 +1141,13 @@
     ) {
       showTypeDropdown = false;
     }
+    if (
+      showProjectDropdown &&
+      projectDropdownRef &&
+      !projectDropdownRef.contains(event.target)
+    ) {
+      showProjectDropdown = false;
+    }
   }
 </script>
 
@@ -1493,7 +1518,7 @@
 
     {#if selectedType && isMilestoneType(selectedType)}
       <div
-        class="submit-panel flex flex-col gap-[12px] items-start p-[24px] rounded-[16px] shadow-[0px_4px_20px_0px_rgba(0,0,0,0.02)] bg-white border border-[#f5f5f5] w-full"
+        class="submit-panel linked-project-panel relative z-20 flex flex-col gap-[12px] items-start p-[24px] rounded-[16px] shadow-[0px_4px_20px_0px_rgba(0,0,0,0.02)] bg-white border border-[#f5f5f5] w-full overflow-visible"
       >
         <div class="flex items-start justify-between gap-3 w-full">
           <div>
@@ -1539,18 +1564,62 @@
             </p>
           </div>
         {:else}
-          <select
-            bind:value={selectedProject}
-            class="w-full h-[44px] rounded-[8px] border border-[#f5f5f5] bg-white px-[12px] font-['Switzer'] text-[14px] text-black tracking-[0.28px] focus:outline-none focus:border-black"
-            required={isMilestoneType(selectedType)}
-          >
-            <option value="">Select accepted project...</option>
-            {#each acceptedProjects as project}
-              <option value={project.id}>
-                {project.title} (next v{project.next_milestone_version || 1})
-              </option>
-            {/each}
-          </select>
+          <div class="project-dropdown-wrapper relative w-full" bind:this={projectDropdownRef}>
+            <button
+              type="button"
+              class="project-dropdown-trigger flex h-[44px] w-full items-center justify-between gap-3 rounded-[8px] border border-[#f5f5f5] bg-white px-[12px] text-left font-['Switzer'] text-[14px] text-black tracking-[0.28px] transition-colors hover:border-gray-300 focus:outline-none focus:border-black"
+              aria-haspopup="listbox"
+              aria-expanded={showProjectDropdown}
+              onclick={() => (showProjectDropdown = !showProjectDropdown)}
+            >
+              <span class="min-w-0 truncate {selectedProject ? 'text-black' : 'text-[#6b6b6b]'}">
+                {selectedProjectLabel}
+              </span>
+              <svg
+                class="h-4 w-4 flex-shrink-0 text-gray-500 transition-transform {showProjectDropdown ? 'rotate-180' : ''}"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M19 9l-7 7-7-7"
+                />
+              </svg>
+            </button>
+
+            {#if showProjectDropdown}
+              <div
+                class="project-dropdown-menu absolute left-0 right-0 top-[48px] z-[60] max-h-[280px] overflow-y-auto rounded-[8px] border border-[#f0f0f0] bg-white shadow-[0_18px_48px_rgba(31,42,68,0.16)]"
+                role="listbox"
+              >
+                {#each acceptedProjects as project}
+                  <button
+                    type="button"
+                    class="project-dropdown-option flex w-full flex-col items-start border-b border-[#f5f5f5] p-[12px] text-left last:border-0 transition-colors hover:bg-gray-50 {String(project.id) === String(selectedProject) ? 'bg-[#f0f0ff]' : ''}"
+                    role="option"
+                    aria-selected={String(project.id) === String(selectedProject)}
+                    onclick={() => selectProject(project)}
+                  >
+                    <span class="font-['Switzer'] text-[14px] font-medium text-black tracking-[0.2px]">
+                      {project.title}
+                    </span>
+                    <span class="mt-1 font-['Switzer'] text-[12px] text-[#6b6b6b]">
+                      Next milestone v{project.next_milestone_version || 1}
+                    </span>
+                    {#if project.github_url}
+                      <span class="mt-0.5 max-w-full truncate font-['Switzer'] text-[11px] text-gray-400">
+                        {project.github_url.replace(/^https?:\/\//, "")}
+                      </span>
+                    {/if}
+                  </button>
+                {/each}
+              </div>
+            {/if}
+          </div>
 
           {#if selectedProjectData}
             <div class="w-full rounded-[8px] border border-[#f0f0f0] bg-[#fafafa] p-[12px]">
@@ -2023,6 +2092,14 @@
 </div>
 
 <style>
+  .project-dropdown-wrapper {
+    isolation: isolate;
+  }
+
+  .project-dropdown-menu {
+    overscroll-behavior: contain;
+  }
+
   @media (max-width: 767px) {
     .submit-form-shell {
       max-width: 100% !important;
@@ -2074,6 +2151,7 @@
     }
 
     .type-selector-control,
+    .project-dropdown-trigger,
     .field-control {
       min-width: 0;
     }
@@ -2091,6 +2169,23 @@
       width: 100%;
     }
 
+    .linked-project-panel {
+      z-index: 20;
+    }
+
+    .project-dropdown-menu {
+      max-height: min(48vh, 280px);
+    }
+
+    .project-dropdown-option {
+      min-width: 0;
+    }
+
+    .project-dropdown-option span {
+      max-width: 100%;
+      overflow-wrap: anywhere;
+    }
+
     .type-dropdown-item {
       min-width: 0;
     }

From 21b4cacd04070eb80d9c396e000f3ac64cc93c94 Mon Sep 17 00:00:00 2001
From: JoaquinBN <joaquinbressan@gmail.com>
Date: Mon, 6 Jul 2026 16:05:41 +0200
Subject: [PATCH 2/3] Address mobile feedback

---
 frontend/src/components/Sidebar.svelte        |  32 ++---
 .../SubmitContribution.svelte                 | 117 ++++++++++++++++--
 2 files changed, 119 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
index a14ee75a..d0a55379 100644
--- a/frontend/src/components/Sidebar.svelte
+++ b/frontend/src/components/Sidebar.svelte
@@ -91,6 +91,12 @@
     }));
   }
 
+  function closeMobileSidebar() {
+    if (window.innerWidth < 768) {
+      isOpen = false;
+    }
+  }
+
   function navigate(path, requiresAuth = false, options = {}) {
     if (options.track !== false) {
       trackSidebarNav(path, {
@@ -101,18 +107,17 @@
     if (requiresAuth && !$authState.isAuthenticated) {
       setConnectWalletIntent({
         surface: 'sidebar',
-        cta_id: 'protected_nav',
+        cta_id: options.ctaId || 'protected_nav',
         target_route: path,
       });
       sessionStorage.setItem('redirectAfterLogin', path);
       const authButton = document.querySelector('[data-auth-button]');
       if (authButton) authButton.click();
+      closeMobileSidebar();
       return;
     }
     push(path);
-    if (window.innerWidth < 768) {
-      isOpen = false;
-    }
+    closeMobileSidebar();
   }
 
   function handleSubmitContribution() {
@@ -120,21 +125,10 @@
       surface: 'sidebar',
     }));
 
-    if ($authState.isAuthenticated) {
-      push('/submit-contribution');
-    } else {
-      setConnectWalletIntent({
-        surface: 'sidebar',
-        cta_id: 'submit_contribution',
-      });
-      sessionStorage.setItem('redirectAfterLogin', '/submit-contribution');
-      const authButton = document.querySelector('[data-auth-button]');
-      if (authButton) authButton.click();
-    }
-
-    if (window.innerWidth < 768) {
-      isOpen = false;
-    }
+    navigate('/submit-contribution', true, {
+      ctaId: 'submit_contribution',
+      track: false,
+    });
   }
 
   // A signed-in user who has not earned this category's role: the role's
diff --git a/frontend/src/components/portal/submit-contribution/SubmitContribution.svelte b/frontend/src/components/portal/submit-contribution/SubmitContribution.svelte
index ca7677f6..41fd1e0f 100644
--- a/frontend/src/components/portal/submit-contribution/SubmitContribution.svelte
+++ b/frontend/src/components/portal/submit-contribution/SubmitContribution.svelte
@@ -85,6 +85,7 @@
   let projectsError = $state(false);
   let selectedProject = $state("");
   let showProjectDropdown = $state(false);
+  let focusedProjectIndex = $state(-1);
   let showTypeDropdown = $state(false);
   let searchQuery = $state("");
 
@@ -419,6 +420,9 @@
       ? `${selectedProjectData.title} (next v${selectedProjectData.next_milestone_version || 1})`
       : "Select accepted project..."
   );
+  let selectedProjectIndex = $derived(
+    acceptedProjects.findIndex((project) => String(project.id) === String(selectedProject))
+  );
 
   function spotsLeftLabel(count) {
     return `${count} ${Number(count) === 1 ? "spot" : "spots"} left`;
@@ -624,14 +628,99 @@
     }, 200);
   }
 
-  function selectProject(project) {
-    selectedProject = String(project.id);
+  let projectDropdownButtonRef = $state(null);
+  let projectDropdownRef = $state(null);
+  let projectOptionRefs = $state([]);
+
+  function focusProjectOption(index, { defer = false } = {}) {
+    if (acceptedProjects.length === 0) return;
+    const nextIndex = (index + acceptedProjects.length) % acceptedProjects.length;
+    focusedProjectIndex = nextIndex;
+
+    const focusOption = () => {
+      projectOptionRefs[nextIndex]?.focus();
+    };
+
+    if (defer) {
+      requestAnimationFrame(focusOption);
+    } else {
+      focusOption();
+    }
+  }
+
+  function openProjectDropdown(index = selectedProjectIndex >= 0 ? selectedProjectIndex : 0) {
+    projectOptionRefs = [];
+    showProjectDropdown = true;
+    focusProjectOption(index, { defer: true });
+  }
+
+  function closeProjectDropdown({ focusTrigger = false } = {}) {
     showProjectDropdown = false;
+    focusedProjectIndex = -1;
+    if (focusTrigger) {
+      requestAnimationFrame(() => {
+        projectDropdownButtonRef?.focus();
+      });
+    }
+  }
+
+  function toggleProjectDropdown() {
+    if (showProjectDropdown) {
+      closeProjectDropdown();
+    } else {
+      openProjectDropdown();
+    }
+  }
+
+  function selectProject(project, options = {}) {
+    selectedProject = String(project.id);
+    closeProjectDropdown({ focusTrigger: options.focusTrigger ?? true });
     if (error === "Please select the accepted project this milestone belongs to.") {
       error = "";
     }
   }
 
+  function handleProjectTriggerKeydown(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      openProjectDropdown(selectedProjectIndex >= 0 ? selectedProjectIndex : 0);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      openProjectDropdown(selectedProjectIndex >= 0 ? selectedProjectIndex : acceptedProjects.length - 1);
+    } else if (event.key === "Escape" && showProjectDropdown) {
+      event.preventDefault();
+      closeProjectDropdown();
+    }
+  }
+
+  function handleProjectOptionKeydown(event, index) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusProjectOption(index + 1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusProjectOption(index - 1);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      selectProject(acceptedProjects[index]);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      closeProjectDropdown({ focusTrigger: true });
+    }
+  }
+
+  function handleProjectDropdownFocusOut() {
+    setTimeout(() => {
+      if (
+        showProjectDropdown &&
+        projectDropdownRef &&
+        !projectDropdownRef.contains(document.activeElement)
+      ) {
+        closeProjectDropdown();
+      }
+    }, 0);
+  }
+
   // Evidence functions
   function addEvidenceSlot() {
     evidenceSlots = [
@@ -1132,7 +1221,6 @@
 
   // Click outside listener for dropdown
   let dropdownRef = $state(null);
-  let projectDropdownRef = $state(null);
   function handleClickOutside(event) {
     if (
       showTypeDropdown &&
@@ -1146,7 +1234,7 @@
       projectDropdownRef &&
       !projectDropdownRef.contains(event.target)
     ) {
-      showProjectDropdown = false;
+      closeProjectDropdown();
     }
   }
 </script>
@@ -1564,13 +1652,20 @@
             </p>
           </div>
         {:else}
-          <div class="project-dropdown-wrapper relative w-full" bind:this={projectDropdownRef}>
+          <div
+            class="project-dropdown-wrapper relative w-full"
+            bind:this={projectDropdownRef}
+            onfocusout={handleProjectDropdownFocusOut}
+          >
             <button
               type="button"
               class="project-dropdown-trigger flex h-[44px] w-full items-center justify-between gap-3 rounded-[8px] border border-[#f5f5f5] bg-white px-[12px] text-left font-['Switzer'] text-[14px] text-black tracking-[0.28px] transition-colors hover:border-gray-300 focus:outline-none focus:border-black"
               aria-haspopup="listbox"
               aria-expanded={showProjectDropdown}
-              onclick={() => (showProjectDropdown = !showProjectDropdown)}
+              aria-controls="project-dropdown-menu"
+              bind:this={projectDropdownButtonRef}
+              onclick={toggleProjectDropdown}
+              onkeydown={handleProjectTriggerKeydown}
             >
               <span class="min-w-0 truncate {selectedProject ? 'text-black' : 'text-[#6b6b6b]'}">
                 {selectedProjectLabel}
@@ -1593,16 +1688,20 @@
 
             {#if showProjectDropdown}
               <div
+                id="project-dropdown-menu"
                 class="project-dropdown-menu absolute left-0 right-0 top-[48px] z-[60] max-h-[280px] overflow-y-auto rounded-[8px] border border-[#f0f0f0] bg-white shadow-[0_18px_48px_rgba(31,42,68,0.16)]"
                 role="listbox"
               >
-                {#each acceptedProjects as project}
+                {#each acceptedProjects as project, index}
                   <button
                     type="button"
                     class="project-dropdown-option flex w-full flex-col items-start border-b border-[#f5f5f5] p-[12px] text-left last:border-0 transition-colors hover:bg-gray-50 {String(project.id) === String(selectedProject) ? 'bg-[#f0f0ff]' : ''}"
                     role="option"
                     aria-selected={String(project.id) === String(selectedProject)}
+                    tabindex={focusedProjectIndex === index ? 0 : -1}
+                    bind:this={projectOptionRefs[index]}
                     onclick={() => selectProject(project)}
+                    onkeydown={(event) => handleProjectOptionKeydown(event, index)}
                   >
                     <span class="font-['Switzer'] text-[14px] font-medium text-black tracking-[0.2px]">
                       {project.title}
@@ -2169,10 +2268,6 @@
       width: 100%;
     }
 
-    .linked-project-panel {
-      z-index: 20;
-    }
-
     .project-dropdown-menu {
       max-height: min(48vh, 280px);
     }

From bbf07a5de6339f81119b049bd275da50a0a30872 Mon Sep 17 00:00:00 2001
From: JoaquinBN <joaquinbressan@gmail.com>
Date: Mon, 6 Jul 2026 16:18:32 +0200
Subject: [PATCH 3/3] Centralize mobile sidebar close handling

---
 frontend/src/components/Sidebar.svelte | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
index d0a55379..b4145eba 100644
--- a/frontend/src/components/Sidebar.svelte
+++ b/frontend/src/components/Sidebar.svelte
@@ -166,9 +166,7 @@
       const authButton = document.querySelector('[data-auth-button]');
       if (authButton) authButton.click();
     }
-    if (window.innerWidth < 768) {
-      isOpen = false;
-    }
+    closeMobileSidebar();
   }
 
   // Check if a route is active
@@ -197,9 +195,7 @@
     currentCategory.set(category);
     trackSidebarNav(path, { roleContext: roleContextForCategory(category) });
     push(path);
-    if (window.innerWidth < 768) {
-      isOpen = false;
-    }
+    closeMobileSidebar();
   }
 
   // Shorten address for display