fix(ProposalPage): status selector in ProposalHeader

the dropdown icon was present but the selector component wasn't used

the selector options appeared without padding in header so this was
added in the component

fixes
https://gitworkshop.dev/repo/gitworkshop/issue/
7a8983734d366ae22828b4bbcc5c292480f427ab9f5a78428aa6fca1c9562b7b

src/lib/components/proposals/ProposalHeader.svelte

@@ -15,6 +15,7 @@
   import { ensureUser, logged_in_user } from '$lib/stores/users'
   import type { Unsubscriber } from 'svelte/store'
   import { onDestroy } from 'svelte'
+  import StatusSelector from './StatusSelector.svelte'
 
   dayjs.extend(relativeTime)
   export let type: 'proposal' | 'issue' = 'proposal'
@@ -60,7 +61,7 @@
 </script>
 
 <div
-  class="grow overflow-hidden border-b border-accent-content bg-base-200 pb-4 pt-2 text-xs text-neutral-content"
+  class="grow border-b border-accent-content bg-base-200 pb-4 pt-2 text-xs text-neutral-content"
 >
   <Container>
     {#if loading}
@@ -82,7 +83,15 @@
       </div>
       <div class="pt-1">
         <div class="mr-3 inline align-middle">
-          <Status {type} {status} edit_mode={!!$logged_in_user} />
+          {#if !$logged_in_user}
+            <Status {type} {status} edit_mode={false} />
+          {:else}
+            <StatusSelector
+              {type}
+              {status}
+              {repo_identifier}
+              proposal_or_issue_id={id}
+            />{/if}
         </div>
         <div class="mr-3 inline align-middle">
           opened {created_at_ago}

src/lib/components/proposals/StatusSelector.svelte

@@ -98,7 +98,7 @@
         class="menu dropdown-content z-[1] ml-0 w-52 rounded-box bg-base-300 p-2 shadow"
       >
         {#if status !== proposal_status_draft && type !== 'issue'}
-          <li class="pl-0">
+          <li class="my-2 pl-0">
             <button
               on:click={() => {
                 changeStatus(proposal_status_draft)
@@ -109,7 +109,7 @@
           </li>
         {/if}
         {#if status !== proposal_status_open}
-          <li class="pl-0">
+          <li class="my-2 pl-0">
             <button
               on:click={() => {
                 changeStatus(proposal_status_open)
@@ -120,7 +120,7 @@
           </li>
         {/if}
         {#if status !== proposal_status_applied}
-          <li class="pl-0">
+          <li class="my-2 pl-0">
             <button
               on:click={() => {
                 changeStatus(proposal_status_applied)
@@ -131,7 +131,7 @@
           </li>
         {/if}
         {#if status !== proposal_status_closed}
-          <li class="pl-0">
+          <li class="my-2 pl-0">
             <button
               on:click={() => {
                 changeStatus(proposal_status_closed)